[CSS3] Hiệu ứng độc đáo khi rê chuột vào hình ảnh (P2)
Mã HTML
Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the following:PHP Code:<div id="grid" class="main">
<div class="view">
<div class="view-back">
<span data-icon="A">566</span>
<span data-icon="B">124</span>
<a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
</div>
<img src="http://windowsz.net/images/1.jpg" />
</div>
<div class="view">
<!-- ... -->
</div>
<!-- ... -->
</div>
Mỗi thumbnail sẽ đc đặt vào phần chi tiết. Cấu trúc chúng ta cần để tạo đc như vậy với class view sử dụng JavaScript như sau
PHP Code:<div class="view">
<div class="view-back">
<!-- ... -->
</div>
<div class="slice s1" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="slice s2" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="slice s3" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="slice s4" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="slice s5" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
</div><!-- /s5 -->
</div><!-- /s4 -->
</div><!-- /s3 -->
</div><!-- /s2 -->
</div><!-- /s1 -->
</div><!-- /view -->
Mỗi slide sẽ có ảnh nền của nó khi chúng chồng lên nhau, điều này giúp ta điều khiển dễ hơn. Đồng thời thêm 1 thẻ Span nằm lên trên để tạo ra hiệu ứng chân thật hơn.
Đoạn JavaScript của chúng ta như sau
CSSPHP Code:$.fn.hoverfold = function( args ) {
this.each( function() {
$( this ).children( '.view' ).each( function() {
var $item = $( this ),
img = $item.children( 'img' ).attr( 'src' ),
struct = '<div class="slice s1">';
struct +='<div class="slice s2">';
struct +='<div class="slice s3">';
struct +='<div class="slice s4">';
struct +='<div class="slice s5">';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
} );
});
};
Cho class View
Hiệu ứng 3D cho các SlidePHP Code:.view {
width: 316px;
height: 216px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
perspective: 500px;
}
Phần mô tả sẽ được xuất hiện khi rê chuột tớiPHP Code:.view .slice{
width: 60px;
height: 100%;
z-index: 100;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 150ms ease-in-out;
}
Dành cho the SpanPHP Code:.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
PHP Code:.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}
.view-back span:first-child {
padding-top: 20px;
}
.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}
.view-back a:hover {
color: #fff;
border-color: #fff;}
Phần icon xuất hiện phía trước thẻ span chúng ta sẽ sử dụng font dạng icon tại [Chỉ có thành viên mới có thể nhìn thấy link. CLICK VÀO ĐÂY ĐỂ ĐĂNG KÝ]. Chúngta sẽ add 1 data-icon vào thẻ span và sử dụng pseudo-class :before để hiển thị nó
Tất cả sẽ di chuyển sang phải ngoại trừ Slide đầu tiên (do chúng ta có 2 lớp chồng lên nhau)PHP Code:.view-back span[data-icon]:before {
content: attr(data-icon);
font-family: 'icons';
color: #aaa;
color: rgba(255,255,255,0.2);
text-shadow: 0 0 1px rgba(255,255,255,0.2);
padding-right: 5px;
}
Thiết lập các vị trí nền tương ứng của mỗi slice cho hình nền:PHP Code:.view .s2,
.view .s3,
.view .s4,
.view .s5 {
transform: translateX(60px);
}
Các lớp phủ ban đầu sẽ có một độ opacity là 0 và chúng ta sẽ thêm một quá trình chuyển đổi và thay đổi mức độ opacity khi rê chuột lại:PHP Code:.view .s1 {
background-position: 0px 0px;
}
.view .s2 {
background-position: -60px 0px;
}
.view .s3 {
background-position: -120px 0px;
}
.view .s4 {
background-position: -180px 0px;
}
.view .s5 {
background-position: -240px 0px;
}
Hãy cố định các vị trí và z-index cho hình ảnh (chỉ để chúng ta không nhìn thấy phần dưới ở bên trên và phần dự phòng). Và chúng ta cũng sẽ thêm một quá trình chuyển đổi cho các trình duyệt không hỗ trợ 3D (điển hình là IE):PHP Code:.view .overlay {
width: 60px;
height: 100%;
opacity: 0;
position: absolute;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {
opacity: 1;
}
Khi phát hiện ra trình duyệt ko hỗ trợ 3D chúng ta sẽ gọi file CSS fallback.css lên để giải quyết vấn đềPHP Code:.view img {
position: absolute;
z-index: 0;
transition: left 0.3s ease-in-out;
}
Nó sẽ giúp tấm ảnh của bạn trượt qua trái khi rê chuột vào.PHP Code:.view {
overflow: hidden;
}
.view:hover img {
left: -85px;
}
.view div.view-back {
background: #666;}
Với phần Ví dụ
Chúng ta tạo ra 1 hiệu ứng "gấp ảnh". Để làm điều này chúng ta sẽ thay đổi giá trị của "viễn cảnh" các phần khi xem. Và di chuyển chúng trên các phần đó.
Các slide 2, 3 ,4 5 sẽ chuyển động dạng 3D và chúng ta sẽ có được hiue65 ứng Gập ảnhPHP Code:.view {
perspective: 1050px;
}
.view div {
transition: all 0.3s ease-in-out;
}
PHP Code:.view:hover .s2{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}
Mỗi slide sẽ di chuyển sang trái, và nên đặt cho nó giá trị là 59px để độ gập đc tốt hơn. Slide thứ 2 sẽ xoay 1 góc -45 độ để trong như nó chuyển về bên trái. Slide thứ 4 sẽ xoay theo hướng khác, Slide 3 và 5 cùng xoay 90 độ. Hãy nhớ rằng chúng ta có các lốp chồng lên nhau, do vậy nếu lớp cha thay đổi thì các lớp con cũng sẽ xoay theo. Để nhìn nó thực tế hơn ta thêm các gadient vào lớp phủ trên cùng.
Phần mô ta cũng sẽ có một màu nền, va ta sẽ có nó 1 chút shadowPHP Code:.view .s2 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s3 > .overlay {
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s4 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s5 > .overlay {
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
Download file đính kèm để xem chi tiếtPHP Code:.view div.view-back{
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);}
Nguồn: tympanus.net
View more random threads:
- [Video] Cách code HTML, CSS tốt
- [jQuery - CSS3] Tạo Slide trình diễn sản...
- [HTML5] Vẽ cây
- [CSS3] Hiệu ứng trái bóng nảy
- [CSS3] Gallery hình ảnh chuyển động lạ mắt
- [CSS3 - jQuery] Khung tìm kiếm 3D độc đáo
- [CSS3 - jQuery] Form đăng ký dạng trượt độc...
- [HTML5 + jQuery] Tạo trang Upload bằng cách...
- [CSS3] Hiện Pop-up khi được click vào
- [CSS3] Slide dạng Accordian
Y!M: anhchangdeptrai3792159
Ko Thanks là ko Support nha 
Mọi link đều có mật khẩu là:
windowsz.netHỗ trợ download tài liệu tại trang tailieu.vn miễn phí cho mọi người
Hãy bấm
+1 nếu thấy bài viết hay nha bạn
Trả lời với trích dẫnNhững người đã cảm ơn boyplay cho bài viết có ích này:
lovegameisme (14-08-2012)
+ Tuyển BQT forum đợt 5
+ Quảng cáo và tài trợ forum windowsz.net
+ Hướng dẫn sử dụng bbcode post bài trên forum
+ Giữ gìn sự trong sáng trong tiếng Việt bạn nhé
+ Quảng cáo và tài trợ forum windowsz.net
+ Hướng dẫn sử dụng bbcode post bài trên forum
+ Giữ gìn sự trong sáng trong tiếng Việt bạn nhé
Mr. Hải Dương
0 nhận xét