Diskon 80% terbatas! Masukkan kupon "merdeka" di kelas apa saja

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;
}

avatar fadhil sanad
@fadhil sanad

270 Kontribusi 16 Poin

Diperbarui 8 tahun yang lalu

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

avatar suryadarma
@suryadarma

1 Kontribusi 2 Poin

Dipost 8 tahun yang lalu

trimakasih gan,sanga membantu..

avatar fadhil sanad
@fadhil sanad

270 Kontribusi 16 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban