• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Inne elementy oparte o pozycjonowanie float:left przejmują animację pierwszego elementu

0 głosów
108 wizyt
pytanie zadane 6 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,080 p.)

Każdy element ze środka strony ma inną animację. Jednak po wprowadzeniu dla każdego elementu float:left wszystkie elementy przejęły animację pierwszego elementu (animacje są w jquery natomiast opadanie w dół jest css- @keyframes). Jak wyłączyć dla 2 i 3 elementu animację pierwszego i sprawić by wykonywały się akcje, które są napisane w jquery ?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">   
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">  
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
</head>

<body>

    
    
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div> 
    
    
         <div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div> 
    
  
         <div class="dane">  <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
    </div>   
    
     
    
    
    
 
    
    
    
<div class="main">
    
      <div class="window_learn" >
            <div class="html5">HTML5</div>
            <div class="jquery">JQUERY</div>
            <div class="css3">CSS3</div>
            <div class="php5">PHP5</div>
            <div class="sql">MySQL</div>
     </div>
    
    
        <div class="web_designer">WEB DESIGNER</div> 

        <div class="passion">PASJA TWORZENIA STRON</div>
    
 </div>
    
    
  
        

  
   
    
    
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</body>

</html>

body{
	width:100%;
	height:auto;
	margin:0;
	
}




.header{
	
	position:fixed;
	width:100%;
	height:10vh;
	background-color:black;
	
}


.face,.twitter,.mail{
	
	
	display:inline;
	float:left;
	margin-left:1vh;
	margin-top:2vh;
	
	width:5vh;
	height:5vh;
	
}

.face:hover,.twitter:hover,.mail:hover{
	
	
	display:inline;
	float:left;
	margin-left:1vh;
	margin-top:2vh;
	border:0.2vh solid aqua;
	width:5vh;
	height:5vh;
	
	
}


.dane{
	
	width:15%;
	height:10vh;
	
	float:right;
	text-align:center;
	
	
}

.name{
	
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size:2.5vh;
  color:white;
  line-height:10vh;
  float:left;
 padding-left:3.5vh;
  width:13vh;
  height:10vh;

}
.surname{
	
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size:2.5vh;
  color:white;
  line-height:10vh;
  float:left;
 
}


.window_learn{
    display: none;
    width:38%;
    height:5vh;
    float:left;
    
    margin-left: 30%;
    margin-top:36vh;
   animation-name: w_dol;
    animation-duration:3s;
}

   @keyframes w_dol
      {
        0% { margin-top:0vh; }
        100% { margin-top:36vh; }
      }





.html5,.jquery,.css3,.php5,.sql{
    
  font-size:5vh;
  float:left;
   padding-left: 3.4vh;
        
     font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
    
}


.web_designer{
    
    width:50%;
    height: :10vh;
    display: none;
    float:left;
    margin-top: 3vh;
    margin-left: 25%;
    
   
    text-align: center;
    line-height: 4vh;
    font-size: 11vh;
   font-family: 'Archivo Black';
   font-style: normal;
   font-weight: 400;
    color:dodgerblue;
    
}

.passion{
    width:21%;
    
   
    height: 4vh;
    clear: both;
    float:left;
    margin-top: 3vh;
    margin-left: 109vh;
   
text-align: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size:3vh;
    
}





@media screen and (max-width: 599px) {

.dane{
float:right;

width:60%;

}
 
.name{
font-size:2vh;	
	position:relative;
	line-height:10vh;
	
}

.surname{
	font-size:2vh;
	
	position:relative;
	line-height:10vh;
}
      
          
.window_learn{
visibility: hidden;
    
        
    }

.web_designer{
    width:10%;
    height: :10vh;
    
    float:left;
   
    
    
    text-align: center;
    line-height: 4vh;
   font-size: 5vh;
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
        
    }
    
    
    .passion{
        visibility: hidden;
    }


  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



}

   $(document).ready(function(){
                $(".face").each(function(){
                    $(".face").fadeIn(1800);
                    $(".twitter").fadeIn(1800);
                    $(".mail").fadeIn(1800);
                   
               
                });
             }); 
                  
                  $(document).ready(function(){
                $(".dane").each(function(){
                    $(".dane").fadeIn(1800);
                    
               
                });
             });


  $(document).ready(function(){
            $(".web_designer").each(function(){

                $(".web_designer").fadeIn(3000);
            });
        }); 
        
          $(document).ready(function(){
            $(".passion").each(function(){

                $(".passion").show(1000);
            });
        }); 
        
        
   $(document).ready(function(){
                $(".window_learn").each(function(){
                    $(".window_learn").fadeIn(1000);
                });
       
   });
    
                  

 

1 odpowiedź

+1 głos
odpowiedź 7 listopada 2017 przez ShiroUmizake Nałogowiec (44,340 p.)

jQ masz znacznie rozszerzony sposób poszukiwania elementów, możesz poszukiwać te elementy których poszukujesz za pmocą nth-child.

https://api.jquery.com/nth-child-selector/

Lub możesz sam selektor wyszukać w podobny sposób: nth-child bądż first-child. 

Ostatecznie możesz przekazać zdarzenie do jego dzieci. Na koniec pro-tip dla ciebie

zamiast:

.html5,.jquery,.css3,.php5,.sql{
     
  font-size:5vh;
  float:left;
   padding-left: 3.4vh;
         
     font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
     
}

To możesz tak:

.window-learn div{
//twoje wlasciwosci
}

Po co się męczyć :)

Vizualizacja:

https://codepen.io/shiroUmizake/pen/zPKWLL

Btw. To powinna być lista (obecnym kształćie)

Btw2; Uważałbym paddingami ustawionymi vh :) (A co jeżeli ktoś ma bardzo wysoki monitor, powiedzmy niech będzie 30 cali?)

Troszeczkę przekomibnowałeś powiedz co chciałeś osiągnąć. A po czwarte fadeIn również jesteś w stanie zaimplementować keyframes a właściwie obecnej postaci nie potrzebujesz ani jeden linijki jQ

komentarz 7 listopada 2017 przez DariuszH Gaduła (3,080 p.)
Dzięki :) Nie męczę się, tylko uczę :) A społeczność forum włącznie z Tobą super :)
komentarz 8 listopada 2017 przez ShiroUmizake Nałogowiec (44,340 p.)
To teraz powiedz co chciałeś osiągnąć a ja będę mógł na spokojnie zasugerować/ bądż naprowadzić na rozwiązanie :).

Podobne pytania

0 głosów
1 odpowiedź 120 wizyt
pytanie zadane 28 października 2017 w HTML i CSS przez PrzyszłyProgramista Nowicjusz (240 p.)
0 głosów
1 odpowiedź 63 wizyt
pytanie zadane 11 lipca 2018 w HTML i CSS przez emanuel123 Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 111 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

62,453 zapytań

108,603 odpowiedzi

226,735 komentarzy

36,179 pasjonatów

Przeglądających: 190
Pasjonatów: 20 Gości: 170

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...