Kamis, 28 Desember 2017

WEB DESAIN DINAMIS

Selamat akhir tahun gaes.!! Yeay. .
Diakhir tahun 2017 ini, aku bakalan posting tutorial cara membuat web desain dinamis. Pasti pada penasaran kan.. Hayo ngaku !! Oke langsung aja.

Pertama kita buat dulu file index.html nya. Kamu bisa gunain aplikasi Sublime, HTML5, atau node.JS. Nah Aplikasi yang aku pakai adalah Sublime karena aplikasi ini simple banget sih menurutku. Nggk ribet. Pada file index.html kamu isikan seperti contoh dibawah ini:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TUGAS DESAIN WEBSITE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="assets/styles.css"></link>
    </head>

     <body>
        <div class="wrapper">

 <!-- header  -->
                <!-- <h2>DESAIN WEB</h2> -->
                <div class="row col12">
                    <header>
                        <div id="slider">
                            <figure>
                                <img src="logo2.jpg" style="width: 940px;height: 330px;" alt />
                                <img src="gb2.jpg" style="width: 940px;height: 330px;" alt />
                                <img src="gb3.jpg" style="width: 940px;height: 330px;" alt />
                            </figure>
                        </div>
                        <nav>
                            <ul>
                                <li><a href="" class="current">HOME</a></li>
                                <li><a href="">WISATA INDONESIA</a></li>
                                <li><a href="">ALAM RAYA</a></li>
                                <li><a href="">TENTANG</a></li>
                                <li><a href="">KONTAK</a></li>
                             </ul>  
                        </nav>
                    </header>
                </div>

 <!-- konten -->

             <div class="row col9">
                <section class="courses">
                    <article>
                        <figure align="center">
                            <img src="gb1.jpg" alt="gb1">
                            <figcaption>GAMBAR MATERI</figcaption>
                        </figure>
                        <hgroup>
                            <h3 align="center">Materi Isi Web</h3>
                        </hgroup>
                        <p>
                            Desain Web Responsif (bahasa Inggris:Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar[1]. Ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja[2].
                        </p>
                    </article>
                </section>
            </div> 
        <div class="col3"> 
                <aside>

                     <section class="natural-tourism">
                        <h2>ALAM INDONESIA</h2>
                        <a href="">Alam 1</a>
                        <a href="">Alam 2</a>
                        <a href="">Alam 3</a>
                    </section>

                             <section class="contact-details">
                                <h2>Kontak</h2>
                                <p>Wisata alam<br/>Seluruh Indonesia
                            </section>

                 </aside>
        </div>

 <!-- FOOTER -->
                    <div class="row col12">
                <footer>
                    <p>&copy;Copyright 2017</p>
                </footer>
                </div>

         </div>
    </body>
</html>
Kedua, untuk syntax CSS nya adalah sebagai berikut:

body{
    color : #666666;
    background-color: #f9f8f6;
    background-image: url("images/gb1.jpg");
    background-position: center;
    font-family: Georgia, Times, serif;
    line-height: 1.4em;
    margin: 0px;
}
*{
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

 .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12{
    float: left;
    text-align: center;
}
.col1{width: 8.3333333%;}
.col2{width: 16.66%;}
.col3{width: 25%;}
.col4{width: 33.32%;}
.col5{width: 41.64%;}
.col6{width: 50%;}
.col7{width: 58.31%;}
.col8{width: 66.64%;}
.col9{width: 75%;}
.col10{width: 83.3%;}
.col11{width: 91.63%;}
.col12{width: 100%;}

 .wrapper{
    width: 940px;
    margin: 20px auto 20px auto;
    border: 2px solid #000000;
    background-color: #ffffff;
}
.container {
    overflow:hidden;
    width:1090px;
    height: 340px;
}

 /* CONTENT SLIDER */
#content-slider {
    width:100%;
    height:320px;
}
/* SLIDER */
#slider {
    box-shadow:1px 1px 5px rgba(0,0,0,0.7);
    height:330px;
    width:100%;
    overflow:visible;
    position:relative;
}

 #slider img{
    width: 1070px;
    height: 330px;
}

 #mask {
    overflow:hidden;
    height:330px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:1070px;
    height:320px;
    position:absolute;
    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:hover li, 
#slider:hover .progress-bar {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

 /* PROGRESS BAR */
.progress-bar { 
    position:relative;
    top:-5px;
    width:0px; 
    height:5px;
    background:#000;
    -moz-animation:fullexpand 25s ease-out infinite;
    -webkit-animation:fullexpand 25s ease-out infinite;
}

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

 @-webkit-keyframes cycle {
    0%  { left:0px; }
    4%  { left:0px; }
    16% { left:0px; opacity:1; z-index:0; } 
    20% { left:1070px; opacity:0; z-index:0; }
    21% { left:-1070px; opacity:0; z-index:-1; }
    50% { left:-1070px; opacity:0; z-index:-1; }
    92% { left:-1070px; opacity:0; z-index:0; }
    96% { left:-1070px; opacity:0; }
    100%{ left:0px; opacity:1; }
    
}
@-webkit-keyframes cycletwo {
    0%  { left:-1070px; opacity:0; }
    16% { left:-1070px; opacity:0; }
    20% { left:0px; opacity:1; }
    24% { left:0px; opacity:1; } 
    36% { left:0px; opacity:1; z-index:0; } 
    40% { left:1070px; opacity:0; z-index:0; }
    41% { left:-1070px; opacity:0; z-index:-1; }  
    100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0%  { left:-1070px; opacity:0; }
    36% { left:-1070px; opacity:0; }
    40% { left:0px; opacity:1; }
    44% { left:0px; opacity:1; } 
    56% { left:0px; opacity:1; z-index:0; } 
    60% { left:1070px; opacity:0; z-index:0; } 
    61% { left:-1070px; opacity:0; z-index:-1; }
    100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0%  { left:-1070px; opacity:0; }
    56% { left:-1070px; opacity:0; }
    60% { left:0px; opacity:1; }
    64% { left:0px; opacity:1; }
    76% { left:0px; opacity:1; z-index:0; }
    80% { left:1070px; opacity:0; z-index:0; }
    81% { left:-1070px; opacity:0; z-index:-1; }
    100%{ left:-1070px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0%  { left:-1070px; opacity:0; }
    76% { left:-1070px; opacity:0; }
    80% { left:0px; opacity:1; }
    84% { left:0px; opacity:1; }
    96% { left:0px; opacity:1; z-index:0; }
    100%{ left:1070px; 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; }   
}
header, section, footer, aside, nav, article, figure, figcaption{
    display: block;
}
header{
    height: 100%;
    background-image: url("../images/gb2.jpeg");
}
h1{
    text-indent: -9999px;
    width: 940px;
    height: 130px;
    margin: 0px;
}
nav, footer{
    clear: both;
    color: #ffffff;
    background-color: #aeaca8;
    height: 30px;
}
nav ul{
    margin: 0px;
    padding: 5px 0px 5px 30px;
}
nav li{
    display: inline;
    margin-right: 40px;
}
nav li a{
    color: #ffffff;
}
nav li a:hover, nav li a.current{
    color: #000000;
}
section.current{
    float: left;
    width: 659px;
    border-right: 1px solid #eeeeee;
}
article{
    clear: both;
    overflow: auto;
    width: 100%;
    text-align: justify;
    padding: 15px;
}
figcaption{
    text-align: center;
}
hgroup{
    margin-top: 40px;
}
aside{
    width: 230px;
    padding: 0px 0px 0px 5px;
}
aside section a{
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
}
aside section a:hover{
    color: #985d6a;
    background-color: #efefef;
}
a{
    color: #de6581;
    text-decoration: none;
}
h1, h2, h3{
    font-weight: normal;
}
h2{
    margin: 10px 0px 5px 0px;
    padding: 0px;
}
h3{
    margin: 0px 0px 10px 0px;
    color: #de6581;
}
aside h2{
    padding: 30px 0px 10px 0px;
    color: #de6581;
}
footer{
    font-size: 80%;
    text-align: center;
}

 @keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

 #slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure { 
  position: relative;
  width: 100%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite; 
}

Langkah selanjutnya, taruh/copykan file ini di htdocs dengan langkah
Local Disk C >> XAMPP >> htdocs

Setelah itu, buka web browser, buka alamat
localhost/kikydesweb/
Tampilan akan seperti gambar dibawah ini:




Nah, seperti itu guys.. Mudah kan :)
Silakan dicoba. Salam Coding :D
Diposting oleh di Tidak ada komentar:

Senin, 06 November 2017

LAYOUT VIDEO KOMBINASI BUTTON WARNA UNTUK BACKGROUND

Hay, guys kali ini aku akan memposting tutorial untuk membuat layout yang didalamnya ada videonya. Nah di dalam layout itu juga terdapat running text serta marquee. Layout ini bertemakan RESEP MASAKAN yang didalamnya bermuatkan video tutorial memasak. Pasti penasaran kan?? Hayoo.. ngaku aja deh. Okeh, langsung aja kita simak tutorial berikut ini. Semoga bermanfaat ya :)

Pertama, kita buka terlebih dahulu aplikasi Sublime Text 3, kenapa aku menggunakan Subime Text 3? Kalian pasti bertanya-tanya.. Karena di laptop aku adanya Sublime Text 3. Sebenarnya sih aku disuruh pakai HTML5 tapi berhubung laptop aku nggk support jadi pakai Sublime Text 3 aja ya. 


Kedua, setelah aplikasi Sublime Text 3 sudah kebuka, kita pilih pengaturan bahasa yang akan digunakan untuk index. Pilih HTML, Sedangkan untuk Style kita pilih CSS. Ikuti Langkah seperti dibawah ini



Ketiga, save kedua project tersebut dalam 1 folder. Setelah itu masukkan syntax sebagi berukut. Masukkan video yang  akan dimuat ke dalam 1 folder dengan extensi .mp4. Sebelumnya harus buat gambar untuk layout bagian kanan(up-down dan up)nya sebagai contoh pada gambar dibawah ini 


  • Pada project HTML
<!DOCTYPE html>
<html>
<head>
      <title>DAPUR KITA</title>
      <link rel="stylesheet" type="text/css" href="style.css">

    <script>

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('jam').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">
    <div id="pagewrep"> <!-- Kode ini membuat header-->
        <div id="header">
            <div class="wkt">
                <div id="tgl"></div>
                <div id="jam"></div>
                <script>
                var d = new Date();
                document.getElementById("tgl").innerHTML = d.toDateString();
                </script>
            </div>
     <div class="judul"><h2>DAPUR KICTHEN BUNDA</h2></div>
     </div>      
   
           
      <!-- Kode ini membuat button warna merah, biru, hijau sehingga akan mengubah warna background-->
      <div id="menu">
    <input type="button" style="background-color:red;" value="Merah" class="top-menu" onclick="warna('red')";/>
    <input type="button" style="background-color:blue;" value="Biru" class="top-menu" onclick="warna('blue')";/>
    <input type="button" style="background-color:green;" value="Hijau" class="top-menu" onclick="warna('green')";/>
    <script type="text/javascript">
      function warna(color){
        document.body.style.background=color;
        document.getElementById('form').style.color=color;
      }
    </script>
    </div>

    <!-- Kode ini membuat menu dan sub menu yang berada dipinggir kiri-->
<div id="cont-l"><h4 align="center">KATEGORI OLAHAN</h4>
    <marquee behavior="scroll" direction="up" scrollamount="4" loop="infinit" height="350px">
    <div class="cont-menu"><img src="gambar1.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar2.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar3.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar4.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar5.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar6.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar7.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar8.jpg" width="225px" hght="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar9.jpg" width="225px" height="50px" alt="smile"></br></div>
    <div class="cont-menu"><img src="gambar10.jpg" width="225px" height="50px" alt="smile"></br></div>
    </marquee>

    <div id="cont-bot">
        <div class="cont-botl">
            <div class="container">
               <div id="content-slider">
                  <div id="slider">  <!-- Slider container -->   
                     <div id="mask">  <!-- Mask -->

                     <ul>
                     <li id="first" class="animation1">  <!-- ID for tooltip and class for animation -->
                     <a href="#"> <img src="gb1.jpg" width="75px" height="50px" alt="Cougar"/> </a>
                     </li>

                     <li id="second" class="animation2">
                     <a href="#"> <img src="gb2.jpg" width="75px" height="50px" alt="Lions"/> </a>
                     </li>

                     <li id="third" class="animation3">
                     <a href="#"> <img src="gb3.jpg" width="75px" height="50px" alt="Snowalker"/> </a>
                     </li>

                     <li id="fourth" class="animation4">
                     <a href="#"> <img src="gb4.jpg" width="75px" height="50px" alt="Howling"/> </a>
                     </li>

                     <li id="fifth" class="animation5">
                     <a href="#"> <img src="gb5.jpg" width="75px" height="50px" alt="Sunbathing"/> </a>
                     </li>

                     </ul>

                     </div>  <!-- End Mask -->
                     <div class="progress-bar"></div>  <!-- Progress Bar -->
                  </div>  <!-- End Slider Container -->
               </div>
            </div>
        </div>
    <div class="cont-botr">
            <div class="container">
               <div id="content-slider" >
                  <div id="slider">  <!-- Slider container -->
                     <div id="mask">  <!-- Mask -->

                     <ul>
                     <li id="first" class="animation6">  <!-- ID for tooltip and class for animation -->
                     <a href="#"> <img src="gb6.jpg" width="75px" height="50px" alt="Cougar"/> </a>
                     </li>

                     <li id="second" class="animation7">
                     <a href="#"> <img src="gb7.jpg" width="75px" height="50px" alt="Lions"/> </a>
                     </li>

                     <li id="third" class="animation8">
                     <a href="#"> <img src="gb8.jpg" width="75px" height="50px" alt="Snowalker"/> </a>
                     </li>

                     <li id="fourth" class="animation9">
                     <a href="#"> <img src="gb9.jpg" width="75px" height="50px" alt="Howling"/> </a>
                     </li>

                     <li id="fifth" class="animation10">
                     <a href="#"> <img src="gb10.jpg" width="75px" height="50px" alt="Sunbathing"/> </a>
                     </li>

                     </ul>

                     </div>  <!-- End Mask -->
                     <div class="progress-bar"></div>  <!-- Progress Bar -->
                  </div>  <!-- End Slider Container -->
               </div>
            </div>
        </div>
    </div>
    </div>
        <div id="cont-m">
        <div class="cont-marq">TUTORIAL DONAT KENTANG LEMBUT</div>
        <div class="cont-video">           
          <video width="860px" height="500px" autoplay loop>
            <source src="vndk.mp4" type="video/mp4">
          </video>
          </div>
        </div>
        <!--Kode ini membuat layout bagian tengah-->
           
         
        </table>
</form>
            </div>
        <!-- Kode ini membuat footer-->
            <div id="footer"><marquee> RESEP MASAKAN ==> 1. INDONESIA 2. KOREA SELATAN 3. TIMUR TENGAH 4. TRADISIONAL INDONESIA
            5. MINUMAN 6. MENU DIET 7. MENU GIZI 8. DESSERT 9. BARAT 10. JEPANG
        </marquee>
        </div>
      </div>
</body>
</html>
  • Pada project CSS
#pagewrep{
                width: 100%;        height: 100px; margin: 0 auto;
}
#header{
                width: 100%;        height: 200px;      line-height: 200px;              color: black;
                text-align: center; font-size: 25px; color:white; background-color: orange; text-shadow: 2px 2px 5px;
}

.wkt{
      width:auto; height: 200px;  background-color: #DC143C; text-align: center; float: right;
      -webkit-border-radius: 20px 20px 20px 20px; padding-right: 40px;
      }
      #tgl{
         width: auto; background-color: visible; line-height: 30px; color: white;
         -webkit-border-radius: 20px 20px 20px 20px;
         }
      #jam{
         width:auto; background-color: visible; color: white;
         -webkit-border-radius: 20px 20px 20px 20px;
      }
   .judul{
      max-width: auto; height: 50px; background-color: #DC143C; text-align: center; line-height:50px;
      -webkit-border-radius: 20px 20px 20px 20px;
      }

#menu{
                width: 100%; height: 50px; background-color: #FE4421;
}
                .top-menu{
                                width: auto;          height: 50px;        padding-left: 30px; padding-right: 30px;       text-align: center;
                                line-height: 50px; background-color: #FE4421; float: left;        font-weight: bold;
                }
                .top-menu:hover{
                                color: #FFFFFF; background-color: #FEB721;
                }
#cont-l{
                width: 301px; height: 450px; background-color: yellow; float: left;
                padding-left: 57px;
                }
                .cont-menu:hover{
                                color: #FFFFFF; background-color: #FEB721;
                }
#cont-bot{
                width: 250px; height: 75px; background-color: red; float: left;
                }
                .cont-botl{
                                width: 250px; height :75px; float: left; background-color:visible; margin-bottom: 5px;
                }
                .cont-botr{
                                width: 215px; height :75px; float: right; background-color: visible; margin-right: 5px; margin-bottom: 5px;
                }
#cont-m{
                width: 950px; height: auto; background-color: gray; float: right;
                padding: 10px;

}
#footer{
                width: 100%;        height: 40px;        background-color: aqua; float: left; text-align: center; color: black; margin-top: 10px;
                margin-bottom: 5px; line-height: 40px; font-size: 18px;
}
#slider {
   height: 115px;
   width: 215px;
   margin: 10px auto 0;
   overflow: visible;
   position: relative;
}
#mask {
   overflow: hidden;
   height: 115px;
}

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 215px;  /* Width Image */
   height: 125px; /* Height Image */
   position: absolute;
   top: -100px; /* Original Position - Outside of the Slider */
   list-style: none;
}

#slider li.animation1 {
   animation: cycle 20s linear infinite;
}

#slider li.animation2 {
   animation: cycletwo 20s linear infinite;
}

#slider li.animation3 {
   animation: cyclethree 20s linear infinite;
}

#slider li.animation4 {
   animation: cyclefour 20s linear infinite;
}

#slider li.animation5 {
   animation: cyclefive 20s linear infinite;
}



@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: -100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: 100px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: 100px; opacity: 0; z-index: 0; }
   96% { top: 100px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: 100px; opacity: 0; } /* Original Position */
   16% { top: 100px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: -100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: 100px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: 100px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: 100px; opacity: 0; }
   36% { top: 100px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -100px; opacity: 0; z-index: 0; }
   61% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: 100px; opacity: 0; }
   56% { top: 100px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -100px; opacity: 0; z-index: 0; }
   81% { top: 100px; opacity: 0; z-index: -1; }
   100%{ top: 100px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: 100px; opacity: 0; }
   76% { top: 100px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -100px; opacity: 0; z-index: 0; }
}

#slider li.animation6 {
   animation: cyclefive 20s linear infinite;
}

#slider li.animation7 {
   animation: cyclefive 20s linear infinite;
}

#slider li.animation8 {
   animation: cyclefive 20s linear infinite;
}

#slider li.animation9 {
   animation: cyclefive 20s linear infinite;
}

#slider li.animation10 {
   animation: cyclefive 20s linear infinite;
} 

@keyframes cycle1 {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 100px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -100px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -100px; opacity: 0; z-index: 0; }
   96% { top: -100px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
   0%  { top: -100px; opacity: 0; } /* Original Position */
   16% { top: -100px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 100px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -100px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -100px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
   0%  { top: -100px; opacity: 0; }
   36% { top: -100px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 100px; opacity: 0; z-index: 0; }
   61% { top: -100px; opacity: 0; z-index: -1; }
   100%{ top: -100px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
   0%  { top: -100px; opacity: 0; }
   56% { top: -100px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 100px; opacity: 0; z-index: 0; }
   81% { top: -100px; opacity: 0; z-index: -1; }
   100%{ top: -100px; opacity: 0; z-index: -1; }
}
@keyframes cycle5 {
   0%  { top: -100px; opacity: 0; }
   76% { top: -100px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 100px; opacity: 0; z-index: 0; }
}

Hasilnya akan seperti gambar dibawah ini 


Button warna berguna untuk mengubah warna background. Warna background dapat kita pilih sesuai button yang ada. 

Silakan mencoba.



Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)