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
3. Sisipkan <meta name="viewport"... pada bagian <head></head> digunakan agar website responsif
</html>
4. Sisipkan juga script-script JQuery nya yang telah kita siapkan pada folder
<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">
</html>
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">
<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>
<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>
<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..
