สร้างแกลลอรี่แสดงรายละเอียดแบบ HOVER EFFECTด้วย CSS3 และ JQUERY


แนะนำเรื่องต่างมาเยอะแล้วคราวนี้มาลองดูการทำแกลลอรี่รูปภาพแบบย่อกันบ้างครับหลายบทความที่แนะนำเกี่ยวกับแกลลอรี่แต่รูปแบบนี้จะมีความแตกต่างตรงที่มุ่งเน้นไปที่การเล่นลูกเล่นกันการแสดงรายละเอียดรูปภาพโดยมีการแสดงผลตามตัวอย่างมี 3 แบบที่แตกต่างกันแต่ภาพรวมๆแล้วคือการเล่นกับลูกเล่นของการแสดงรายละเอียดภาพครับลองมาดูตัวอย่างกันดูครับ

การแสดงภาพขนาดเล็กโดยการซ้อนคำอธิบายรายละเอียดภาพ

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="images/7.jpg" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
       </a>
   </li>
   <li>
       <!-- ... -->
   </li>
   <!-- ... -->
</ul>

กำหนดตำแหน่งมีความสัมพันธ์

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

กำหนดสไตล์ด้วย css ในการแสดงผลของคำอธิบายรูปภาพแต่ส่วนนี้บางคนก็สามารถใช้ JavaScript ในการกำหนดก็ได้แต่ถ้าเป็น css จะแก้ไขง่ายและเป็นระบบกว่า

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px;
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* Final state classes: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

การกำหนดตำแหน่งของการซ้อนทับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {  
    var $el         = $(this),
        evType      = event.type,
        $hoverElem  = $el.find( 'div' ),
        direction   = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
        hoverClasses= _self._getClasses( direction );  
    $hoverElem.removeClass();
    if( evType === 'mouseenter' ) {
      $hoverElem.hide().addClass( hoverClasses.from );      
        clearTimeout( _self.tmhover );
        _self.tmhover   = setTimeout( function() {
            $hoverElem.show( 0, function() {
                $(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
            } );      
        }, _self.options.hoverDelay );      
    }
    else {  
        $hoverElem.addClass( 'da-animate' );        
        clearTimeout( _self.tmhover );        
        $hoverElem.addClass( hoverClasses.from );
    }    
} );

ดาวน์โหลด…..!!!

ขอบคุณข้อมูลจาก http://tympanus.net

Comments

comments

Powered by Facebook Comments