Postingan lainnya
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
