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

pytanie zadane 20 maja 2018 w JavaScript przez DariuszH Gaduła (3,100 p.)

Pytanie w temacie jest treścią problemu :)

2 odpowiedzi

odpowiedź 20 maja 2018 przez niezalogowany
wybrane 20 maja 2018 przez DariuszH

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,100 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 :)