[Hướng dẫn] tạo hiệu ứng con chuột lúc lắc cho banner

tạo hiệu ứng con chuột lúc lắc hay ho cho banner

Bạn có thấy con chuột như trên phần banner không nào ? mục đích chính của nó là để người dùng biết website còn có nhiều phần hãy click vào đó để được được dẫn xuống mục tiếp theo hoặc có ý nghĩa là hãy lăn chuột để xem các thành phần bên dưới website.

Oh,, và giờ mình sẽ hướng dẫn các bạn làm điều này nhé, cũng khá dễ thôi nhưng lại áp dụng được cho tất cả mọi thể loại website luôn nè.

Tạo hiệu ứng con trỏ chuột lên xuống - thienduc.net
Tạo hiệu ứng con trỏ chuột lên xuống – thienduc.net

Chuẩn bị phụ kiện

– Gồm tấm svg hình con trỏ chuột Ấn vào đây để tải về.

– Mình nhác nên cài hiệu ứng của animate.css, các bạn add thêm file css này nhé.

 

Phần HTML


<pre>
<div class="banner1">
<img src="xxx.jpg" class="banner"/>
<div class="slider-icon">
<span class="pr_goto to_go_to" data-id="list_tx_1"><span></span></span>
</div>
</div>
</pre>

 

Phần CSS


.banner{
 position: relative;
}

.slider-icon {
    bottom: 50px;
    height: 40px;
    left: 50%;
    margin-left: -14px;
    position: absolute;
    width: 28px;
    z-index: 1;
}
.pr_goto {
    background-image: url(/wp-content/plugins/elementor-td/widgets/crak.svg); // nhỚ thay link lại nhé
    background-size: 100% 100%;
    border-radius: 15px;
    display: inline-block;
    height: 48px;
    position: relative;
    width: 28px;
    cursor: pointer;
}
.pr_goto span {
    animation: 1s ease 0s normal none infinite running updownn;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    left: 9px;
    position: absolute;
    transition: opacity 0.5s ease 0s;
    -webkit-transition: opacity 0.5s ease 0s;
    width: 10px;
}

Vậy thôi đó, hãy thử và áp dụng ngay vào slider hoặc banner để có được VIP nào.

Bonus thêm: JS hỗ trợ click vào scroll xuống section kế tiếp:

</pre>
<pre><script type = "text/javascript" >
    jQuery(document).ready(function() {
        jQuery('.slider-icon').click(function() {
            jQuery('html, body').animate({
                scrollTop: jQuery("#list_tx_1").offset().top //#list_tx_1 là id của section bên dưới
            }, 500)
        })
    });
</script></pre>
<pre>

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *