• 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
112 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,940 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,940 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ź 122 wizyt
pytanie zadane 28 października 2017 w HTML i CSS przez PrzyszłyProgramista Nowicjusz (240 p.)
0 głosów
1 odpowiedź 67 wizyt
pytanie zadane 11 lipca 2018 w HTML i CSS przez emanuel123 Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 116 wizyt
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

64,924 zapytań

111,391 odpowiedzi

234,424 komentarzy

46,754 pasjonatów

Przeglądających: 248
Pasjonatów: 11 Gości: 237

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.

...