Tạo trang HTML như sau:

	

	<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="images/1.jpg" />

	    </div>

	    <div class="view">
	    <!-- ... -->
	    </div>
	    <!-- ... -->
	</div>

Những hình ảnh dùng để sử dụng tạo ra hiệu ứng. Cấu trúc được thể hiện bằng jQuery như sau:

	<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 -->

Chức năng JaveScript như sau:

	$.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>' ) );

	        } );

	    });

	};

 

Bây giờ chúng ta đã tạo ra được những hiệu ứng Hover đơn giản.

Chúng ta hãy trang điểm cho các hiệu ứng đẹp hơn bàng CSS:

	.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;

	}

Nhưng hiệu ứng hình cắt như sau:

	.view .slice{
	    width: 60px;
	    height: 100%;
	    z-index: 100;
	    transform-style: preserve-3d;
	    transform-origin: left center;
	    transition: transform 150ms ease-in-out;
 	}

	.view div.view-back{
	    width: 50%;
	    height: 100%;
	    position: absolute;
	    right: 0;
	    background: #666;
	    z-index: 0;
	}

	.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;
	}

	.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;
	}

	.view .s2,
	.view .s3,
	.view .s4,
	.view .s5 {
	    transform: translateX(60px);
	}

	.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;
	}

	.view .overlay {
	    width: 60px;
	    height: 100%;
	    opacity: 0;
	    position: absolute;
	    transition: opacity 150ms ease-in-out;
	}

	.view:hover .overlay {
	    opacity: 1;
	}

	.view img {
	    position: absolute;
	    z-index: 0;
            transition: left 0.3s ease-in-out;
	}

	.view {
	    overflow: hidden;
	}

	.view:hover img {
	    left: -85px;
	}

	.view div.view-back {
	    background: #666;
	}

Demo | Download

Dịch từ: Tympanus

  • Jquery
  • July 2, 2012
  • 0 comment
  • 258 views

Recent posts

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft cảnh bảo một chiến dịch tấn công mạng nguy hiểm quy mô toàn cầu

Microsoft đã gióng lên hồi chuông cảnh báo về Lumma Stealer, một loại mã độc chuyên đánh cắp thông tin, […]

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Google Chrome hiện có thể thay đổi mật khẩu yếu cho người dùng

Một tính năng đột phá vừa được Google chính thức ra mắt trên trình quản lý mật khẩu tích hợp […]

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google cho dịch giọng nói trực tiếp trong cuộc gọi

Google bắt dầu triển khai tính năng dịch giọng nói trực tiếp trong cuộc gọi, khẳng định có thể khớp […]

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

iPhone sẽ bị ‘vứt xó’ trong những năm tới, nhường bước cho các công nghệ mới

Những chiếc iPhone đã sống đủ lâu với ngôi vị quán quân di động, đã đến lúc sẽ có công […]

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

[WordPress] Hướng dẫn tạo Custom Action Hook trong WordPress

Tạo custom Action Hook trong WordPress là một kỹ năng rất hữu ích để tùy chỉnh và mở rộng chức […]

© 2021 Tạp Chí CNTT. Mr Hoang