Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Hiệu Ứng Hover Đường Dẫn Làm Thay Đổi Ảnh Nền

Hiệu Ứng Hover Đường Dẫn Làm Thay Đổi Ảnh Nền


Ngày 23 Tháng 10 Năm 2020

Hiệu Ứng Hover Đường Dẫn Làm Thay Đổi Ảnh Nền

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo hiệu ứng khi hover vào đường dẫn sẽ thay đổi ảnh nền phía sau bằng HTML CSS và Javascript nhé!

Tạo Cấu Trúc Phần Tử Cho Hiệu Ứng

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font và thư viện Jquery thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiệu Ứng Hover Đường Dẫn Làm Thay Đổi Ảnh Nền</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>

Thêm Cấu Trúc Phần Tử Cho Hiệu Ứng Hover

Bước tiếp theo chúng ta sẽ đi vào thêm các phần tử HTML cần thiết để tạo hiệu ứng hover này thông qua đoạn mã sau nhé:

HTML

<!--Bắt Đầu Hiệu Ứng-->
<div class="container">
<div id="picture" class="one"></div>
<ul>
    <li rel="one"><a href="#" data-text='Home'>Home</a></li>
    <li rel="two"><a href="#" data-text='About'>About</a></li>
    <li rel="three"><a href="#" data-text='Contact'>Contact</a></li>
    <li rel="four"><a href="#" data-text='Pricing'>Pricing</a></li>
    <li rel="five"><a href="#" data-text='Project'>Project</a></li>
</ul>
</div>
<!--Kết Thúc Hiệu Ứng-->

Và kết quả bạn xem ở bên dưới nhé:

Hieu_Ung_Hover_Thay_Doi_Anh_Nen_1

Căn Chỉnh Vị Trí Phần Tử Bằng CSS

Tiếp theo chúng ta sẽ đi vào sử dụng các thuộc tính CSS cơ bản để thiết lập vị trí, font chữ, kích thước... cho thẻ ul, li, a trong trang web bằng đoạn mã dưới đây nha:

CSS

body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.container{
    display: grid;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #ee6f57;
}
.container ul{
    margin: 0 auto;
    padding: 0;
}
.container ul li{
    list-style: none;
}
.container ul li a{
    position: relative;
    text-decoration: none;
    font-size: 4em;
    color: #000;
    font-weight: 500;
    transition: 0.5;
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

Hieu_Ung_Hover_Thay_Doi_Anh_Nen_2

Tạo Hiệu Ứng Hover Cho chữ Cho Đường Dẫn

Bây giờ chúng ta sẽ đi vào tạo hiệu ứng hover cho chữ cho đường dẫn thông qua đoạn mã dưới đây nhé:

CSS

.container ul li a:before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    color: #fff;
    transition: width 0.5s;
}
.container ul li  a:hover:before{
    width: 100%;
}

Ở đây mình có một lưu ý là hàm attr() trong CSS có nhiệm vụ lấy giá trị của thuộc tính trong phần tử HTML . Ví dụ khi bạn sử dụng content: attr(data-text); này cho đoạn mã HTML:

<a href="#" data-text='Home'>Home</a>

Thì kết quả CSS của chúng ta sẽ là content: 'Home'

Và kết quả của đoạn mã trên bạn xem video ở bên dưới nhé:

Tạo Hiệu Ứng Thay Đổi Ảnh Nền Khi Hover Vào Đường Dẫn

Phần cuối cùng chúng ta sẽ sử dụng CSS kết hợp với Jquery để tạo hiệu ứng khi người dùng hover vào từng đường dẫn sẽ hiển thị ảnh nền tương ứng đằng sau thông qua đoạn mã sau nhé:

CSS

.container #picture{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: 0.5s;
    filter: blur(5px);
    background: #b8de6f;
}
.container ul li.active a:before{
    width: 100%;
}
.container #picture.one{
    background: url(https://images.pexels.com/photos/3804997/pexels-photo-3804997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
}
.container #picture.two{
    background: url(https://images.pexels.com/photos/1585892/pexels-photo-1585892.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
}
.container #picture.three{
    background: url(https://images.pexels.com/photos/3820994/pexels-photo-3820994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
}
.container #picture.four{
    background: url(https://images.pexels.com/photos/154148/pexels-photo-154148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
}
.container #picture.five{
    background: url(https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
}

Javascript

$('ul li').hover(function () {
    $('#picture').removeClass().addClass($(this).attr('rel'));
    $(this).addClass('active').siblings().removeClass('active');
})

Và kết quả cuối cùng bạn xem video ở bên dưới nhé:

Còn đây là dự án trên Codepen nha:

See the Pen Tạo Hiệu Ung Hover Thay Doi Anh Nen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về việc tạo hiệu ứng hover thay đổi ảnh nền hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!