sampul-skrip-css-Nyekrip.com

Skrip berikut ini adalah bagian dari tutorial ” Cara Membuat Slideshow Dengan CSS3 “, silahkan anda uji coba dengan mengkopi paste atau ketikkan skrip berikut dalam teks editor anda. Berikutnya anda jalankan melalui browser kesayangan anda.

Untuk lebih jelasnya dalam memahami dan menggunakan skrip berikut, silahkan anda kunjungi Cara Membuat Slideshow Dengan CSS3 “.

<!doctype html>
 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Judul Halaman Saya</title>
    <style>
     body { background: #000; } 

     #slidercontainer { 
      position: relative; 
      overflow: hidden; 
      background: #000 
     }

     #slidercontainer { 
      width: 768px;
      height: 341px; 
     }

     #css3slider img { 
      width: 768px;
      height: 341px; 
      float: left;
     }

     #css3slider { 
      position: absolute; 
      width:3900px;  
      -webkit-animation-name:slider;
      -webkit-animation-duration:15s;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count:infinite;
      -moz-animation-name:slider;
      -moz-animation-duration:15s;
      -moz-animation-timing-function: ease-in-out;
      -moz-animation-iteration-count:infinite;
      -o-animation-name:slider;
      -o-animation-duration:15s;
      -o-animation-timing-function: ease-in-out;
      -o-animation-iteration-count:infinite;
      animation-name:slider;
      animation-duration:15s;
      animation-timing-function: ease-in-out;
      animation-iteration-count:infinite;
    }

    @-webkit-keyframes slider {     
      0% { left: 0; opacity: 0; }     
      2% { opacity: 1; }     
      20% { left: 0; opacity: 1; }     
      21% { opacity: 0; }     
      24% { opacity: 0; }     
      25% { left: -768px; opacity: 1; }       
      45% { left: -768px; opacity: 1; }     
      46% { opacity: 0; }     
      48% { opacity: 0; }     
      50% { left: -1536px; opacity: 1; }     
      70% { left: -1536px; opacity: 1; }     
      72% { opacity: 0; }     
      74% { opacity: 0; }    
      75% { left: -2304px; opacity: 1; }   	
      95% { left: -2304px; opacity: 1; }   	
      97%  { left: -2304px; opacity: 0;}   	
      100% { left: 0; opacity: 0; }
    } 

    @-moz-keyframes slider {     
      0% { left: 0; opacity: 0; }     
      2% { opacity: 1; }     
      20% { left: 0; opacity: 1; }     
      21% { opacity: 0; }     
      24% { opacity: 0; }     
      25% { left: -768px; opacity: 1; }       
      45% { left: -768px; opacity: 1; }     
      46% { opacity: 0; }     
      48% { opacity: 0; }     
      50% { left: -1536px; opacity: 1; }     
      70% { left: -1536px; opacity: 1; }     
      72% { opacity: 0; }     
      74% { opacity: 0; }    
      75% { left: -2304px; opacity: 1; }   	
      95% { left: -2304px; opacity: 1; }   	
      97%  { left: -2304px; opacity: 0;}   	
      100% { left: 0; opacity: 0; }
    } 

    @-o-keyframes slider {     
      0% { left: 0; opacity: 0; }     
      2% { opacity: 1; }     
      20% { left: 0; opacity: 1; }     
      21% { opacity: 0; }     
      24% { opacity: 0; }     
      25% { left: -768px; opacity: 1; }     
      45% { left: -768px; opacity: 1; }     
      46% { opacity: 0; }     
      48% { opacity: 0; }     
      50% { left: -1536px; opacity: 1; }     
      70% { left: -1536px; opacity: 1; }     
      72% { opacity: 0; }     
      74% { opacity: 0; }    
      75% { left: -2304px; opacity: 1; }   	
      95% { left: -2304px; opacity: 1; }   	
      97%  { left: -2304px; opacity: 0; }   	
      100% { left: 0; opacity: 0; }
    } 

    @keyframes slider {     
      0% { left: 0; opacity: 0; }     
      2% { opacity: 1; }     
      20% { left: 0; opacity: 1; }     
      21% { opacity: 0; }     
      24% { opacity: 0; }     
      25% { left: -768px; opacity: 1; }     
      45% { left: -768px; opacity: 1; }     
      46% { opacity: 0; }     
      48% { opacity: 0; }     
      50% { left: -1536px; opacity: 1; }     
      70% { left: -1536px; opacity: 1; }     
      72% { opacity: 0; }     
      74% { opacity: 0; }    
      75% { left: -2304px; opacity: 1; }   	
      95% { left: -2304px; opacity: 1; }   	
      97%  { left: -2304px; opacity: 0; }   	
      100% { left: 0; opacity: 0; }
    }

    #css3slider:hover { 
      -webkit-animation-play-state:paused; 
      -moz-animation-play-state:paused; 
      -o-animation-play-state:paused; 
      animation-play-state:paused; }
    }

    #css3slider img { 
      float: right; 
    }

    #slidercontainer:after { 
      content: "❚❚"; 
      font-size: 150px; 
      position: absolute; 
      z-index: 12; 
      color: rgba(255,255,255, 0); 
      left: 300px; top: 80px; 
      -webkit-transition: 1s all ease-in-out; 
      -ms-transition: 1s all ease-in-out; 
      -moz-transition: 1s all ease-in-out; 
      -o-transition: 1s all ease-in-out; 
      transition: 1s all ease-in-out; 
    }

    #slidercontainer:hover:after { 
      color: rgba(255,255,255, 0.6);  
    }
     </style>
  </head>
<body>
 <div id=slidercontainer>
  <div id=css3slider>
    <img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
	<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/white-tailed-kite.jpg" alt="White-tailed kite">
	<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/hawk.jpg" alt="Hawk" title="Hawk">
	<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/osprey.jpg" alt="Osprey">
	<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/square-tailed-kite.jpg" alt="Square-tailed kite">
  </div>
 </div>
</body>
</html>

About The Author

Comments

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.