Juanas Smith Shared: css

Tampilkan postingan dengan label css. Tampilkan semua postingan

Assalamualaikum. Wr. Wb, kali ini admin masih membahas tentang background, dan pada postingan kali ini admin mau berbagi tutorial membuat background titik particle yang atraktif dengan menggunakan particles.js, background ini sangat bagus karena memiliki animasi yang menarik dan interaktif ketika di hover atau di klik dengan mouse menampilkan feedback yang interaktif. sehingga backgroundnya tidak membosankan dan bisa dimainkan.

ok langsung saja untuk membuatnya masukan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Particle JS</title>
    <style media="screen">
    #particles-js{
      background: #0e0483;
      height: 100vh;
    }
    body {
      width: 100%;
      font: normal 16px Arial, Helvetica, sans-serif;
      color: #333;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #login {
      background: #fff;
      opacity: 0.9;
      padding: 2em;
      position: absolute;
      top: 200px;
      left: 150px;
    }
    #login h3 {
      color: #555555;
    }
    #login input[type="text"], #login input[type="password"] {
      padding: 7px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
    }
    #login input[type="submit"] {
      padding: 7px;
      background: rgb(5, 200, 118);
      color: #fff;
      border: none;
      opacity: 1;
      display: block;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="particles-js">
      <div id="login">
        <h3>Login</h3>
        <form action="#" method="post">
          <div>
            <label for="username">Username</label><br>
            <input type="text" name="" placeholder="Username">
          </div>
 
          <div>
            <label for="password">Password</label><br>
            <input type="password" name="" placeholder="Password">
          </div>
          <input type="checkbox" name=""> Ingat Saya
 
          <input type="submit" name="" value="Login">
        </form>
      </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      particlesJS.load('particles-js','particles.json', function() {
        console.log('particles.json loaded...');
      })
    </script>
  </body>
</html>

Kemudian buat lagi file dengan nama particles.json dengan isi sebagai berikut :

{
  "particles":{
    "number":{
      "value":300
    },
    "size":{
      "value":3
    }
  },
  "interactivity":{
    "events":{
      "onhover":{
        "enable":true,
        "mode": "repulse"
      }
    },
    "modes":{
      "repulse":{
        "distance":50,
        "duration":0.4
      }
    }
  }
}

Selanjutnya cek hasilnya di browser kesayangan anda, untuk demonya bisa kalian lihat pada tautan dibawah. sekianlah tutorial kali ini selamat mencoba salam koding otak pusing jari keriting. jangan lupa share tutorial ini ke teman anda semoga bermanfaat, Wasalamualaikum Wr. Wb.

Lihat Demo

Selamat Siang kali ini kita akan membagikan script popup image menggunakan CSS dan JQuery, popup image yaitu menampilkan gambar dengan ukuran yang lebih besar ketika di klik. script ini bisa anda pakai untuk membuat gallery gambar.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Popup Image</title>
    <script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
    <style media="screen">
      body { width: 100%; height: 100%; background: grey; margin: 0; }
      main { width: 100%; height: 100%; position: absolute; }
      #my_image {width: 200px; margin: 20px; cursor: zoom-in;}
      #my_image:hover {opacity: 0.7;}
      #appear_image_div {width: 100%; height: 100%; position: absolute; z-index: 10; opacity: 0.7; background: #002447;}
      #appear_image {display: block; margin: auto; position: relative; z-index: 11; top: 20px;}
      #close_image {position: fixed; z-index: 12; top: 20px; right: 20px; cursor: pointer;
      font-family: sans-serif; color: #fff; font-size: 15pt;}
      #close_image:hover{opacity: 0.7;}
    </style>
    <script type="text/javascript">
      jQuery(function($){
        $('#my_image').click(function(){
          var img = $(this).attr("src");
          var appear_image = "<div id='appear_image_div' onclick='closeImage()'></div>";
          appear_image = appear_image.concat("<img id='appear_image' src='"+img+"' />");
          appear_image = appear_image.concat("<div id='close_image' onclick='closeImage()'>x</div>");
          $('body').append(appear_image);
        });
      });
      function closeImage() {
        $('#appear_image_div').remove();
        $('#appear_image').remove();
        $('#close_image').remove();
      }
    </script>
  </head>
  <body>
    <main>
      <img src="perahu.jpg" id="my_image">
    </main>
  </body>
</html>

Itu dia scriptnya selamat mencoba, jika artikel ini bermanfaat silakan share. jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah

Hallo Selamat Sore, kali ini admin mau membuat tutorial cara membuat animasi text dengan efek seperti diisi air, menggunakan HTML dan CSS.

langkah pertama buat dulu htmlnya seperti berikut :

<!DOCTYPE html><html><head>    <title>Text Filling With water</title>    <link rel="stylesheet" href="style.css"></head><body>    <div class="loader">        <h1>water</h1>    </div></body></html>

kemudian buat CSS nya seperti berikut:

body {
margin: 0;
padding: 0;
background: #262626;
font-family: arial;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: 10em;
color: rgba(255,255,255,.1);
background-image: url("water.png");
background-repeat: repeat-x;
background-clip: text;
-webkit-background-clip: text;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
background-position: left 0px top 30px;
}
40% {
background-position: left 600px top -150px;
}
80% {
background-position: left 1200px top -150px;
}
100% {
background-position: left 1500px top 30px;
}
}

untuk background gambarnya silakan download disini, anda juga bisa membuat background airnya sendiri. jika membuat background air sendiri sesuaikan background positionnya pada keyframe animate diatas sesuai ukuran gambar kalian, ok. sekianlah tutorial kali ini selamat mencoba, jika tutorial ini bermanfaat silakan bagikan ke teman anda. terimakasih sudah berkunjung ke blog ini.

Lihat Demo

pada kesempatan kali ini admin akan membahas cara membuat animasi loading, animasi loading dipakai untuk menunggu halaman kita ketika sedang dimuat, untuk membuatya

pertama buat dulu struktur htmlnya, tambahkan kode berikut di bagian body

<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">

kemudian buat cssnya seperti berikut

/* Center the loader */

#loader {

position: absolute;

left: 50%;

top: 50%;

z-index: 1;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top: 16px solid #3498db;

width: 120px;

height: 120px;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

}



@-webkit-keyframes spin {

0% { -webkit-transform: rotate(0deg); }

100% { -webkit-transform: rotate(360deg); }

}



@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}



/* Add animation to "page content" */

.animate-bottom {

position: relative;

-webkit-animation-name: animatebottom;

-webkit-animation-duration: 1s;

animation-name: animatebottom;

animation-duration: 1s

}



@-webkit-keyframes animatebottom {

from { bottom:-100px; opacity:0 }

to { bottom:0px; opacity:1 }

}



@keyframes animatebottom {

from{ bottom:-100px; opacity:0 }

to{ bottom:0; opacity:1 }

}



#myDiv {

display: none;

}

terakhir javascriptnya

<script>

// Loading Page

var myVar;



function myFunction() {

myVar = setTimeout(showPage, 500);

}



function showPage() {

document.getElementById("loader").style.display = "none";

document.getElementById("myDiv").style.display = "block";

}

</script>

silakan jalankan di browser jika loadingnya muncul berarti anda telah berhasil, selamat mencoba.

Selamat Siang teman-teman kali ini Saya mau membahas cara membuat step progress dengan html dan CSS.apa itu step progress? ketika anda mendaftar di facebook misalnya aka nada beberapa part, misalnya part pertama kita mengisi nama, email dll, kemudian part ke dua kita disuruh mengupload foto, dan part ke 3 di suruh menambahkan beberapa teman. nah di atasnya itu ada step progress, ketika kita udah di part ke dua part ke satunya akan hijau karena telah terlewati dan part selanjutnya yang belum diisi akan berwarna abu-abu. untuk membuat itu kita siapkan dulu struktur htmlnya seperti di bawah:

<!DOCTYPE html>
<html>
<head>
    <title>Step Progress Tutorial</title>
</head>
<body>
    <div class="container">
        <ul class="progressbar">
            <li class="active">Step 1</li>
            <li>Step 2</li>
            <li>Step 3</li>
        </ul>
    </div>
</body>
</html>

kemudian untuk CSS nya seperti di bawah :

.container {

width: 100%;

}

.progressbar {

counter-reset: step;

}

.progressbar li {

list-style-type: none;

float: left;

width: 33.33%;

position: relative;

text-align: center;

}

.progressbar li:before {

content: counter(step);

counter-increment: step;

width: 30px;

height: 30px;

line-height: 30px;

border: 2px solid #ddd;

display: block;

text-align: center;

margin: 0 auto 10px auto;

border-radius: 50%;

background-color: white;

}

.progressbar li:after {

content: '';

position: absolute;

width: 100%;

height: 2px;

background-color: #ddd;

top: 15px;

left: -50%;

z-index: -1;

}

.progressbar li:first-child:after {

content: none;

}

.progressbar li.active {

color: green;

}

.progressbar li.active:before {

border-color: green;

}

.progressbar li.active + li:after {

background-color: green;

}

kemudian jalankan di browser, ok sekian dulu tutorial kali ini semoga bermanfaat.

Iya Selamat malam kali ini admin akan berbagi tips membuat navbar collapse ketika kita scroll ke bawah navbarnya ilang, ketika di scroll ke atas navbarnya muncul kaya navbar twitter. langsung aja, pertama buat dulu kerangka htmlnya

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Navbar Scroll Effect</title>
    <link rel="stylesheet" href="css/nav.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Service</a></li>
        </ul>
    </nav>

    <div class="content">

    </div>
    <script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        (function() {
        var documentElem = $(document),
        nav = $('nav'),
        lastScrollTop = 0;

        documentElem.on('scroll', function() {
        var currentScrollTop = $(this).scrollTop();

        // scroll down
        if(currentScrollTop > lastScrollTop) nav.addClass('hidden');
        // scrollTop
        else nav.removeClass('hidden');

        lastScrollTop = currentScrollTop;
        });

        })();
    </script>
</body>
</html>

kemudian kita buat style nya di css

* {

 margin: 0;

 padding: 0;

 }



 nav {

 position: fixed;

 width: 100%;

 top: 0;

 background-color: #555;

 text-align: center;

 padding: 20px 0;

 transition: all 0.5s ease;

 -webkit-transition: all 0.5s ease;

 -o-transition: all 0.5s ease;

 -ms-transition: all 0.5s ease;

 -moz-transition: all 0.5s ease;

 }



 .hidden {

 transform: translate3d(0,-100%,0);

 -webkit-transform: translate3d(0,-100%,0);

 -o-transform: translate3d(0,-100%,0);

 -ms-transform: translate3d(0,-100%,0);

 -moz-transform: translate3d(0,-100%,0);

 }



 nav ul li {

 display: inline-block;

 margin-right: 60px;

 }



 nav ul li:last-child {

 margin-right: 0;

 }



 nav ul li a {

 text-decoration: none;

 text-transform: uppercase;

 color: #fff;

 font-family: Arial, sans-serif;

 }



 .content {

 height: 2000px;

 background-color: rgb(200,200,200);

 }

Silakan lihat hasilnya di browser, jika ada yang error bisa ditanyakan pada kolom komentar di bawah. Ok sekianlah tutorial kali ini semoga bermanfaat, jika berkenan mohon di share ke teman anda

Kali ini kita akan membuat div slider kalu membuat image slider sudah banyak di internet nah kalo membuat div slider kaya gimana, untuk membuat div slider tidak jauh berbeda dengan membuat image slider kalau image slider yang dibuat slide nya adalah gambar, pada div slider yang dibuat slidernya div berisi paragraph dll.

Untuk membuatnya silakan anda exstrak slicknya kemudian buat file baru dan masukan kode dibawah:


<!DOCTYPE html>

<html>

<head>

  <title>Slick Playground</title>

  <meta charset="UTF-8">

  <link rel="stylesheet" type="text/css" href="./slick/slick.css">

  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

  <style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }



    * {

      box-sizing: border-box;

    }

    section {

      background: transparent;

    }



    .slider {

        width: 50%;

        margin: auto;

    }



    .slick-slide {

      margin: 0px 20px;

    }



    .slick-slide img {

      width: 100%;

    }



    .slick-prev:before,

    .slick-next:before {

        color: black;

    }

    .sm-box {

   width: 184px;

   height: 200px;

   background-color: rgba(0,255,0,0.5);

   padding: 20px;

   float: left;

   display: inline-block;

   margin: auto 5px;

   font-size: 20px;

    }

  </style>

</head>

<body>



  <section class="autoplay slider">

    <div>

      <div class="sm-box">Coba Slide 1</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 2</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 3</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 4</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 5</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 6</div>

    </div>

  </section>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(document).on('ready', function() {

      $('.autoplay').slick({

      slidesToShow: 3,

      slidesToScroll: 1,

      dots: true,

      autoplay: true,

      autoplaySpeed: 2000,

    });

    });

  </script>





</body>

</html>

sekianlah cara membuat div slider dengan menggunakan plugin slick. semoga bermanfaat

Terlepas dari kesibukan saya di dunia kerja kali ini saya akan membagikan beberapa ebook untuk belajar pemrograman web. Menjadi devloper website sangat mengasikan dan untuk memulainya anda bisa mempelajari dari ebook-ebook dibawah ini

1. ebook HTML
HTML kepanjangan dari Hyper Text Markup Language HTML merupakan bahasa pemrograman web yang paling dasar yang harus dikuasai jika anda ingin menjadi pemrogramer web
Download ebook Mastering kode HTML disini

2. ebook CSS
CSS adalah kepanjangan dari Cascading Style Sheet. dengan CSS anda bisa membuat style gaya apapun di website
Download ebook CSS Tutorial disini

3. ebook Javascript
Javascript merupakan bahasa pemrograman yang paling banyak diminati. website tanpa javascript rasanya hambar
Unduh Ebook Latihan Javascript disini

4. ebook PHP
PHP (Hyper Text Preprocessor) Adalah bahasa pemrograman web yang bekerja disisi server (back end) yang paling banyak digunakan di seluruh dunia
Download ebook PHP dasar Tutorial disini

5. ebook jquery
jquery adlah library javascript yang siap pakai. dengan jquery menulis kode javascript menjadi lebih pendek sesuai dengan semboyan nya write less do more
download ebook jquery id disini

6. ebook Code Ingniter
CodeIgniter merupakan framework PHP. dengan code igniter penulisan kode PHP akan lebih seragam karena berkonsep MVC (model view controller)
Download Modul Pelatihan CI disini

7. ebook AJAX
berikut ini ada beberapa ebook tentang AJAX
Download ebook tutorial ajax disini

jika anda ingin menambahkan efek animasi di website anda bisa menggunakan framework animate css.
animate css ini sangat banyak efek yang bisa anda pilih. file nya pun relativ kecil hanya sekitar 20kb saja. untuk melihat daftar animasi
yang bisa digunakan di animate css anda bisa membuka link animatecss.io. dan animate css ini pure css semua animasinya dibuat hanya
menggunakan css saja tapi animasinya keren- keren dan sangat banyak

cara pemakainaya juga sangat simple tinggal tambahkan class "animated nama-efek" pada tag html yang mau anda animasikan. anda bisa
memasanganya pada div, pada heading, pada paragraf dsb. contoh <div class="animated animated-slide-top"></div>

Selamat Malam Bertemu lagi dengan Saya Juanas di tutorial Cara Membuat Form Pencarian yang bisa disembunyikan seperti di gmail, ketika icon cari di klik maka form pencarian akan muncul. Saya Menggunakan efek toggle di button nya kemudian ditambahkan style position nya absolute dan z-index nya100 agar form pencarian menumpuk diatas navbar dan berada di layer paling atas, oke langsung saja buat ini dia scriptnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web</title>
</head>
<body>
<div class="topnav">
<li><a class="ubahclass" id="home">Home</a></li>
<li><a class="ubahclass" id="blog">Blog</a></li>
<li><a class="ubahclass" id="kontak">Kontak</a></li>
<li><a class="ubahclass" id="profil">Profil</a></li>
<div id="flip" class="btn-link"><i class="fa fa-search"></i></div>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</li>
</div>
<div id="panel">
<button id="close"><i class="fa fa-arrow-left"></i></button>
<input type="text" style="width:70%;" placeholder="Cari teman, pesan atau halaman disini">
<button class="btns"><i class="fa fa-search"></i></button>
</div>
</nav>
</div>
</body>
</html>

Lalu ini javascriptnya :

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
$("#close").click(function(){
$("#panel").slideToggle("fast");
});
});

dan untuk css nya saya gunakan seperti ini:

#panel, #flip {
text-align: center;
background-color: transparent;
border: none;
width: 10px;
float: right;
position: absolute;
display: inline-box;
visibility: visible;
}
#flip {
cursor: pointer;
}
#flip:hover{
color: #00ccff;
}
#panel {
padding: 10px;
width: 100%;
top: 0;
display: none;
float: right;
background: #fff;
z-index: 4;
}

dan ini adalah tampilan form pencarian nya

Sekian tutorial cara membuat form pencarian yang tersembunyi semoga bermanfaat, terimakasih

Selamat Sore, Pada postingan sebelumnya saya udah membahas tentang cara membuat template one page yang responsive. Kebanyakan template yang sekarang jika halaman di scroll ke bawah maka navbar akan melayang diatas halaman dan jika discroll lagi ke bawah maka navbar akan kembali ke posisi semula seperti pada gambar diatas, nah untuk membuatnya kita membutuhkan jquery yang akan menangani efek on scroll tersebut. pertama buat dulu htmlnya seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Sticky Navigation</title>
<link href="sticky.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="sticky.js"></script>
</head>
<body>

<div class="container">

<h1>Sample Header</h1>


<nav>
<ul class="clearfix">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>

<div class="content">
<br>
<h2>Content Header</h2>
<br>
<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>
<br>
<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>
<br>
<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>
<br>
<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>
</body>
</html>

Lalu CSS nya seperti berikut:

* {

margin: 0;

padding: 0;

}

.container {

max-width: 80%;

margin: 0 auto;

padding: 0 20px;

position: relative;

}

h1 {

background-color: #305782;

color: #fff;

padding: 60px 25px;

margin: 0;

}

nav {

z-index: 100;

background-color: #e7ecf2;

}

.nav-placeholder {

margin: 0 0 40px 0;

background: #e7ecf2;

}

.fixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

background-color: transparent;

}

.fixed .nav-inner {

padding: 0 10%;

}

.fixed .nav-inner-most {

max-width: 80%;

margin: 0 auto;

background-color: #e7ecf2;

}

nav ul {

margin: 0;

padding: 0;

}

.clearfix {

width: 100%;

background-color: #e7ecf2;

}

nav ul li {

list-style: none;

text-align: center;

display: inline-block;

}

nav ul li a:link,

nav ul li a:visited {

display: inline-block;

text-decoration: none;

padding: 10px 25px;

background-color: #e7ecf2;

border-right: 2px solid #d5dce4;

color: #33557c;

font-size: 90%;

font-weight: bold;

}

.content {

margin: 100px auto;

}

dan untuk javascriptnya seperti berikut :

jQuery(document).ready(function() {

var navOffset = jQuery("nav").offset().top;

jQuery("nav").wrap('<div class="nav-placeholder"></div>');

jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

jQuery("nav").wrapInner('<div class="nav-inner"></div>');

jQuery("nav-inner").wrapInner('<div class="nav-inner-most"></div>');

jQuery(window).scroll(function() {

var scrollPos = jQuery(window).scrollTop();

jQuery(".status").html(scrollPos);

if (scrollPos >= navOffset) {

jQuery("nav").addClass("fixed");

}else{

jQuery("nav").removeClass("fixed");

}

});

Ok Selamat mencoba. semoga bermanfaat.

Untuk membuat sticky navigation seperti ini bisa juga anda menggunakan plugin smint bisa anda download di http://www.outyear.co.uk/smint/

Assalamualaikum wr. wb. Ketemu lagi dengan saya. Kali ini saya akan membahas cara membuat template one page yang responsive. Membuat template bisa anda jadikan untuk menambah penghasilan yang lumayan karena harga per template rata-rata sekitar $25 anda bisa memasarkanya di themeforest.net. Nah kali ini saya akan share cara membuat template yang sederhana nantinya bisa anda kembangkan lagi. pertama kita buat dulu struktur folder sperti ini

folder_project:
-css
-fonts
-js
-img

lalu di folder_project buat file index.html isinya seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Gym - Personal Training</title>
<meta name="viewport" content="width/device-width, initial-scale=1.0">
<link href="css/blueberry.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url("img/the-gym.png") no-repeat center;
}
nav {
float: right;
padding: 30px 20px 20px 0;
}
#menu-icon {
display: none;
width: 40px;
hight: 40px;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin: 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width: 960px;
margin-top: 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
display: inline;
}
aside {
float: right;
margin: 0 auto;
width: 34%;
height: auto;
padding: 4%;
display: inline;
}
ul.gym li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.70;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.socila li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #111;
max-height: 50px;
text-align: center;
opacity: 0.50;
color: #fff;
}
/********************MEDIA!!!!*********************/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 748px) {
header {
position: absolute;
}
#menu-icon {
display: block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
article {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
aside {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}

</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"><img src="img/icon.png"></a>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Trainer</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Facility</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="img/inside-gym.png">
<li><img src="img/push-ups.png">
<li><img src="img/chest-fly.png">
<li><img src="img/training.png">
</ul>
</div>
</div>
</div>
<section>
<img src="img/trainers.png">
<h1>Best Trainers Around!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/location.png">
<h1>Local And Convenient</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<section>
<img src="img/check.png">
<h1>Check Us Out -Free!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitsed eiusmod tempor enim minim veniam quis notru exercit ation Lorem ipsum dolor sit amet.Veniam quis notru exercit.</p>
</section>
<div class="clear"></div>
<article>
<img src="img/gym-classes.jpg">
</article>
<aside>
<h2>Our Group Class Schedule:</h2>
<ul class="gym">
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
<li><h3>Our Group Class Schedule</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>Ladies Section</h1>
<img src="img/ladies-gym.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>The Gym Floor</h1>
<img src="img/gym-floor.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<section>
<h1>Free Heights</h1>
<img src="img/free-weights.jpg">
<p>Cras sodales mauris nec odio tristique dictum. Nam semper consectetur, feugiat mi sodales vel. Phasellus iaculis libero eu sem accumsan sagit vivamus.</p>
</section>
<footer>
<section>
<h3><b>The Gym</b></h3>
<p><b>215-555-5555</b><br><br>
1700 Cestrus Street<br>
Philipina, Pa 19102<br>
trainer@thegym.com</p>
</section>
<section>
<h3>Connect With Us!</h3>
<ul class="social">
<li><a href="#"><img src="img/facebook1.png"></a></li>
<li><a href="#"><img src="img/googleplus.png"></a></li>
<li><a href="#"><img src="img/twitter1.png"></a></li>
<li><a href="#"><img src="img/youtube1.png"></a></li>
</ul>
</section>
<section>
<img src="img/weight-lifter.png">
</section>
</footer>
<footer class="second">
© Copyrights 2016 - The Gym
</footer>
</body>
</html>

kemudian untuk folder css diisi css dari blueberry.css

untuk folder js diisi jquery.js dan jquery.blueberry.js

untuk folder img bahan gambarnya bisa didownload disini

dan untuk folder fonts bisa diisi dengan font-awesome

nah untuk file blueberry.css dan jquery.blueberry.js filenya dari mana? itu dari plugin blueberry slider untuk blueberry slider bisa didownload di http://marktyrrell.com/labs/blueberry/

Oke Semoga bermanfaat

Langganan: Postingan ( Atom )

Membuat Background Particle dots yang atraktif dengan particles.js

Membuat Popup Image

Membuat Animasi Text diisi Air di CSS

Menambahkan animasi Loading ketika halaman sedang di muat

Cara Membuat Step Progress bar dengan HTML dan CSS

Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul

cara membuat div slider dengan plugin slick

Ebook untuk belajar web programming lengkap

membuat animasi pure css

Cara Membuat Form Pencarian Tersembunyi Pada Navbar seperti di gmail

Cara Membuat Sticky Navigation (Fixed Position saat di scroll)

Cara Membuat Template Web One Page Responsive

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive