Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

Hiệu ứng 3D đẹp khi rê chuột vào ảnh bằng CSS3 và jQuery

Posted by millionking on February 14, 2014

BƯỚC 1: HTML

Cấu trúc HTML cho thumbnail của chúng ta như sau:

01 <div id="grid" class="main">
02   
03     <div class="view">
04  
05         <div class="view-back">
06             <span data-icon="A">566</span>
07             <span data-icon="B">124</span>
08             <ahref="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
09         </div>
10  
11         <img src="images/1.jpg" />
12  
13     </div>
14  
15     <div class="view">
16  
17     <!-- ... -->
18  
19     </div>
20  
21     <!-- ... -->
22      
23 </div>

Mỗi thumbnail sẽ được đặt vào những phần riêng biệt, với class “view” ta sẽ định HTML cho nó như sau:

01 <div class="view">
02  
03     <div class="view-back">
04         <!-- ... -->
05     </div>
06      
07     <div class="slice s1" style="background-image: url(images/1.jpg); ">
08         <span class="overlay"></span>
09          
10         <div class="slice s2" style="background-image: url(images/1.jpg); ">
11             <span class="overlay"></span>
12              
13             <div class="slice s3" style="background-image: url(images/1.jpg); ">
14                 <span class="overlay"></span>
15                  
16                 <div class="slice s4" style="background-image: url(images/1.jpg); ">
17                     <span class="overlay"></span>
18                      
19                     <div class="slice s5" style="background-image: url(images/1.jpg); ">
20                         <span class="overlay"></span>
21                     </div><!-- /s5 -->
22                  
23                 </div><!-- /s4 -->
24                      
25             </div><!-- /s3 -->
26                  
27         </div><!-- /s2 -->
28              
29     </div><!-- /s1 -->
30      
31 </div><!-- /view -->

Mỗi slice 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:

01 $.fn.hoverfold = function( args ) {
02  
03     this.each( function() {
04      
05         $( this ).children( '.view' ).each( function() {
06          
07             var $item   = $( this ),
08                 img     = $item.children( 'img' ).attr( 'src' ),
09                 struct  = '<div>';
10                     struct  +='<div>';
11                         struct  +='<div>';
12                             struct  +='<div>';
13                                 struct  +='<div>';
14                                 struct  +='</div>';
15                             struct  +='</div>';
16                         struct  +='</div>';
17                     struct  +='</div>';
18                 struct  +='</div>';
19                  
20             var $struct = $( struct );
21              
22             $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice').css( 'background-image''url(' + img + ')' ).prepend( $( '<span ></span>' ) );
23              
24         } );
25          
26     });
27  
28 };

BƯỚC 2: CSS

Thiết lập stype cho các view riêng biệt. Điều này rất là quan trọng, bởi vì ở đó chúng ta sẽ thêm vào perspective.

01 .view {
02     width316px;
03     height216px;
04     margin10px;
05     floatleft;
06     positionrelative;
07     border8px solid #fff;
08     box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
09     background#333;
10     perspective: 500px;
11 }

Class “slice” sễ cần một số thuộc tính 3D và transition:

1 .view .slice{
2     width60px;
3     height100%;
4     z-index100;
5     transform-style: preserve-3d;
6     transform-origin: left center;
7     transition: transform 150ms ease-in-out;
8      
9 }

Phần mô tả hiện ra khi chúng đẩy các “slice” sang một bên sẽ có style như sau:

1 .view div.view-back{
2     width50%;
3     height100%;
4     positionabsolute;
5     right0;
6     background#666;
7     z-index0;
8 }

Style cho các thẻ spans và link:

01 .view-back span {
02     displayblock;
03     floatright;
04     padding5px 20px 5px;
05     width100%;
06     text-alignright;
07     font-size16px;
08     color: rgba(255,255,255,0.6);
09 }
10  
11 .view-back span:first-child {
12     padding-top20px;
13 }
14  
15 .view-back a {
16     display: bock;
17     font-size18px;
18     color: rgba(255,255,255,0.4);
19     positionabsolute;
20     right15px;
21     bottom15px;
22     border2px solid rgba(255,255,255,0.3);
23     border-radius: 50%;
24     width30px;
25     height30px;
26     line-height22px;
27     text-aligncenter;
28     font-weight700;
29 }
30  
31 .view-back a:hover {
32     color#fff;
33     border-color#fff;
34 }

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 Fontello . Chúng ta sẽ add 1 data-icon vào thẻ span và sử dụng pseudo-class :before để hiển thị nó:

1 .view-back span[data-icon]:before {
2     contentattr(data-icon);
3     font-family'icons';
4     color#aaa;
5     color: rgba(255,255,255,0.2);
6     text-shadow0 0 1px rgba(255,255,255,0.2);
7     padding-right5px;
8 }

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)

1 .view .s2,
2 .view .s3,
3 .view .s4,
4 .view .s5 {
5 transform: translateX(60px);
6 }

Thiết lập các vị trí nền tương ứng của mỗi slice cho hình nền:

01 .view .s1 {
02     background-position0px 0px;
03 }
04 .view .s2 {
05     background-position-60px 0px;
06 }
07 .view .s3 {
08     background-position-120px 0px;
09 }
10 .view .s4 {
11     background-position-180px 0px;
12 }
13 .view .s5 {
14     background-position-240px 0px;
15 }

Các lớp phủ ban đầu sẽ có một độ opacity là 0 và chúng ta sẽ thêm một transition và thay đổi mức độ opacity khi rê chuột vào:

01 .view .overlay {
02     width60px;
03     height100%;
04     opacity: 0;
05     positionabsolute;
06     transition: opacity 150ms ease-in-out;
07 }
08  
09 .view:hover .overlay {
10     opacity: 1;
11 }

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 transition cho các trình duyệt không hỗ trợ 3D transforms:

1 .view img {
2     positionabsolute;
3     z-index0;
4     transition: left 0.3s ease-in-out;
5 }

Khi phát hiện ra trình duyệt không hỗ trợ 3D chúng ta sẽ gọi file CSS fallback.css lên để giải quyết vấn đề:

01 .view {
02     overflowhidden;
03 }
04  
05 .view:hover img {
06     left-85px;
07 }
08  
09 .view div.view-back {
10     background#666;
11 }

Nó sẽ giúp tấm ảnh của bạn trượt qua trái khi rê chuột vào.

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 đó.

1 .view {
2     perspective: 1050px;
3 }
4  
5 .view div {
6     transition: all 0.3s ease-in-out;
7 }

Các slide 2, 3 ,4 5 sẽ chuyển động dạng 3D và chúng ta sẽ có được hiệu ứng gấp ảnh:

01 .view:hover .s2{
02     transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
03 }
04 .view:hover .s3,
05 .view:hover .s5{
06     transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
07 }
08 .view:hover .s4{
09     transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
10 }

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.

01 .view .s2 > .overlay {
02     background: linear-gradient(right, rgba(0,0,0,0.050%,rgba(0,0,0,0100%);
03 }
04  
05 .view .s3 > .overlay {
06     background: linear-gradient(left, rgba(255,255,255,00%, rgba(255255255,0.2100%);
07 }
08  
09 .view .s4 > .overlay {
10     background: linear-gradient(right, rgba(0,0,0,0.60%,rgba(0,0,0,0.2100%);
11 }
12  
13 .view .s5 > .overlay {
14     background: linear-gradient(left, rgba(0,0,0,0.80%,rgba(0,0,0,0100%);
15 }

Phần mô ta cũng sẽ có một màu nền, va ta sẽ có nó 1 chút shadow:

1 .view div.view-back{
2     background: linear-gradient(left#0a0a0a 0%,#666666 100%);
3 }

OK! Chúng tôi đã cố gắng trình bày một cách chi tiết để các bạn tiện theo dõi và hiểu rõ vấn đề! Nó thật tuyệt phải không nào!

Chúc các bạn thành công và có nhiều ý tưởng!

Theo: tympanus.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: