Kamis, 11 Januari 2018

Slider dan Page Scrolling dengan HTML, CSS dan JQuery

     No comments
Hallo semua, lama tak jumpa nih, disini ane bakal kasih tutorial untuk membuat Page Scrolling dengan menggunakan HTML, CSS dan JQuery, langsung saja disimak pembahasan berikut.

1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.html dan tuliskan syntax dasar html
<html>
    <head>
        <title>Slider dan Page Scrolling dengan HTML, CSS dan JQuery</title>
    </head>
    <body>
      
    </body>
</html>
3. Sisipkan <meta name="viewport"... pada bagian <head></head> digunakan agar website responsif
<html>
    <head>
        <title>Slider dan Page Scrolling dengan HTML, CSS dan JQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      
    </body>

</html>
4. Sisipkan juga script-script JQuery nya yang telah kita siapkan pada folder

5. Tuliskan syntax untuk script diatas pada bagian <head></head>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Slider dan Page Scrolling dengan HTML, CSS dan JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">      </script>
<script type="text/javascript" src="js/jquery.onepage-scroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/onepage-scroll.css" />

<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section",
});

</script>
    </body>


</html>
6. Selanjutnya buat rancangan untuk website yang terdiri dari <header> dan <div class="main">. class main berisikan 3 section yang digunakan nantinya untuk page scrolling.
7. <header> berisikan judul yang bertuliskan "gontok.blogspot.com"
<header>
     <h1>gontok.blogspot<small>.com</small></h1>
</header>
8. Masuk ke <div class="main">, tuliskan syntax untuk section pertama
<section class="page one">
<div class="page-container">
              <div class="container">
                     <div id="content-slider">
                           <div id="slider">
                                  <div id="mask">
                                  <ul>
                                  <li id="first" class="firstanimation">
                                  <a href="#">
                                   <img src="images/img_1.jpg" width="1070px" height="380px"/>
                                  </a>
                                  </li>

                                   <li id="second" class="secondanimation">
                                   <a href="#">
                                  <img src="images/img_2.jpg" width="1070px" height="380px"/>
                                   </a>
                                  </li>
                                      
                                   <li id="third" class="thirdanimation">
                                  <a href="#">
                                   <img src="images/img_3.jpg" width="1070px" height="380px" />
                                   </a>
                                  </li>
                                                  
                                   <li id="fourth" class="fourthanimation">
                                  <a href="#">
                                   <img src="images/img_4.jpg" width="1070px" height="380px" />
                                   </a>
                                   </li>
                                                  
                                  <li id="fifth" class="fifthanimation">
                                   <a href="#">
                                  <img src="images/img_5.jpg" width="1070px" height="380px" />
                                  </a>
                                   </li>
                                   </ul>
                                  </div>
                                   <div class="progress-bar"></div>
                                   </div>
                            </div>
                     </div>

              <h2>Slider</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, impedit, unde, ducimus ab ipsam ipsa dignissimos amet culpa tempora reprehenderit tempore odit consequuntur totam accusantium quis. Amet, nulla repellendus voluptate.</p>
</div>
</section>
9. Section kedua dan ketiga
<section class="page two">
<div class="page-container">
<h2>Himawan Ari Dwi Laksono</h2><br/>
<h3>5140411276</h3><br/>
<h3>Desain WEB A</h3>
</div>
</section>

<section class="page three">
<div class="page-container">
<h2>Halaman ke 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, impedit, unde, ducimus ab ipsam ipsa dignissimos amet culpa tempora reprehenderit tempore odit consequuntur totam accusantium quis. Amet, nulla repellendus voluptate.</p>
</div>
</section>
</div>
10. Buat style.css, tuliskan syntax berikut
*{
       padding:0; margin:0;
}
h2{
       font-family: 'Righteous', cursive;
}
h3{
       font-family: Calibri; color: white;
}
p{
       font-family: 'Voltaire', sans-serif;
       color: #DDDDDD;
}
small{
       color: #b69877;
}
small a,
p a{
       color: #ddd;
       text-decoration: none;
}

/* Header */
header{
       background: #5b264e;
       padding: 10px 20px;
       margin-bottom: 0;
       position: relative;
       z-index: 10;
       overflow: hidden;
       color: #ddd;
}
header a{
       color: #dddddd;
       text-decoration: none;
}
header img{
       float: left;
}
header h1{
       margin-top:20px;
       margin-left:40px;
       font-family: 'Righteous', cursive;
}

/* Content */

.one{
       background-color: #ae6c66;
}
       .one .page-container{
              position: absolute;
              bottom: -70px;
              margin-left: -550px;
              padding-top: 10px;
              left: 50%;
              margin-bottom: 150px;
              max-width: 650px;
       }
              .one .page-container h2{
                     font-size: 4em;
              }
              .one .page-container p{
                     padding: 20px 0;
                     line-height: 1.5em;
              }

.two{
       background-color: gray;
}
       .two .page-container{
              position: absolute;
              bottom: 100px;
              margin-left: -550px;
              left: 50%;
              margin-bottom: 150px;
              max-width: 650px;
       }
              .two .page-container h2{
                     font-size: 4em;
              }
              .two .page-container p{
                     padding: 20px 0;
                     line-height: 1.5em;
              }

.three{
       background-color: #036564;
}
       .three .page-container{
              position: absolute;
              bottom: 0px;
              margin-left: -550px;
              left: 50%;
              margin-bottom: 150px;
              max-width: 650px;
       }
              .three .page-container h2{
                     font-size: 4em;
              }
              .three .page-container p{
                     padding: 20px 0;
                     line-height: 1.5em;
              }

.container {
       overflow:hidden;
       width:1090px;
       height: 380px;
}

/* CONTENT SLIDER */
#content-slider {
       width:100%;
       height:380px;
       position: absolute;
       bottom: 195px;
}
/* SLIDER */
#slider {
       height:380px;
       width:1070px;
       overflow:visible;
       position:relative;
}
#mask {
       overflow:hidden;
       height:380px;
}
#slider ul {
       margin:0;
       padding:0;
       position:relative;
}
#slider li {
       width:1070px;
       height:380px;
       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; } 
}

Jangan lupa untuk disave setiap progress yang dilakukan
11. Buka index.html dengan browser

12. Tampilan awal dibuka

13. Ketika di scroll muncul section kedua

14. Scroll lagi akan muncul section ketiga
Yap.. sekian dulu tutorial kali ini, cukup menarik kan untuk dibuat, semoga bermanfaat untuk kalian yang pengin coba-coba buat. Sampai jumpa dilain kesempatan..

Minggu, 05 November 2017

Layout, Marquee, Slider Animation dan Video dengan HTML dan CSS

     No comments
Hallo semua, ane bakal kasih tutorial lagi nih bagaimana cara membuat layout yang berisikan marquee(text berjalan), slider animation up dan down, beserta video yang dapat diputar berulang kali. Tertarik untuk menyimak tutorialnya? langsung saja disimak tutorial yang ane buat..

1. Langkah pertama dan paling mendasar, buka texteditor terlebih dahulu yang akan digunakan. Pada tutorial ini menggunakan Sublime Text 3.
2. Buat index.php dan tuliskan syntax dasar html
<html>
    <head>
        <title>Layout, Marquee, Animation dan Video dengan HTML dan CSS</title>
    </head>
    <body>
      
    </body>
</html>
3. Buat style.css untuk membuat rancangan tampilan seperti pada gambar
Langsung saja tuliskan syntax dibawah ini
body{
       background: #171a21;
       color: white;
}
#pagewrep{
       width: 960px; margin: 10px auto; width: 100%;
}
#header{
       width: 100%;  height: 50px; color: black;
       font-size: 15px; color:white; background-color: visible;  margin-bottom: 10px; margin-top: -10px;
}
       .tgljam{
              width: 125px; background-color: #14324a; height: 50px; text-align: center; float: left;
       }
       #tgl{
               line-height: 30px;
       }
       #jam{
               line-height: 10px;
       }
       .judul{
              width:100%; height: 50px; background-color: #173b56; text-align: center; line-height: 50px;
       }
#cont-l{
       width-max: 340px; height: auto; background: linear-gradient(#0b151e,#173b56);             float: right; color: white;
}
#cont-up{
       width: 320px; height: auto; background-color: visible; margin :0 10px 10px 10px;
}
#cont-lsml{
       width: 340px; height: auto; background: linear-gradient(#0b151e,#173b56); float : right; margin-top : 10px; color: white;
}
       #cont-bot{
              width: 325px; height: 120px; background-color: visible;
       }
              .cont-botl{
                     width: 162.5px height :150px; float: left; padding-left: 10px; background-color: visible;
              }
              .cont-botr{
                     width: 162.5px height :150px; float: right; margin-right: -10px; background-color: visible;
              }
#cont-m{
       width-max: 960px; height: auto; background: linear-gradient(#0b151e,#173b56); float: left; padding: 10px 10px; 
}
       .cont-marq{
              width:960px; height: 30px; background-color: #14324a; font-size: 18px; font-family: calibri; color: white;
              line-height: 25px;
       }
       .cont-video{
              margin-top: -20px; margin-bottom: -30px; max-width: 960px; width: 100%;
       }
#footer{
       width: 100%;  height: 50px; background-color: #173b56; float: left; text-align: center; color:white; margin-top: 10px;
       margin-bottom: 5px; line-height: 50px;
}
4. Kembali ke index.html, buat tanggal dan jam menggunakan function dengan menuliskan syntax dibawah. Sisipkan syntax tersebut pada bagian head
<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>
5. Pada bagian body, berikan onload="startTime()" untuk menggunakan function. Buat div id pagewrep dan header untuk tgljam dan judul
<body onload="startTime()">
       <div id="pagewrep">
              <div id="header">
                     <div class="tgljam">
                            <div id="tgl"></div>
<div id="jam"></div>
                            <script>
                            var d = new Date();
                            document.getElementById('tgl').innerHTML = d.toDateString();
                            </script>
                     </div>
                     <div class="judul"><h3>Dota2 - The International 8</h3></div>

              </div>
6. Buat div cont-m sebagai wadah cont-marq dan cont-video
<div id="cont-m">
       <div class="cont-marq">
<marquee>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod cursus maximus. Morbi imperdiet est magna, nec condimentum ante mattis sed. Vestibulum at porta neque. Sed pellentesque odio augue, in commodo mi scelerisque quis. Sed accumsan tincidunt commodo. Sed ultricies massa vitae odio viverra, ac fermentum metus pretium. Etiam rhoncus ante in posuere aliquet. Sed feugiat purus turpis, et iaculis urna iaculis nec.
              </marquee>
       </div>
       <div class="cont-video">
<video width="960px" height="600px" autoplay loop>
<source src="Dota 2 - 101% (Pro player montage).mp4" type="video/mp4">
</video>
</div>
</div>
7. Kemudian buat div cont-l untuk wadah cont-up
<div id="cont-l"><h4 align="center">Schedule High-Bracket</h4>
       <div id="cont-up">
<marquee behavior="scroll" direction="up" scrollamount="4" loop="infinit" height="350px">
<div class="cont-menu"><img src="cont1.jpg" alt="smile"></br></div>
<div class="cont-menu"><img src="cont2.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont3.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont4.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont5.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont6.jpg" width="320px" height="60px"</br></div>
<div class="cont-menu"><img src="cont7.jpg" width="320px" height="60px"</br></div>
              </marquee>
</div>
</div>
8.Buat cont-lsml untuk menampung cont-botl dan cont-botr, pada cont-botl berisikan animasi bergerak ke bawah dan cont-botr berisi animasi bergerak ke atas.
<div id="cont-lsml">
<div id="cont-bot">
<div class="cont-botl">
<div id="slider">  <!-- Slider container -->
<div id="mask">  <!-- Mask -->
<ul>
<li id="first" class="firstanimation"><
a href="#"> <img src="img1.png" width="157.5px" height="100px"/> </a>
</li>
<li id="second" class="secondanimation">
<a href="#"> <img src="img2.png" width="157.5px" height="100px"/> </a>
</li>
<li id="third" class="thirdanimation">
<a href="#"> <img src="img3.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fourth" class="fourthanimation">
<a href="#"> <img src="img4.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fifth" class="fifthanimation">
<a href="#"> <img src="img5.png" width="157.5px" height="100px"/> </a>
</li>
</ul>
</div>  <!-- End Mask -->
</div>  <!-- End Slider Container -->
</div>
<div class="cont-botr">
<div id="slider">  <!-- Slider container -->
<div id="mask">  <!-- Mask -->
<ul>
<li id="first" class="firstanim">
<a href="#"> <img src="img6.png" width="157.5px" height="100px"/> </a>
</li>
<li id="second" class="secondanim">
<a href="#"> <img src="img7.png" width="157.5px" height="100px"/> </a>
</li>
<li id="third" class="thirdanim">
<a href="#"> <img src="img8.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fourth" class="fourthanim">
<a href="#"> <img src="img9.png" width="157.5px" height="100px"/> </a>
</li>
<li id="fifth" class="fifthanim">
<a href="#"> <img src="img10.png" width="157.5px" height="100px"/> </a>
</li>
</ul>
</div>  <!-- End Mask -->
</div>  <!-- End Slider Container -->
</div>
</div>
</div>
9. Sisipkan syntax animasi slider ke dalam style.css
#slider {
   height: 100px;
   width: 157.5px;
   margin: 10px auto 0;
   overflow: visible;
   position: relative;
}
#mask {
   overflow: hidden;
   height: 100px;
}
#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}
#slider li {
   width: 157.5px;  /* Width Image */
   height: 100px; /* Height Image */
   position: absolute;
   top: -100px; /* Original Position - Outside of the Slider */
   list-style: none;
}
#slider li.firstanimation {
   animation: cycle 20s linear infinite;
}
#slider li.secondanimation {
   animation: cycletwo 20s linear infinite;
}
#slider li.thirdanimation {
   animation: cyclethree 20s linear infinite;
}
#slider li.fourthanimation {
   animation: cyclefour 20s linear infinite;
}
#slider li.fifthanimation {
   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.firstanim {
   animation: cycle1 15s linear infinite;
}
#slider li.secondanim {
   animation: cycle2 15s linear infinite;
}
#slider li.thirdanim {
   animation: cycle3 15s linear infinite;
}
#slider li.fourthanim {
   animation: cycle4 15s linear infinite;
}
#slider li.fifthanim {
   animation: cycle5 15s 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; }
}
#slider-contup {
   height: 240px;
   width: 320px;
   margin: 10px auto 0;
   overflow: visible;
   position: relative;
}
#mask1 {
   overflow: hidden;
   height: 60px;
}
#slider-contup ul {
   margin: 0;
   padding: 0;
   position: relative;
}
#slider-contup li {
   width: 320px;  /* Width Image */
   height: 60px; /* Height Image */
   position: absolute;
   top: -100px; /* Original Position - Outside of the Slider */
   list-style: none;
}
#slider-contup li.firstanimation {
   animation: cycleup1 20s linear infinite;
}
#slider-contup li.secondanimation {
   animation: cycleup2 20s linear infinite;
}
#slider-contup li.thirdanimation {
   animation: cycleup3 20s linear infinite;
}
#slider-contup li.fourthanimation {
   animation: cycleup4 20s linear infinite;
}
#slider-contup li.fifthanimation {
   animation: cycleup5 20s linear infinite;
}
@keyframes cycleup1 {
   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 cycleup2 {
   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 cycleup3 {
   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 cycleup4 {
   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 cycleup5 {
   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; }
}
10. Buat div untuk footer, tutup div pagewrep, body dan htmlnya
<div id="footer">Copyright © 2017, Himawan Ari Dwi Laksono. All rights reserved</div>
       </div>
</body>
</html>
11. Buka browser yang akan digunakan untuk melihat hasil
Yap.. sekian dulu tutorial kali ini, cukup menarik kan untuk dibuat, semoga bermanfaat untuk kalian yang pengin coba-coba buat website. See ya later..

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com