Chào các bạn, bài viết này sẽ giới thiệu đến các bạn 30 kiểu Preload trang bằng CSS3 Animations. Trong đó, jQuery sử dụng chỉ để làm ẩn các hình ảnh động.

[button color=”blue” size=”medium” link=”http://tapchicntt.com/Demo/2015/css-page-preload-animations/” target=”blank” ]Demo[/button] [button color=”red” size=”medium” link=”http://www.mediafire.com/download/w2wbk64qg4sq5r5/css-page-preload-animations.rar” target=”blank” ]Download[/button]

Cấu trúc HTML


<div id="loading">
  <div id="loading-center">
    <div id="loading-center-absolute">
      <div id="object"></div>
    </div>
  </div>
</div>

Định dạng CSS

Đầu tiên chúng ta phải cố định div ngoài cùng có thể nổi lên trên tất cả mọi thứ.


#loading{
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}

Thứ hai, chúng ta phải tạo ra một điểm trung tâm đó luôn luôn sẽ nằm ở giữa.


#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}

Thứ ba và điều cuối cùng chúng ta phải làm là định dạng “#object” sử dụng các khung hình chính. Bạn sẽ nhận thấy rằng tôi sử dụng keyframe hai lần ‘@-webkit-keyframe’ và ‘@-webkit-keyframes animate’ đầu tiên là dành cho trình duyệt dựa trên webkit thứ hai là dành cho trình duyệt Internet Explorer.


#object{
	width: 80px;
	height: 80px;
	background-color: #FFF;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}
@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
 
@keyframes animate {
  0% { 
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}

Trong bản demo chúng tôi thiết lập JavaScript để ẩn các hình ảnh động khi bạn click vào nó.


$(window).load(function() {
	$("#loading-center").click(function() {
	$("#loading").fadeOut(500);
	})		
});

Nếu bạn muốn khi vừa load trang web thì sẽ hiển thị. Chúng ta sử dụng đoạn javascript sau:


$(window).load(function() {
   $("#loading").fadeOut(500);
})

[button color=”blue” size=”medium” link=”http://tapchicntt.com/Demo/2015/css-page-preload-animations/” target=”blank” ]Demo[/button] [button color=”red” size=”medium” link=”http://www.mediafire.com/download/w2wbk64qg4sq5r5/css-page-preload-animations.rar” target=”blank” ]Download[/button]

Chúc các bạn thành công!

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang