Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
mau buat efek roket tembus ke awan
permisi gan mau tanya agar awannya setelah di scroll sampai backroundnya habis dia ikut hilang gmna yaa..?
ini scriptnya:
<meta charset="UTF-8">
<title>Sahara.com</title>
<link href="https://fonts.googleapis.com/css?family=Bahiana|Reem+Kufi" rel="stylesheet">
<link rel="stylesheet" href="sahara.css">
</head>
<body>
<!--HEADER-->
<div id="header">
<div class="wrapper">
<img src="gambar/sahara.jpg">
<ul>
<li>kontak</li>
<li>info</li>
<li>profil</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="poster">
<div class="awan">
<img src="gambar/awan.png">
<img src="gambar/awan.png">
<img src="gambar/awan.png">
<img src="gambar/awan.png">
</div>
<img src="gambar/rokpet.png">
</div>
<div id="posters" width="100%" height="800px;">
</div>
</body>
</head>
*{
padding:0;
margin:0;
}
#header{
width:100%;
height:80px;
background:#76f790;
}
.wrapper{
width:90%;
margin:0 auto;
background:#76f790;
height:80px;
}
.wrapper img{
width:100px;
height:80px;
float:left;
}
.wrapper li{
float:right;
display:inline-block;
font-size:30px;
font-family: 'Reem Kufi', sans-serif;
color:black;
margin-left:20px;
line-height:80px;
}
#poster{
background:url('gambar/kota.png');
background-size:cover;
background-repeat:no-repeat;
height:550px;
width:100%;
background-attachment:fixed;
}
.awan img{
width:200px;
height:80px;
display:inline-block;
position:fixed;
}
.awan img:nth-child(2){
margin-top:70px;
z-index:4;
}
.awan img:first-child{
margin-top:70px;
z-index:2;
}
#poster>img{
width:150px;
height:350px;
z-index:5;
margin-top:200px;
}
#posters{
width:100%;
height:800px;
}
0
2 Jawaban:
Jawaban Terpilih
bisa pakai jQuerygan check kondisi user, sudah scroll sampe bawah atau belum. Kalau sudah tinggal tambahin kelas ke "<div>" awan buat positioningnya
$(window).scroll(function() {
//check kondisi croll
if($(window).scrollTop() + $(window).height() == $(document).height()) {
//kalau sudah di bottom
$('.awan').toggleClass('awannaik');
}
});
tinggal main position sama animasi aja buat css awannaik saja semoga membantu
0