Tạp Chí CNTT

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