Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara menambahkan transition
saya udah liat kelas membuat galeri foto dengan javascript dan sudah bisa ganti otomatis, cara untuk mempercantik pergantian gambar nya bagaimana untuk css nya? saya sudah coba transition: transform .2s ease-in-out; tapi tidak ada yang berubah
7 Jawaban:
Itu transformnya berupa apa? Rotate, skew, scale atau apa? Sudah di setting blm gan? Misalnya
transform: rotate(45deg);
settingnya tergantung penggunaannya mau dimana dan pada kondisi apa. kalo liat penggunaan agan untuk galeri foto saya rasa malah ga perlu transform. transformnya dihilangkan aja mestinya sudah jalan itu transitionnya.
ini kode nya bang html
<div class="parallax-container">
<div class="parallax">
<img src="/img/parallax/0.jpg" alt="" id="gambarnya">
</div>
<div class="parallax-content">
asda
</div>
<div class="parallax-footer">
<a href="#" onClick="ganti(0)">•</a>
<a href="#" onClick="ganti(1)">•</a>
<a href="#" onClick="ganti(2)">•</a>
</div>
</div>
javascript
<script>
var l = 0;
slideshow();
function slideshow(){
var lokasi = "/img/parallax/" + l + ".jpg"
document.getElementById("gambarnya").src = lokasi;
setTimeout(slideshow, 3000);
l++;
if(l > 2){
l = 0;
}
}
function ganti(angka){
var lokasi = "/img/parallax/" + angka + ".jpg"
document.getElementById("gambarnya").src = lokasi;
l = angka;
return false;
}
</script>
css
.parallax-container{
position: relative;
height: 600px;
overflow: hidden;
}
.parallax{
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.parallax img{
width: 100%;
height: 100%;
-webkit-transition: transform 3000s ease;
}
.parallax-content{
text-align: center;
position: relative;
top: 70px;
width: 70%;
margin: 0 auto;
}
.parallax-footer{
position: absolute;
width: 3%;
top: 90%;
left: 50%;
right: 50%;
}
.parallax-footer a{
color: rgb(121,255,76);
text-decoration: none;
}
apa yang salah yah kira kira??
Jawaban Terpilih
sebenernya transition itu digunakan untuk event based animation, misalnya hover atau click untuk merubah image. kalau images slider otomatis tanpa adanya interaksi gitu mending pakai css animation. coba ganti kode ini
.parallax img{
width: 100%;
height: 100%;
-webkit-transition: transform 3000s ease;
}
dengan
.parallax img{
width: 100%;
height: 100%;
-webkit-animation: fade 3s infinite;
-moz-animation: fade 3s infinite;
-o-animation: fade 3s infinite;
animation: fade 3s infinite;
}
@keyframes fade {
0% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
itu animation saya buat 3s menyesuaikan javascript setTImeout, kalau timeoutnya berubah ya animationnya harus menyesuaikan.
NOTE: kekurangan kombinasi css animation + javascript timeout adalah tidak sinkronnya interval bila user beralih ke tab lain pada browser.
thanks bang bisa... nah kan ada note tuh masalah interval, kalau gitu solusi terbaik nya gimana?
jangan pakai setTimeout untuk repetisi, pakai setInterval. setTimeout hanya cocok untuk fungsi sekali jalan, biasanya fungsi yang butuh delay. alasannya karena pengulangan setTimeout tidak berdasar pada timer sebenarnya, hanya berdasar kapan script mengeksekusi setTimeout itu sendiri. semakin panjang script yg bejalan sebelum settimeout maka delay yg terjadi akan semakin besar. beda dengan setInterval yang memang didesain untuk repetisi fungsi. setInterval mempunyai acuan start timer pada saat pertama kali fungsi dijalankan, bahkan bila pada kondisi browser tab tidak aktif sekalipun setInterval akan mengejar ketertinggalan repetisi disaat tab kembali aktif.
mungkin fiddle ini bisa kasih gambaran seberapa besar perbedaan repetisi menggunakan setTimeout dan setInterval https://jsfiddle.net/GustvandeWal/295jqqqb/