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

Jak płynnie z szarego obrazka przejść do kolorowego po upływie 2 s po załadowaniu obrazka ??

0 głosów
66 wizyt
pytanie zadane 20 maja 2018 w JavaScript, jQuery, AJAX przez DariuszH Gaduła (3,080 p.)
Pytanie w temacie jest treścią problemu :)

2 odpowiedzi

+1 głos
odpowiedź 20 maja 2018 przez argeento Szeryf (96,040 p.)
wybrane 20 maja 2018 przez DariuszH
 
Najlepsza
CSS: img z transition
JS: img onload > setTimeout 2s > dodaj klasę która zeruje grayscale
+1 głos
odpowiedź 20 maja 2018 przez Drajvon Bywalec (2,250 p.)
Ustaw domyślnie przeźroczystość obrazka na 0, a następnie dodaj do niego klasę z opacity: 1 i dzięki właściwości transition w css uzyskasz płynne przejście.
komentarz 20 maja 2018 przez DariuszH Gaduła (3,080 p.)


function change_color(){
var grey_color=document.getElementById('ja');


grey_color.style.filter="grayscale(100%) " ;


}


setTimeout(change_color,2000);

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PORTFOLIO</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
    <script type="text/javascript" src="index.js"></script>
    </head>
    



<body>
   
    <div class="black_half">
       
     
        <div class="white_ha">Hozer</div> 
        <div class="white_de">Dariusz</div>        
        <div class="portfolio">portfolio</div>  
                
        
        <img src="daro.jpg" id="ja" onload="change_color()">
        
        
        
        
        
        
    </div> 
             
           



    
    
    
    



        
















		

</body>
</html>
body{
	width:100%;
    height: 100vh;
    margin:0;
    overflow: hidden;
	
}

.black_half{


    width: 0%;
    height:100vh;
    background-color: black;
    background-size: 100% 100%;
     animation: 0.5s lefter forwards;

}

@keyframes lefter{

from{width: 0%;}
to{width: 25%;}
}




img{
    width:8vw;
    height:auto;
    position: absolute;
    top:68vh;
    transform: rotate(-360deg);
    border-radius:100%;
    animation: 1s photo forwards;
    filter: grayscale(100%);
    
}

@keyframes photo{
    from{left:24%;opacity:0; transform: rotate(0);}
    to{left:8%;opacity:1;transform: rotate(360deg);}
}






.name{
    
    font-family: 'Roboto-Black',sans-serif;
color:white;
    font-size:4vw;
    position: absolute;
    top:35vh;
    left:12%;
    text-align: center;
   
    
}
 @font-face {

        font-family: 'Roboto-Black';
        src: url('./Roboto-Black.ttf');
        
          }





.white_ha{
    position:absolute;
    top: 6vh;
    left:2%;
    width: 5%;
    height:13vh;
    text-align: center;
    color:white;
    line-height: 13vh;
    font-size:3vw;
    font-family: 'Roboto-Thin', sans-serif;
 animation: ha 1s forwards;

}

@keyframes ha{

    from{top:-10vh;opacity:0;}
    to{top:2vh;opacity:1;}
    
    
    }




.white_de{
  
    position:absolute;
    top: 5vh;
    left :10.5%;
    width: 5%;
    height:13vh;
    text-align: center;
    color:white;
    line-height: 13vh;
    font-size: 3vw;
    font-family: 'Roboto-Thin', sans-serif;
  
     animation: q 1s forwards;

}


@keyframes q{

    from{top:20vh;opacity:0;}
    to{top:2vh;opacity:1;}
    
    
    }


    @font-face {

        font-family: 'Roboto-Thin';
        src: url('./Roboto-Thin.ttf');
        
          }
        
.portfolio{
    position:absolute;
    top:11.5vh;
    left:55.1%;
    height: auto;
    color:red;
    font-family: 'Roboto-Thin', sans-serif;
    letter-spacing: 0.38vw;
    font-size:1.2vw;
    font-weight: bolder;
    width:50%; position:absolute;
    animation: portfolio 1s forwards;
}      
      
@keyframes portfolio{
    
    from{left:-110%;}
    to{left:15%;}
    
    
}



















Nic tam nie pomaga. To ma być automatycznie a nie po najechaniu :) 

Podobne pytania

0 głosów
3 odpowiedzi 87 wizyt
0 głosów
1 odpowiedź 75 wizyt
0 głosów
1 odpowiedź 110 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

64,053 zapytań

110,441 odpowiedzi

231,299 komentarzy

47,819 pasjonatów

Przeglądających: 228
Pasjonatów: 17 Gości: 211

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.

...