April 10, 2015

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

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Người dùng có thể mất quyền truy cập tài khoản iCloud nếu “sa lưới” vào hình thức lừa đảo mới […]

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Bản vẽ thiết kế được cho là của iPhone 16 Pro cho thấy dòng iPhone thế hệ mới của Apple […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

© 2021 Tạp Chí CNTT. Mr Hoang