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
  • 362 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang