Hướng dẫn Thêm Hiệu Ứng Tuyết Rơi Cho Website

Thêm hiệu ứng tuyết rơi vào trang web của bạn có thể tăng thêm vẻ đẹp cho trang web và tạo sự khác biệt so với các trang web khác.

Thay vì bạn phải tìm plugin nào đó để tạo hiệu ứng cho riêng mình thì Sunday Web sẽ Hướng dẫn Thêm Hiệu Ứng Tuyết Rơi Cho Website chỉ cần thao tác nhỏ như copy đoạn code dán vào các file theo hướng dẫn thì có thể đã hoàn thành mà không cần thêm bất kỳ plugin nào khác.

Hiệu ứng này có thể chỉnh sửa thay vì tuyết rơi bạn có thể đổi như là hạt mưa, trái tym, … sao cho đẹp mắt đúng theo ý thích của bạn.

Mời các bạn thực hiện các bước sau:

Bước 1: Tải plugin Simple Custom CSS and JS ở phần tải miễn phí Plugin.

Bước 2: Bạn thêm đoạn code HTML như sau:

<div class="snowflakes" aria-hidden="true">
<div class="snowflake" style="font-size: 30px;">❅</div>
<div class="snowflake">❅</div>
<div class="snowflake" style="font-size: 40px;">❆ </div>
<div class="snowflake">❅</div>
<div class="snowflake" style="font-size: 30px;">❆</div>
<div class="snowflake" style="font-size: 22px;">❅</div>
<div class="snowflake" style="font-size: 50px;">❆</div>
<div class="snowflake" style="font-size: 20px;">❅</div>
<div class="snowflake" style="font-size: 70px;">❆</div>
<div class="snowflake" style="font-size: 20px;">❆</div>
</div>

Bước 3: Bạn thêm đoạn code CSS như sau:

.snowflake {
color: red;
}
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes snowflakes-shake {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes snowflakes-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, 0.5s;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}

Bạn có thể đổi hình hiệu ứng ở phần HTML

<div class="snowflake">❅</div>

Đổi màu của hình ở CSS

.snowflake { color: red; }

Nếu bạn không chắc chắn về việc thay đổi code, hãy nhắn tin cho Sunday Web hoặc bắt đầu tìm hiểu sử dụng plugin Simple Custom CSS and JS.

Ví dụ code đổi hiệu ứng Trái Tim Valentine thay cho Tuyết Rơi https://raw.githubusercontent.com/MinhNhut1103/flatsome/main/valentine-effect

Bạn cảm thấy bài viết Hướng dẫn Thêm Hiệu Ứng Tuyết Rơi Cho Website như thế nào?

Nếu có góp ý bổ sung đừng ngần ngại đặt câu hỏi phía bên dưới cho Sunday Web và chúc các bạn thao tác thành công!

SundayWeb

Website Designer / Developer

Tận Tâm Làm Việc Bằng Cả Trái Tim.

Thiết kế Website – Chia sẻ kiến thức lập trình.