Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
bikin background image lebih dari satu seperti slide animasi?
bingung gan, mau bikin background img lebih dari satu di css (seperti animasi) kayak gmn ya?
4 Jawaban:
Mungkin pake Javascript :/ (Mungkin)
pakai layer aja. position dan z-index. prinsipnya ky layer di photoshop misal bikin 3 div kasih position: absolute trus left dan top ketiga-tiga-nya di set bertumpuk, alias di tempat yg sama untuk mengatur div yg mana yg paling depan. ya pakai z-index:
Dengan pure CSS juga bisa. Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* Standard */
@keyframes namaAnimasi {
0% { background-image: url(gambar1.jpg); }
50% { background-image: url(gambar2.jpg); }
100% { background-image: url(gambar1.jpg); }
}
/* Untuk Chrome */
@-webkit-keyframes namaAnimasi {
0% { background-image: url(gambar1.jpg); }
50% { background-image: url(gambar2.jpg); }
100% { background-image: url(gambar1.jpg); }
}
body {
background-image: url(gambar1.jpg);
background-repeat: no-repeat;
/* Standard */
animation-name: namaAnimasi;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Untuk Chrome */
-webkit-animation-name: namaAnimasi;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
</style>
</head>
<body>
<h1 style="color:black">Background berubah</h1>
<h3 style="color:orange">Baru berhasil untuk Chrome. Di Firefox tidak jalan.</h3>
<p style="color:red">Hati-hati. Fungsi ini bisa memperlambat proses load document HTML, tergantung ukuran file gambar</p>
</body>
</html>
Teorinya di: https://sekolahkoding.com/perpustakaan/tutorial-css-mengenal-animasi-pada-css-3-bag-1
makasih untuk responnya.. @QaiserLab bisa kasih contoh z-index rada bingung soalnya masih awal @coding4fun itu sudah ane coba tetapi pemindahan dri gmbr1 ke 2 tidak beraturan zoomny
<title></title>
</head>
<body>
<div class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.wallpaper77.com/upload/DesktopWallpapers/cache/Cloudy-Scenery-landscape-1024x768.jpg" alt="img1" />
</div>
<div class="item">
<img src="http://www.deshow.net/d/file/travel/2009-09/beautiful-autumn-scenery-723-24.jpg" alt="img2" />
</div>
</div>
</div>
</body>
</html>
html {
position: relative;
min-height: 100%;
}
.item {
transition: display 1500ms linear 0s;
overflow:hidden;
}
kok malah tampil background1 dan bawahnya background2