Home / belajar bootstrap / Tutorial Bootstrap Animasi Pada Navigasi

Tutorial Bootstrap Animasi Pada Navigasi

Tutorial Bootstrap Animasi Pada Navigasi

Bissmillahirahmanirrahim – Pada pertemuan kali ini saya akan membuat tutorial membuat animasi pada navigasi dengan dibantu framework bootstrap, dengan menambahkan animasi pada website akan menambahkan kesan website kita seperti menjadi lebih hidup dan tidak membosankan. Tutorial kali ini hanya akan menampilkan animasi sederhana saja.

Perhatikan setiap langkah dibawah ini untuk membuat cara manambahkan animasi pada navigasi dengan bantuan bootstrap :

1 : Download master bootstrapnya terlebihdahulu
Jika kalian belum memiliki bootstrapnya silahkan saja kunjungi website resminya di https://getbootstrap.com/
kalian dapat memilih bootstrap versi 3 ataupun sekarang sudah 4 terserah kalian karena tuorial ini work pada 2 versi tersebut. Jika sudah di download extract hasil downloadnya maka akan menjadi sebuah folder bootstrap yang di dalamnya berisi folder css, font, dan juga js, jika kalian download tidak dengan dokumentasi nya.

2 : Buatlah sebuah folder baru dan masukan master bootstrapnya
Buat sebuah project baru terserah mau dinamakan apa tetapi includekan juga folder bootstrapnya kedalam folder project kalian

3 : Buat file HTML sederhana biasa yang sudah dihubungkan dengan file CSS dan JS bootstrap


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

    <script src="master.js"></script>
  </body>
</html>



4 : Kemudian Tambahkan sebuah navigasi yang sudah  disediakan bootstrap
masukan kode dibawah ini kedalam html dibawah <body> 


<nav class="navbar navbar-inverse navbar-fixed-top" id="navigasiku">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Navigasi Bootstrap</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

5 : Buat sebuah konten sederhana untuk mengisi halaman agar bisa di scroll
konten sederhana untuk mengisi halaman agar bisa di scroll
Nah animasi ini akan bekerja ketika kalian menscroll website kalian ke bawah ataupun ke atas untuk itu buatlah konten yang banyak didalam bootstrap supaya dapat discroll ke bawah.



<div class="container">

      <div class="starter-template">
        <h1> Belajar Bootstrap Animasi Navigasi</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div><!-- /.container -->

7 : Kemudian masukan code css berikut untuk costume css navigasinya

 


body {
  padding-top: 50px;
}
.starter-template {
  font-size: 18px;
  padding: 40px 15px;
  text-align: left;
}

#navigasiku{
 position: fixed;
 width: 100%;
 top: 0;
 transition: 1s;
}

8 : Kemudian buat script nya dengan nama master.js dan hubungkan js nya ke html

 


$(document).ready(function(){
 var backScroll = window.pageYOffset;
 window.onscroll = function(){
  var currentScroll = window.pageYOffset;
  if (backScroll > currentScroll) {
   document.getElementById("navigasiku").style.top = "0";
  }else{
   document.getElementById("navigasiku").style.top = "-100px";
  }
  backScroll = currentScroll;
 }
});




9 : Selesai

 Tutorial by : Angga Risky
Tutorial Bootstrap Animasi Pada Navigasi Tutorial Bootstrap Animasi Pada Navigasi Reviewed by kilhem on 7/25/2018 10:12:00 am Rating: 5

You May Also Like

No comments:

Jangan malu untuk berkomentar

Subscribe to: Post Comments ( Atom )
Powered by Blogger.