Sau một thời gian tiếp xúc và làm việc với CSS, mình muốn thử làm ra một hiệu ứng hover “xịn sò” nhất có thể với những kiến thức đã có. Vậy là sau vài giờ đồng hồ mầy mò kết hợp với một ít Jquery, đây là kết quả mình đạt được.

Các bạn có thể xem lại link đây.

Trong bài viết này mình sẽ hướng dẫn các bạn cách để làm được hiệu ứng như trên.

Phần 1. Chuẩn bị

Điều gì sẽ là “hot” cho lập trình Front-end ( CSS, HTML ) tại Mobifone Global, một công ty mang quy mô công nghệ toàn cầu?”]

Trước tiên, chúng ta tạo ra một element với class .card với tác dụng như một container chứa những element khác.

<div class=“card”>
<div class=“card__img-wrapper”><img class=“card__img” src=“”/></div>
<p class=“card__title”>Forest Road</p>
</div>

Để cho dễ nhìn hơn thì chúng ta sẽ style cho body center .card vào giữa màn hình.

159 chi nhánh trên thế giới, các dự án out-sourcing Transcomos chưa bao giờ ngừng hot” đối với các Front-end Developer (HTML, CSS)”]
.card {
    margin: auto;
    position: relative;
}
.card__imgwrapper {
    borderradius: 15px;
    width: 300px;
    height: 450px;
    background: transparent;
    overflow: hidden;
}
.card__img {
    display: block;
    margin: 20% 0 0 20%;
    width: 140%;
    height: 140%;
    objectfit: cover;
    backfacevisible: hidden;
    verticalalign: middle;
}
.card__title {
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 5px;
    fontsize: 30px;
    width: 100%;
    transition: all .3s ease;
    cursor: default;
    background: transparent;
    transition: all .3s ease;
}
Vậy là có được kết quả như sau.Các bạn có thể xem lại link đây

Nhìn cũng khá ok, nhưng để cho chất hơn nữa chúng ta sẽ bắt tay vào làm hiệu ứng khi hover

Phần 2. Viết Jquery

Trước tiên, chúng ta sẽ detect 2 sự kiện mousemove và mouseleave trong element .card.

$(function(){
    $(‘.card’).mousemove(function(ev){
        // Do something when mouse move
    });
    $(‘.card’).mouseleave(function(ev) {
        // Do something when mouse leave
    });
})

Trong sự kiện mousemove chúng ta sẽ tìm đến vị trí con trỏ chuột khi di chuột trong .card sau đó tính toán để áp dụng vào transform.

$(‘.card’).mousemove(function(ev){
    let parentWidth = $(this).width();  // Chiều rộng div cha
    let parentHeight = $(this).height();  // Chiều dài div cha
    let mouseX = ev.pageX $(this).offset().left;  // Vị trí x chuột trong div cha
    let mouseY = ev.pageY $(this).offset().top;  // Vị trí y chuột trong div cha
    let x = (parentWidth/2 mouseX)/15;
    let y = (parentHeight/2 mouseY)/15;
    
    $(this).css({
      ‘transform’: ‘rotateX(‘+ y +‘deg) rotateY(‘+ 2*x +‘deg) translateZ(50px)’,
      ‘transition’: ‘all .15s ease’
    });
    
    $(this).find(‘.card__img’).css({
      ‘transform’: ‘scale(1.05) translateX(‘+ 5*x +‘px) translateY(‘+ 5*y +‘px)’,
      ‘transition’: ‘all .15s ease’
    });
});
Sau đó, chúng ta sẽ trả .card. về trạng thái ban đầu sau khi mouseleave
$(‘.card’).mouseleave(function(ev) {
    $(this).css({
      ‘transform’: ‘rotateX(0) rotateY(0)’,
      ‘transition’: ‘all .6s ease’
    });
    $(this).find(‘.card__img’).css({
      ‘transform’: ‘scale(1) translateX(0px) translateY(0px) translateZ(0)’,
      ‘transition’: ‘all .6s ease’
    });
});
Các bạn có thể xem tại link đây

Lời kết

Vậy là chúng ta đã tạo được ra hiệu ứng hover khá đẹp mắt. Các bạn cứ thoải mái chỉnh sửa để tạo ra được những hiệu ứng chất hơn nhé. Xin cảm ơn

Xem thêm việc làm cho Web Developer tại TopDev

TopDev via viblo.asia