Hiệu ứng chữ rơi lơ lửng cho website
Hiệu ứng chữ rơi lơ lửng cho website

Tình hình là sắp Tết rồi nên việc cuối năm nó dồn cho sấp mặt thành ra không có thời gian viết bài cho mọi người. Cố làm cho xong dự án để xin nghỉ sớm và giờ đang ở quê lấy cái laptop ra gõ gõ bài mới đây. Cũng bật mí luôn cho các bạn là sắp tới mình sẽ thay đổi giao diện đơn giản hơn và không dùng Google Adsense cho website nó load nhanh xíu và đỡ tốn 3G/4G của các bạn.

Thôi dài dòng rồi. Nay mình sẽ chia sẻ cho các bạn tạo hiệu ứng chữ rơi lơ lửng cho website nhé. Chức năng thì làm gì ư? Để bạn trang trí cho chữ mình muốn có hiệu ứng khi rê chuột vào thôi. Điển hình là áp dụng cho logo bằng text ở website của bạn ấy là nhanh nhất.

Hiệu ứng chữ rơi lơ lửng cho blog/website

HTML

<div class="branding">
    <a href="">
        <span>Hac<span class="logo">k</span>er</span>
    </a>
</div>

CSS

@-webkit-keyframes unskew {
    0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}

@keyframes unskew {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes skew {
    40% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    to {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

@keyframes skew {
    40% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    to {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

.branding {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.branding a {
    color: # 000;
}

.branding a span {
    display: inline - block;
    font - size: 5 rem;
    font - weight: 700;
    text - transform: uppercase;
    letter - spacing: 1 px;
    text - shadow: 0 0 10 px #08cf1a;
}

.branding a span.logo {
    -webkit-animation-name: unskew;
    animation-name: unskew;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: cubic-bezier(0.75, -2, 0.75, 2);
    animation-timing-function: cubic-bezier(0.75, -2, 0.75, 2);
    -webkit-transform-origin: 86% 15%;
    transform-origin: 86% 15%;
}

.branding a:hover .logo {
    -webkit-animation-name: skew;
    animation-name: skew;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-transform-origin: 86% 15%;
    transform-origin: 86% 15%;
}

Trong hiệu ứng chuyển động này chỉ hoàn toàn dùng thuộc tính animation trong CSS3, các bạn chỉ cần lưu ý chức năng của từng thuộc tính của nó như:

  • animation-name: tên của hiệu ứng
  • animation-duration: thời gian thực thi của hiệu ứng
  • animation-fill-mode: xác định trạng thái của hiệu ứng khi nó ngừng chạy và forwards ở đây sẽ làm nó giữ nguyên vị trí khi hết chuyển động mà không quay về chạy lại (phụ thuộc cả vào animation-iteration-count)
  • animation-iteration-count: số lần lặp lại của hiệu ứng
  • animation-timing-function: hiểu nôm na là tốc độ chuyển động của hiệu ứng và ease-in-out là sẽ chậm cả khi bắt đầu và cuối của chuyển động

Ngoài ra, để tìm hiểu kĩ hơn về thuộc tính animation thì bạn có thể tham khảo chi tiết tại https://www.w3schools.com/css/css3_animations.asp

Lời kết

Trên đây, mình vừa chia sẻ cho các bạn cách để tạo ra hiệu ứng chữ rơi lơ lửng chỉ gồm HTML và CSS, không có chút JS nào nên tốc độ website không bị ảnh hưởng gì quá nhiều đâu. Việc áp dụng cũng vô cùng dễ dàng, bạn chỉ cần căn chỉnh phần HTML và CSS cho trùng Class, ID là được còn lại không cần đổi thông số gì mấy đâu. Chúc các bạn thành công!

Hiệu ứng chữ rơi lơ lửng cho website
4.7 (93.33%) 3 vote[s]