04/10/2018, 20:10
Hiệu ứng đẹp cho “Bài viết cùng chủ đề” với CSS3 và jQuery
Bạn sẽ làm gì để tăng thêm lượt truy cập cũng như gia hạn thời gian mà người dùng tìm kiếm những thông tin hay đọc những bài viết hay trên blog của các bạn. Hãy bỏ những mẫu thiết kế nhàm chán quen thuộc và bắt đầu thử nghiệm một kiểu trang trí mới ,vừa thu hút người dùng, vừa có thể tạo cảm giác ...
Bạn sẽ làm gì để tăng thêm lượt truy cập cũng như gia hạn thời gian mà người dùng tìm kiếm những thông tin hay đọc những bài viết hay trên blog của các bạn. Hãy bỏ những mẫu thiết kế nhàm chán quen thuộc và bắt đầu thử nghiệm một kiểu trang trí mới ,vừa thu hút người dùng, vừa có thể tạo cảm giác mới lạ cho web/blog của các bạn. Hãy thử dùng mẫu thiết kế dùng cho các bài viết “Cùng danh mục” mà mình sưu tập được ở trên mạng.
Xem Demo | Download
HTML
Giả sử chúng ta có danh sách các bài viết cần hiển thị theo danh mục như cấu trúc html sau :
<div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Mẫu trang 404 hiệu ứng động cực ấn tượng không thể bỏ qua</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/thiet-ke-website/mau-trang-404-hieu-ung-dong-cuc-an-tuong-khong-the-bo-qua.html">Bài viết</a> <a target="_blank" href="https://www.thuthuatweb.net/demo/animated-404/">Demo</a> </span> </div> </li> <li> <div> <img src="images/2.jpg" alt=""/> <span class="rp_title">Animated Download Button Với CSS3</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/css/animated-download-button-voi-css3.html">Bài viết</a> <a target="_blank" href="http://www.thuthuatweb.net/demo/animated-download-button/">Demo</a> </span> </div> </li> <li> <div> <img src="images/3.jpg" alt=""/> <span class="rp_title">Tạo Accordion với CSS3</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/css/tao-accordion-voi-css3.html/">Bài viết</a> <a target="_blank" href="http://www.thuthuatweb.net/demo/css/accordion-css3.html">Demo</a> </span> </div> </li> <li> <div> <img src="images/4.jpg" alt=""/> <span class="rp_title">Hiệu ứng chuyển trang (Page Transitions) cực sexy với CSS3</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/css/hieu-ung-chuyen-trang-page-transitions-cuc-sexy-voi-css3.html">Bài viết</a> <a target="_blank" href="http://www.thuthuatweb.net/demo/css3-page-transition/">Demo</a> </span> </div> </li> <li> <div> <img src="images/5.jpg" alt=""/> <span class="rp_title">Tỉ mỉ với logo Apple được làm từ CSS3</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/css/ti-mi-voi-logo-apple-duoc-lam-tu-css3.html">Bài viết</a> <a target="_blank" href="http://www.thuthuatweb.net/demo/apple-css3-logo/">Demo</a> </span> </div> </li> <li> <div> <img src="images/6.jpg" alt=""/> <span class="rp_title">Tạo Vertical Navigation Menu với CSS3 và jQuery</span> <span class="rp_links"> <a target="_blank" href="https://www.thuthuatweb.net/css/tao-vertical-navigation-menu-voi-css3-va-jquery.html">Bài viết</a> <a target="_blank" href="http://www.thuthuatweb.net/demo/vertical-menu/">Demo</a> </span> </div> </li> </ul> <span id="rp_shuffle" class="rp_shuffle"> </span> </div>
CSS
Chúng ta sẽ sử dụng một số thuộc tính của CSS3 để định dạng như đoạn code bên dưới.
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
span.rp_shuffle{
background:#222 url(images/shuffle.png) no-repeat 10px 50%;
awidth:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
awidth: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
awidth: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
awidth:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
font-weight: bold;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
awidth:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(images/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
jQuery
Cuối cùng vẫn là copy đoạn script bên dưới để tạo hiệu ứng động cho bài viết.
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
</script>
Mình mong là các bạn sẽ không gặp bất kì một sự cố nào khi thực hiện hiệu ứng này cho website hay blog của mình. Gặp lại các bạn ở các bài viết tiếp theo.
Have a good day !
Chuyên Mục: Css, Javascript
Bài viết được đăng bởi webmaster
