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

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?

avatar Gar0ng
@Gar0ng

7 Kontribusi 2 Poin

Diperbarui 8 tahun yang lalu

4 Jawaban:

Mungkin pake Javascript :/ (Mungkin)

avatar pemudakoding
@pemudakoding

342 Kontribusi 120 Poin

Dipost 8 tahun yang lalu

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:

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 8 tahun yang lalu

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

avatar coding4fun
@coding4fun

27 Kontribusi 23 Poin

Dipost 8 tahun yang lalu

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

avatar Gar0ng
@Gar0ng

7 Kontribusi 2 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban