Membuat Efek Bounce In Left

           , ,      No comments   
Code ini bisa kita pakai untuk PopUp (seperti pada www.webjalanan.com), List social media atau pada gambar dalam Artikel, Efek yang dihasilkan adalah memantul ke kiri sebelum berhenti pada posisi sebenarnya, cara pembuatan cukup mudah, kita bisa memakai javascript atau menerapkannya langsung menggunakan code CSS.

Membuat Efek Bounce In Left

Dalam contoh artikel ini ane memakai jquery untuk membantu menambahkan class efek, hasilnya bisa agan lihat pada demo blog berikut :

 Demo Efek Bounce in Left


Berikut ini Code yang kita butuhkan untuk membuat Efek Tersebut :

1. Code CSS


ul[efek="bounceInLeft"] li {
    opacity: 0;
    position: relative;
    animation: bounceInLeft 600ms ease both;
    animation-play-state: paused;
}

ul[efek="bounceInLeft"].play li {
    animation-play-state: running;
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}
img {float:left;margin:5px}
ul li {list-style:none;}


2. Code HTML + JQUERY


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div style="margin:0 auto;width:700px">
<ul efek="bounceInLeft">
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm2TBb22ispog0a0RoFBWNjlvGSa2mtFFsaGwoX9YWlaO03uqTSCj4cGVsdHSCztUrrO7Uw6uH4x2YWvRGxB19A5RbOZvJadMaOjplVwAsZLCHekobaGHjZTg91tV442OKmc6uC0Z1HMZ/s130-c/1.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZYKPWUZrJUfXUWWigQTckBrs9L3CCgFLYEK-EHLI_brUT53hLxT_iQp2cVFeSLqHc2QPmVuluRhDzYBhAIzUjQ2N2x4gVSHzKm5NjMGj8mhQ-fPuTeamStyTkBKqfWG6u-5mAKMnsep5/s130-c/2.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFnb1LgNiinc0JFwKt7c6uibpE-26Fldyg0GcAuN5-e7sf9eiOk2l8MZnYiR7OKgu6AVuSbpmuC0M40lGuW104e6tnmR2b2_PewUAReDTXK4uE3mTpalYY6TMwXGrEOGVu4tNK9jChfhe/s130-c/3.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmknvjvsEn1BSnpE8a2KIb2GrT-MaMntB7AbSW1qoN1LC-NxXsr6YXtEEKepAzijBo6Ph-FWGBXsrHHydi0SLC1UAihfj7ADr3JJEuSIVXf_LptdshOvOdb1_g6DstDR9dx4wmfQz3oNR/s130-c/4.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB13z3DZjweOj-KGYrSDY72V_ZB_TahJHjg4BHbLinDlauhRJm-4uVG5CoGMAdTIFE0EWE1a6d-q8KCBT9pi5D9g_Jj_cyuQ0_r2uviWc3efl39yhXwHCKwKsC2Jojt_ELkvLJHUqIYq8A/s130-c/5.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ir0Gl-NpFfJ1lFLiTk-yvxQzTwXzZPzgDkKRjoVtsZhF5mtEBUU_8l8JEN9aSODjeek3eCWDiCnmOR90hDXrRcYIZ3U_2DCKcLHG0tJiEeuffsFYsNwvTuT_DRYW992GLDvVKaoI4NNm/s130-c/6.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYGbQOS3maS-vDAptiKtBSztJf0T0gGMYg7HmLf_5T8odhFHH1z_S1cIOc1ZFq-OTAiYLyCRmb7GjShQmGnFuKVZR_EOlw-rl-mwlz7RaExpqnLPpDvQpas0-d0k5hm7sXgBpTjbxafLP/s130-c/7.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyDFGAUI-y2CLqqC09LDFAfeazzGsi8cW99NYlbsjq0XtNkghhyphenhypheniBzeeyAsHRvcqDg4VxLpUBnkBQCoSiXiIut7w8jfMAWymDQWHSW7gihOmuyUnSAnfK9vQw-B9atMIPg2gwHcQYr6A2/s130-c/8.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hCg8bi6W_yD_7eBzaDMXeyTGqH7NQdvQiVYfPVcPkW-amBxss0nSzYCvivzw957USvyc1BNtHzNuDC-PK5Bfxj0KcUy-bkGr9IhTAxfavhKy2rqypL0Bi0FJXgUE3NtgvTf7A5PVKCKC/s130-c/9.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIac_kIbjdiXzu657mHB35Fi7luYvnAL7shzwaTLfNhJ2BTUwcUQB_KoIgzI8KzWyu_-4dpRFPrdSSTiczCzYK2gkXlzRHXlTHaISBq7JI_gdde-KoGLw5uRwhyphenhyphenuQd5gDdTt8vZthCaG8/s130-c/10.jpeg" alt="Lion"></li>
</ul>
<div align="center">
<button onclick="efek();">Demo Efek</button>
</div>
</div>

3. Code Javascript (Jquery)


function efek() {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
};

Bila agan ingin membuatnya auto run tanpa mengeklik tombol, silahkan rubah code javascript diatas dengan code berikut :

$(document).ready(function () {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
});

Karena auto run jadi kita tidak membutuhkan button, langsung saja buang code <button> tersebut dari html agan, code yang ini gan :

<button onclick="efek();">Demo Efek</button>


Bila semua code digabungkan maka akan terlihat seperti ini (auto start)

<style type="text/css">
ul[efek="bounceInLeft"] li {
    opacity: 0;
    position: relative;
    animation: bounceInLeft 600ms ease both;
    animation-play-state: paused;
}

ul[efek="bounceInLeft"].play li {
    animation-play-state: running;
}

@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}
img {float:left;margin:5px}
ul li {list-style:none;}
</style>

<div style="margin:0 auto;width:700px">
<ul efek="bounceInLeft">
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm2TBb22ispog0a0RoFBWNjlvGSa2mtFFsaGwoX9YWlaO03uqTSCj4cGVsdHSCztUrrO7Uw6uH4x2YWvRGxB19A5RbOZvJadMaOjplVwAsZLCHekobaGHjZTg91tV442OKmc6uC0Z1HMZ/s130-c/1.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZYKPWUZrJUfXUWWigQTckBrs9L3CCgFLYEK-EHLI_brUT53hLxT_iQp2cVFeSLqHc2QPmVuluRhDzYBhAIzUjQ2N2x4gVSHzKm5NjMGj8mhQ-fPuTeamStyTkBKqfWG6u-5mAKMnsep5/s130-c/2.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFnb1LgNiinc0JFwKt7c6uibpE-26Fldyg0GcAuN5-e7sf9eiOk2l8MZnYiR7OKgu6AVuSbpmuC0M40lGuW104e6tnmR2b2_PewUAReDTXK4uE3mTpalYY6TMwXGrEOGVu4tNK9jChfhe/s130-c/3.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmknvjvsEn1BSnpE8a2KIb2GrT-MaMntB7AbSW1qoN1LC-NxXsr6YXtEEKepAzijBo6Ph-FWGBXsrHHydi0SLC1UAihfj7ADr3JJEuSIVXf_LptdshOvOdb1_g6DstDR9dx4wmfQz3oNR/s130-c/4.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB13z3DZjweOj-KGYrSDY72V_ZB_TahJHjg4BHbLinDlauhRJm-4uVG5CoGMAdTIFE0EWE1a6d-q8KCBT9pi5D9g_Jj_cyuQ0_r2uviWc3efl39yhXwHCKwKsC2Jojt_ELkvLJHUqIYq8A/s130-c/5.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ir0Gl-NpFfJ1lFLiTk-yvxQzTwXzZPzgDkKRjoVtsZhF5mtEBUU_8l8JEN9aSODjeek3eCWDiCnmOR90hDXrRcYIZ3U_2DCKcLHG0tJiEeuffsFYsNwvTuT_DRYW992GLDvVKaoI4NNm/s130-c/6.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYGbQOS3maS-vDAptiKtBSztJf0T0gGMYg7HmLf_5T8odhFHH1z_S1cIOc1ZFq-OTAiYLyCRmb7GjShQmGnFuKVZR_EOlw-rl-mwlz7RaExpqnLPpDvQpas0-d0k5hm7sXgBpTjbxafLP/s130-c/7.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyDFGAUI-y2CLqqC09LDFAfeazzGsi8cW99NYlbsjq0XtNkghhyphenhypheniBzeeyAsHRvcqDg4VxLpUBnkBQCoSiXiIut7w8jfMAWymDQWHSW7gihOmuyUnSAnfK9vQw-B9atMIPg2gwHcQYr6A2/s130-c/8.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hCg8bi6W_yD_7eBzaDMXeyTGqH7NQdvQiVYfPVcPkW-amBxss0nSzYCvivzw957USvyc1BNtHzNuDC-PK5Bfxj0KcUy-bkGr9IhTAxfavhKy2rqypL0Bi0FJXgUE3NtgvTf7A5PVKCKC/s130-c/9.jpeg" alt="Lion"></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKIac_kIbjdiXzu657mHB35Fi7luYvnAL7shzwaTLfNhJ2BTUwcUQB_KoIgzI8KzWyu_-4dpRFPrdSSTiczCzYK2gkXlzRHXlTHaISBq7JI_gdde-KoGLw5uRwhyphenhyphenuQd5gDdTt8vZthCaG8/s130-c/10.jpeg" alt="Lion"></li>
</ul>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("ul[efek] li").each(function (i) {
        $(this).attr("style", "animation-delay:" + i * 1000 + "ms");
        if (i == $("ul[efek] li").size() -1) {
            $("ul[efek]").addClass("play")
        }
    });
});
</script>

Related Posts:

0 komentar:

Post a Comment