» » Membuat Image Slider Pure CSS3
Saturday, January 11, 2014

Membuat Image Slider Pure CSS3

Di sini saya akan share cara membuat pure css image slider untuk blogger yang hanya menggunakan CSS3 murni. Tidak Javascript atau jQuery digunakan. Jadi slider ini lebih mudah untuk menyesuaikan untuk pemula, hanya perlu HTML dasar dan sedikit pengetahuan CSS3 baik. Tidak ada sisi server coding yang digunakan di sini, sehingga semua ada di tangan Anda. Slider gaya Siklus ini dibuat oleh smashingmagazine. Lihatlah pada halaman mereka untuk lebih lanjut tentang hal itu.
Saya membuat sebuah versi bogarized dari mereka, sekarang hanya perlu mengikuti beberapa langkah mudah untuk menginstal slider ini pada blogspot .

     DEMO
    
Mari kita ikuti 4 langkah sederhana untuk menambahkan ini pada blog:
  1. Pergi ke Blogger Dashboard> Tata Letak>
  2. Tambah Gadget HTML / Javascript
  3. Salin kode di bawah ini dan paste.
            <style type="text/css" media="screen">
            .container {
                margin: 0 auto;
                overflow: hidden;
                width: 700px;
            }
            #content-slider {
                height: 335px;
                width: 100%;
            }
            #slider {
                background: none repeat scroll 0 0 #000000;
                border: 5px solid #FFFFFF;
                box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
                height: 320px;
                margin: 10px auto;
                overflow: visible;
                position: relative;
                width: 680px;
            }
            #mask {
                height: 320px;
                overflow: hidden;
            }
            #slider ul {
             margin:0;
             padding:0;
             position:relative;
            }
            #slider li {
             width:680px;
             height:320px;
             position:absolute;
             top:-325px;
             list-style:none;
            }

            #slider li.firstanimation {
             -moz-animation:cycle 25s linear infinite;
             -webkit-animation:cycle 25s linear infinite; 
            }
            #slider li.secondanimation {
             -moz-animation:cycletwo 25s linear infinite;
             -webkit-animation:cycletwo 25s linear infinite; 
            }
            #slider li.thirdanimation {
             -moz-animation:cyclethree 25s linear infinite;
             -webkit-animation:cyclethree 25s linear infinite; 
            }
            #slider li.fourthanimation {
             -moz-animation:cyclefour 25s linear infinite;
             -webkit-animation:cyclefour 25s linear infinite; 
            }
            #slider li.fifthanimation {
             -moz-animation:cyclefive 25s linear infinite;
             -webkit-animation:cyclefive 25s linear infinite; 
            }

            #slider .tooltip {
             background:rgba(0,0,0,0.7);
             width:300px;
             height:60px;
             position:relative;
             bottom:75px;
             left:-320px;
             -moz-transition:all 0.3s ease-in-out;
             -webkit-transition:all 0.3s ease-in-out; 
            }
            #slider .tooltip h1 {
             color:#fff;
             font-size:24px;
             font-weight:300;
             line-height:60px;
             padding:0 0 0 20px;
            }
            #slider li#first:hover .tooltip,
            #slider li#second:hover .tooltip,
            #slider li#third:hover .tooltip,
            #slider li#fourth:hover .tooltip,
            #slider li#fifth:hover .tooltip {
             left:0px;
            }

            /* PROGRESS BAR */
            .progress-bar {
             position:relative;
             top:-5px;
             width:680px;
             height:5px;
             background:#000;
             -moz-animation:fullexpand 25s ease-out infinite;
             -webkit-animation:fullexpand 25s ease-out infinite;
            }
            /* ANIMATION */
            @-moz-keyframes cycle {
             0%  { top:0px; }
             4%  { top:0px; }
             16% { top:0px; opacity:1; z-index:0; }
             20% { top:325px; opacity:0; z-index:0; }
             21% { top:-325px; opacity:0; z-index:-1; }
             92% { top:-325px; opacity:0; z-index:0; }
             96% { top:-325px; opacity:0; }
             100%{ top:0px; opacity:1; }
            
            }
            @-moz-keyframes cycletwo {
             0%  { top:-325px; opacity:0; }
             16% { top:-325px; opacity:0; }
             20% { top:0px; opacity:1; }
             24% { top:0px; opacity:1; }
             36% { top:0px; opacity:1; z-index:0; }
             40% { top:325px; opacity:0; z-index:0; }
             41% { top:-325px; opacity:0; z-index:-1; }
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-moz-keyframes cyclethree {
             0%  { top:-325px; opacity:0; }
             36% { top:-325px; opacity:0; }
             40% { top:0px; opacity:1; }
             44% { top:0px; opacity:1; }
             56% { top:0px; opacity:1; }
             60% { top:325px; opacity:0; z-index:0; }
             61% { top:-325px; opacity:0; z-index:-1; }
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-moz-keyframes cyclefour {
             0%  { top:-325px; opacity:0; }
             56% { top:-325px; opacity:0; }
             60% { top:0px; opacity:1; }
             64% { top:0px; opacity:1; }
             76% { top:0px; opacity:1; z-index:0; }
             80% { top:325px; opacity:0; z-index:0; }
             81% { top:-325px; opacity:0; z-index:-1; }
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-moz-keyframes cyclefive {
             0%  { top:-325px; opacity:0; }
             76% { top:-325px; opacity:0; }
             80% { top:0px; opacity:1; }
             84% { top:0px; opacity:1; }
             96% { top:0px; opacity:1; z-index:0; }
             100%{ top:325px; opacity:0; z-index:0; }
            }

            @-webkit-keyframes cycle {
             0%  { top:0px; }
             4%  { top:0px; }
             16% { top:0px; opacity:1; z-index:0; }
             20% { top:325px; opacity:0; z-index:0; }
             21% { top:-325px; opacity:0; z-index:-1; }
             50% { top:-325px; opacity:0; z-index:-1; }
             92% { top:-325px; opacity:0; z-index:0; }
             96% { top:-325px; opacity:0; }
             100%{ top:0px; opacity:1; }
            
            }
            @-webkit-keyframes cycletwo {
             0%  { top:-325px; opacity:0; }
             16% { top:-325px; opacity:0; }
             20% { top:0px; opacity:1; }
             24% { top:0px; opacity:1; }
             36% { top:0px; opacity:1; z-index:0; }
             40% { top:325px; opacity:0; z-index:0; }
             41% { top:-325px; opacity:0; z-index:-1; } 
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-webkit-keyframes cyclethree {
             0%  { top:-325px; opacity:0; }
             36% { top:-325px; opacity:0; }
             40% { top:0px; opacity:1; }
             44% { top:0px; opacity:1; }
             56% { top:0px; opacity:1; z-index:0; }
             60% { top:325px; opacity:0; z-index:0; }
             61% { top:-325px; opacity:0; z-index:-1; }
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-webkit-keyframes cyclefour {
             0%  { top:-325px; opacity:0; }
             56% { top:-325px; opacity:0; }
             60% { top:0px; opacity:1; }
             64% { top:0px; opacity:1; }
             76% { top:0px; opacity:1; z-index:0; }
             80% { top:325px; opacity:0; z-index:0; }
             81% { top:-325px; opacity:0; z-index:-1; }
             100%{ top:-325px; opacity:0; z-index:-1; }
            }
            @-webkit-keyframes cyclefive {
             0%  { top:-325px; opacity:0; }
             76% { top:-325px; opacity:0; }
             80% { top:0px; opacity:1; }
             84% { top:0px; opacity:1; }
             96% { top:0px; opacity:1; z-index:0; }
             100%{ top:325px; opacity:0; z-index:0; }
            }

            /* ANIMATION BAR */
            @-moz-keyframes fullexpand {
                0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
                4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
               16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
               17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
               18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
            }
            @-webkit-keyframes fullexpand {
                0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
                4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
               16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
               17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
               18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
            }
            </style>

            <div class="container">
             <div id="content-slider">
                 <div id="slider">
                     <div id="mask">
                        <ul>
                        <li id="first" class="firstanimation">
                        <a href="http://dimpost.com">
                        <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/>
                        </a>
                        <div class="tooltip">
                        <h1>Cougar</h1>
                        </div>
                        </li>

                        <li id="second" class="secondanimation">
                        <a href="#">
                        <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/>
                        </a>
                        <div class="tooltip">
                        <h1>Lions</h1>
                        </div>
                        </li>
                       
                        <li id="third" class="thirdanimation">
                        <a href="#">
                        <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/>
                        </a>
                        <div class="tooltip">
                        <h1>Snowalker</h1>
                        </div>
                        </li>
                                   
                        <li id="fourth" class="fourthanimation">
                        <a href="#">
                        <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/>
                        </a>
                        <div class="tooltip">
                        <h1>Howling</h1>
                        </div>
                        </li>
                                   
                        <li id="fifth" class="fifthanimation">
                        <a href="#">
                        <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/>
                        </a>
                        <div class="tooltip">
                        <h1>Sunbathing</h1>
                        </div>
                        </li>
                        </ul>
                        </div>
                        <div class="progress-bar"></div>
                    </div>
                </div>
            </div>
  4. Save
Posted by at

0 Response to "Membuat Image Slider Pure CSS3"

Post a Comment

Subscribe to: Post Comments (Atom)