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%!
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