VIDEO
ẢNH
Trang chủHiệu ứng Load trang màu đỏ giống youtube cho Blogspot
Thứ Ba, 3 tháng 6, 2014
Thủ thuật thực ra không quan trọng và cũng không cần thiết cho 1 Website, Bài viết ngày hôm nay nhằm mục đích mang đến cho bạn đọc thêm 1 cách nhìn nhận về khả năng của Blogspot cũng làm được các chức năng như các Website lớn, và mang đến cho bạn vọc Blogspot thêm những trải nghiệm tinh chỉnh Blogspot của mình thêm phong phú và đa dạng. Hiệu ứng load trang giống Youtube rất lạ và phong cách. Bạn có thể tích hợp hiệu ứng cho các trang báo điện tử, các trang shop cho tới các trang Video, Phim ảnh
Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn code sau trên </body>
<style>Bạn có thể tùy chỉnh để đổi màu bằng cách thêm mã màu vào màu xanh in đậm ở trên
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>
Chúc bạn thành công và đừng quên nhấn Like để tác giả chia sẻ thêm nhiều tính năng.
All comments [ 0 ]
Your comments