Membuat Animasi Memantul dengan JQuery

Sebenarnya ada cara lain untuk membuat animasi memantul ini yaitu dengan menggunakan CSS Key Frames, namun penggunaan CSS Key Frames tidak valid CSS3 jadi saya buat alternatif lain yaitu menggunakan JQuery

CSS

CSS ini berfunsi untuk memperhalus animasi yaitu dengan menambahkan efek transisi

#max {
    transition:all 0.25s ease 0s
}

HTML

<img id="max" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-h8oBvjuA_V4LNX4fyiv5s5nRilaDuFk6C5C2ByApWYZmIA4popvL_rwxbnjWGR0pB3Om0QhzrDHNH-ZI2tzeEeA9HHq2IHHO3TDSAZ8POlPQiA50AgUMHDsxeh8pha1LazW0bC7AuhA/w353-h354-no/logoku.png" />

JQuery

function R(n) {
    n = $("#max");
    window.setInterval(function () {
        n.css("margin-top", n.css("margin-top") == "10px" ? "-10px" : "10px")
    }, 300)
}
R();

Lihat Demo

Share this post