Hiệu ứng tải trang đẹp mắt và tiện lợi với CSS3 và Javascript giúp bạn tăng điểm trải nghiệm người dùng của website khi truy cập trang có nhiều hình ảnh…
Hiện tại có nhiều cách để tạo hiệu ứng tải trang nhưng trong bài viết này, TrustWeb xin giới thiệu giải pháp mà TrustWeb ưng ý nhất bởi vì nó chỉ sử dụng các hiệu ứng chuyển động animation CSS3 (không sử dụng hình ảnh GIF) và 1 đoạn mã javascript cực ngắn nên không làm trang web của bạn nặng thêm mà vẫn cho ra hiệu ứng chuyên nghiệp. Khi bạn truy cập website trustweb.vn của mình thì sẽ thấy được demo của giải pháp này.
Các bước thực hiện như sau:
Bước 1: Thêm đoạn mã CSS này trong thẻ <head>…</head> của trang web. Đoạn css tạo hiệu ứng nên để đầu tiên, trước các đoạn code CSS hay file CSS khác
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #222;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
</style>
Bước 2: Thêm đoạn code HTML thể hiện hiệu ứng tải trang ngay phía sau thẻ <body> của trang web
<div id="loader-wrapper">
<div id="loader"></div>
</div>
Nếu website của bạn làm bằng WordPress thì 2 đoạn mã ở bước 1 và bước 2 phải đặt ở trong file header.php để nó xuất hiện xuyên suốt ở tất cả các trang của website
Bước 3: Đoạn script này xử lý sự kiện sau khi toàn bộ trang nên để nó ở cuối cùng. Sau khi trang tải xong (sự kiện window.onload) , hiệu ứng tải trang bị ẩn đi và hiện nội dung website lên. Bạn đặt nó sau thẻ </body> của trang. Trong WordPress thì bạn đặt trong file footer.php
<script>
window.onload = function(e)
{
var x = document.getElementById("loader-wrapper");
x.style.display = 'none';
}
</script>
Đoạn code đầy đủ: để dễ hình dung, bạn xem đoạn code ví dụ đầy đủ dưới đây. Trang web nhỏ này có nhúng 1 file hình ảnh có kích thước 6000×4000 pixel (nặng 15Mb)
<html>
<head>
<title>Hieu ung tai trang</title>
<style type="text/css">
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #222;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
</style>
</head>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
</div>
<img width="100%" src="6000x4000.jpg" />
</body>
<script>
window.onload = function(e)
{
var x = document.getElementById("loader-wrapper");
x.style.display = 'none';
}
</script>
</html>
Nguồn: https://ihatetomatoes.net/create-css3-spinning-preloader/