Membuat Scrool Layout Fixed dengan Js dan HTML5

Membuat Scrool Layout Fixed dengan Js dan HTML5


Baik kali ini zlearn akan membagikan tutorial bagaimana caranya membuat layout scrool view layout menggunan html 5 dan js

ya langsung saja masuk ke tutorial

Buat sebuah file dengan  nama index.html kemudian simpan di text editor anda
setelah itu pastekan script kode dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Scroll Image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body {
  background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
  font-weight:lighter;
  letter-spacing:1px;
}

.content {
  width: 320px;
  position: relative;
  margin: 0 auto;
}

.content h2 {
  margin: 35px 0 0;
}

.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}

.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}

.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
}

.content .header__fake i {
  display: block;
}

.content .header__fake .btm__border {
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.content .header__fake .icn__wrap {
  cursor: pointer;
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
  margin-right: -20px;
}

.content .header__fake .icn__wrap .icn__hamburger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  -ms-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  display: block;
  width: 18px;
  height: 1px;
  z-index: 999;
  background: #fff;
}

.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
  content: "";
  float: left;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  margin: 5px 0 0;
}

.content .header__fake .icn__wrap .icn__hamburger:before {
  margin: 6px 0 0;
}

.content .header__fake .icn__wrap svg {
  z-index: 10;
}

.content .header__fake .icn__wrap svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.animated .btm__border {
  left: 100%;
  right: 4px;
}

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.fix .btm__border {
  -webkit-animation: fix 0.2s linear;
  animation: fix 0.2s linear;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  right: 5px;
}
.h2, h2 {
  font-size: 26px;
}

@-webkit-keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}

@keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
 <h1>Scroll Layout javascript dan HTML 5 </h1>

    
    <div class="content">

        <h2>Scroll to see the magic.</h2>

        <div class="header__fake">

            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>

        </div>

    <a href="zlearn.id"></a>
        <h1>Hi<span><a href="zlearn.id">Silahkan scroll ke atas.</a></span></h1>

    </div>

<script type="text/javascript">
 <script>
    $header = $('.header__fake');

$(window).scroll(function() {

    var scroll = $(window).scrollTop();

    if (scroll > 20) {
        $header.addClass('animated').removeClass('fix');
    } else {
        $header.removeClass('animated').addClass('fix');
    }
  
});
    </script>
</script>
</body>
</html>


setalah anda menyimpannya kemudian coba jalankan di browsur anda dan lihat apa yang terjadi.
zlearn
Baca Juga:
Desain Template Login Colorfull
Membuat Layout Galeri Keren
Tutorial Membuat Grafik dengan PHP Mysql dan JS




Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...