Skrip Cara Membuat Slideshow Dengan CSS3
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>
Run Skrip

Tagged:

About The Author

Suka ingin berbagi pengetahuan dan pengalaman nyekrip program yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan Web Tutorial berbahasa Indonesia. Nyekrip - Web Tutorial Indonesia

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.