Pada postingan saya kali ini saya ingin membagikan sekumpulan script HTML, CSS, dan JavaScript untuk membuat sebuah parallax sederhana. Untuk yang belum tahu apa itu parallax, parallax adalah sebuah efek seperti tiga dimensi, lebih tepatnya seperti jika kita berjalan jalan di kota, maka saat kita berjalan, gedung yang berada jauh di samping kita akan terlihat berjalan lambat menjauhi kita, efek parallax pada website pun mirip-mirip seperti itu..
Untuk hasil yang kita dapatkan nanti adalah sebagai berikut...
dan untuk scriptnya adalah sebagai berikut...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax</title>
<style type="text/css">
body{
width: 100%;
height: 2000px;
font-family: arial;
font-size: 24px;
margin: auto;
text-align: center;
background: darkgrey;
}
h1{
font-size: 3em;
line-height: 400px;
margin: 0;
z-index: -222;
background-image: url(langit.jpg);
width: 100%;
height: 400px;
}
.kotak{
width: 100%;
height: 400px;
background-color: salmon;
margin: auto;
z-index: -111;
}
.kotak img{
height: 400px;
overflow: hidden;
width: 100%;
}
.paragraf{
text-shadow: 10;
width: 100%;
height: 1000px;
background: lightgreen;
z-index: 3;
position: relative;
top: -5%;
}
.paragraf p{
position: relative;
top: 100px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div class="kotak">
</div>
<div class="paragraf">
<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>
<script src="jQuery.js"></script>
<script src="script.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax</title>
<style type="text/css">
body{
width: 100%;
height: 2000px;
font-family: arial;
font-size: 24px;
margin: auto;
text-align: center;
background: darkgrey;
}
h1{
font-size: 3em;
line-height: 400px;
margin: 0;
z-index: -222;
background-image: url(langit.jpg);
width: 100%;
height: 400px;
}
.kotak{
width: 100%;
height: 400px;
background-color: salmon;
margin: auto;
z-index: -111;
}
.kotak img{
height: 400px;
overflow: hidden;
width: 100%;
}
.paragraf{
text-shadow: 10;
width: 100%;
height: 1000px;
background: lightgreen;
z-index: 3;
position: relative;
top: -5%;
}
.paragraf p{
position: relative;
top: 100px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div class="kotak">
</div>
<div class="paragraf">
<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>
<script src="jQuery.js"></script>
<script src="script.js"></script>
</body>
</html>
pada script di atas kita menggunakan framework jQuery, untuk frameworknya saya tidak menyediakannya, anda bisa mendownloadnya langsung di website resminya.
Untuk script JavaScript nya adalah sebagai berikut...
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
$('h1').css({
'transform' : 'translate(0px, '+wScroll/5+'%)'
});
$('.kotak').css({
'transform' : 'translate(0px, '+wScroll/10+'%)'
})
});
var wScroll = $(this).scrollTop();
$('h1').css({
'transform' : 'translate(0px, '+wScroll/5+'%)'
});
$('.kotak').css({
'transform' : 'translate(0px, '+wScroll/10+'%)'
})
});
Sekian postingan kali ini, semoga bermanfaat:-)
0 Komentar