Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[CSS3] Hiệu ứng độc đáo khi rê chuột vào hình ảnh

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi boyplay, 24/8/12.

Lượt xem: 20,119

  1. boyplay Thành viên cấp 3

    [​IMG]

    Xem demo: https://dl.dropbox.com/u/8612983/Thu thuat WEB/3DHoverEffects/index.html

    Mã HTML
    PHP:
    <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="http://windowsz.net/images/1.jpg" />
     
        </
    div>
     
        <
    div class="view">
     
        <!-- ... -->
     
        </
    div>
     
        <!-- ... -->
     
    </
    div>

    Mỗi thumbnail sẽ đc đặt vào phần chi tiết. Cấu trúc chúng ta cần để tạo đc như vậy với class view sử dụng JavaScript như sau

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

    Mỗi slide 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


    PHP:
    $.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>' ) );
         
            } );
     
        });
     
    };
    CSS

    Cho class View
    PHP:
    .view {
        
    width316px;
        
    height216px;
        
    margin10px;
        
    floatleft;
        
    positionrelative;
        
    border8px solid #fff;
        
    box-shadow1px 1px 2px rgba(0,0,0,0.05);
        
    background#333;
        
    perspective500px;
    }
    Hiệu ứng 3D cho các Slide
    PHP:
    .view .slice{
        
    width60px;
        
    height100%;
        
    z-index100;
        
    transform-stylepreserve-3d;
        
    transform-originleft center;
        
    transitiontransform 150ms ease-in-out;
     
    }
    Phần mô tả sẽ được xuất hiện khi rê chuột tới
    PHP:
    .view div.view-back{
        
    width50%;
        
    height100%;
        
    positionabsolute;
        
    right0;
        
    background#666;
        
    z-index0;
    }
    Dành cho the Span
    PHP:
    .view-back span {
        
    displayblock;
        
    floatright;
        
    padding5px 20px 5px;
        
    width100%;
        
    text-alignright;
        
    font-size16px;
        
    colorrgba(255,255,255,0.6);
    }
     
    .
    view-back span:first-child {
        
    padding-top20px;
    }
     
    .
    view-back a {
        
    displaybock;
        
    font-size18px;
        
    colorrgba(255,255,255,0.4);
        
    positionabsolute;
        
    right15px;
        
    bottom15px;
        
    border2px solid rgba(255,255,255,0.3);
        
    border-radius50%;
        
    width30px;
        
    height30px;
        
    line-height22px;
        
    text-aligncenter;
        
    font-weight700;
    }
     
    .
    view-back a:hover {
        
    color#fff;
        
    border-color#fff;
    }

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

    PHP:
    .view-back span[data-icon]:before {
        
    contentattr(data-icon);
        
    font-family'icons';
        
    color#aaa;
        
    colorrgba(255,255,255,0.2);
        
    text-shadow0 0 1px rgba(255,255,255,0.2);
        
    padding-right5px;
    }
    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)

    PHP:
    .view .s2,
    .
    view .s3,
    .
    view .s4,
    .
    view .s5 {
        
    transformtranslateX(60px);
    }
    Thiết lập các vị trí nền tương ứng của mỗi slice cho hình nền:

    PHP:
    .view .s1 {
        
    background-position0px 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;
    }
    Các lớp phủ ban đầu sẽ có một độ opacity là 0 và chúng ta sẽ thêm một quá trình chuyển đổi và thay đổi mức độ opacity khi rê chuột lại:

    PHP:
    .view .overlay {
        
    width60px;
        
    height100%;
        
    opacity0;
        
    positionabsolute;
        
    transitionopacity 150ms ease-in-out;
    }
     
    .
    view:hover .overlay {
        
    opacity1;
    }
    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 quá trình chuyển đổi cho các trình duyệt không hỗ trợ 3D (điển hình là IE):

    PHP:
    .view img {
        
    positionabsolute;
        
    z-index0;
        
    transitionleft 0.3s ease-in-out;
    }
    Khi phát hiện ra trình duyệt ko hỗ trợ 3D chúng ta sẽ gọi file CSS fallback.css lên để giải quyết vấn đề

    PHP:
    .view {
        
    overflowhidden;
    }
     
    .
    view:hover img {
        
    left: -85px;
    }
     
    .
    view div.view-back {
        
    background#666;
    }
    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 đó.

    PHP:
    .view {
        
    perspective1050px;
    }
     
    .
    view div {
        
    transitionall 0.3s ease-in-out;
    }
    Các slide 2, 3 ,4 5 sẽ chuyển động dạng 3D và chúng ta sẽ có được hiue65 ứng Gập ảnh
    PHP:
    .view:hover .s2{
        
    transformtranslate3d(59px,0,0rotate3d(0,1,0,-45deg);
    }
    .
    view:hover .s3,
    .
    view:hover .s5{
        
    transformtranslate3d(59px,0,0rotate3d(0,1,0,90deg);
    }
    .
    view:hover .s4{
        
    transformtranslate3d(59px,0,0rotate3d(0,1,0,-90deg);
    }

    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.

    PHP:
    .view .s2 > .overlay {
        
    backgroundlinear-gradient(rightrgba(0,0,0,0.050%,rgba(0,0,0,0100%);
    }
     
    .
    view .s3 > .overlay {
        
    backgroundlinear-gradient(leftrgba(255,255,255,00%, rgba(2552552550.2100%);
    }
     
    .
    view .s4 > .overlay {
        
    backgroundlinear-gradient(rightrgba(0,0,0,0.60%,rgba(0,0,0,0.2100%);
    }
     
    .
    view .s5 > .overlay {
        
    backgroundlinear-gradient(leftrgba(0,0,0,0.80%,rgba(0,0,0,0100%);
    }
    Phần mô ta cũng sẽ có một màu nền, va ta sẽ có nó 1 chút shadow

    PHP:
    .view div.view-back{
        
    backgroundlinear-gradient(left#0a0a0a 0%,#666666 100%);
    }
    Download file đính kèm để xem chi tiết

    Nguồn: Ghi lại từ: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

    ...
  2. pitlamgi

    pitlamgi Banned

    BẠn ơi xem lại cái link demo đi bạn :x
  3. 2525132524

    2525132524 Thành viên cấp 1

    chưa hiểu làm ntn
  4. pitlamgi

    pitlamgi Banned

    đây là code để làm album ảnh bạn ạ :)
  5. pitlamgi

    pitlamgi Banned

    Chủ thớt cho hỏi có cách nào để nó tự chỉnh ảnh đúng vào khung không? Mình cho ảnh to là nó cũng để thế luôn không tự động chỉnh cho size khớp với cái khung :(
    lenhan555 thích bài viết này
  6. boyplay

    boyplay Thành viên cấp 3

    Link demo bt mà nhỉ. Bạn thử dùng css làm cái tag img mặc định chuyển về kích thước của bạn xem. Mình ko giỏi về CSS, chỉ sưu tầm cho mọi người thôi ^^!
    pitlamgi thích bài viết này
  7. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Mary Lou thì đỉnh rồi .nhưng IE thì chắc ko ăn thua.
  8. boyplay

    boyplay Thành viên cấp 3

    Uhm. CSS3 thì IE nó nghỉ. Ko bik IE10 thì thế nào ??
  9. pitlamgi

    pitlamgi Banned

    mình cũng nghĩ như bạn nhưng chưa thử :D

    Để chiều thử xem thế nào :)
  10. thanh_rossi

    thanh_rossi Thành viên cấp 2

    IE nó ko theo chuẩn gì cả không biết các bản sau có khác hơn không .Webkit (Chrome,Safari,..) và Gecko (FireFOx) vẫn hỗ trợ nhiều tính năng mới nhất.
  11. sayhello

    sayhello Thành viên cấp 2

    Cái này làm trên wordpress có được k?
  12. boyplay

    boyplay Thành viên cấp 3

    Chỗ nào chèn đc CSS là đc hết bạn. Ăn thua ở bạn sửa lại như thế nào thôi ^^!
  13. xversion1

    xversion1 Thành viên cấp 3

  14. Phạm Gia Vang

    Phạm Gia Vang Thành viên cấp 1

    sao em click vô ảnh trả thấy gì nhỉ
  15. boyplay

    boyplay Thành viên cấp 3

    Bạn click vào đâu, ở demo hay ở của bạn, bạn dùng gì để click IE, FF Chrome ??. Ở đây chỉ dùng cho FF, Chrome hỗ trợ chưa tốt. IE thì nó ngu cái CSS3 lắm ko hỉu đâu
  16. Phạm Gia Vang

    Phạm Gia Vang Thành viên cấp 1

    À em xài chorme....hihi..chưa test trên FF
  17. lenhan555

    lenhan555 Thành viên cấp 2

    nếu cho đúng vào khung mình dùng <div> để bao quanh cái hình ảnh ấy
    pitlamgi thích bài viết này
  18. pitlamgi

    pitlamgi Banned

    bạn cho mình Yh giúp mình nhé :)
  19. nucuoinho

    nucuoinho Thành viên cấp 2

    Ơ sao mình dùng cả firefox & Chrome mà chả thaya cái hiệu ứng nào hết zạy ta:D
  20. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    :D Bao h nó hoạt động trên chrome mình sẽ áp dụng nó :v :v

Ủng hộ diễn đàn