3D Gallery với CSS3 và jQuery Plugin : jquery.gallery.js

Xem: 1107    Tải: 9   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]3d-gallery-voi-css3-va-jquery.rar (272.61 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]3d-gallery-voi-css3-va-jquery.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Với 3D transforms , chúng ta có thể biến những phần tử đơn giản trở nên hấp dẫn hơn bằng cách ấn định chúng vào không gian 3 chiều. Cùng với CSS transitions, thì hiệu ứng 3D càng trở nên thực hơn rất nhiều, điều mà trước kia chúng ta chỉ có thể làm được bằng Flash. Trong bài viết này, mình sẽ chia sẻ cho các bạn cách làm hiệu ứng 3D Gallery đẹp mắt với sự kết hợp giữa CSS3 và jQuery Plugin : jquery.gallery.js.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Với 3D transforms , chúng ta có thể biến những phần tử đơn giản trở nên hấp dẫn hơn bằng cách ấn định chúng vào không gian 3 chiều. Cùng với CSS transitions, thì hiệu ứng 3D càng trở nên thực hơn rất nhiều, điều mà trước kia chúng ta chỉ có thể làm được bằng Flash.
Trong bài viết này, mình sẽ chia sẻ cho các bạn cách làm hiệu ứng 3D Gallery đẹp mắt với sự kết hợp giữa CSS3 và jQuery Plugin : jquery.gallery.js.

HTML

Đầu tiên , chúng ta cần có khung html để chứa các hình làm gallery như sau :

<section class="dg-container" id="dg-container">
<div class="dg-wrapper">
   <a href="#">
       <div class="dg-wrapper"><a href="#"><img alt="image01" src="images/1.jpg" /></a>
      <div>http://www.thuthuatweb.net/</div>
   </a>
 
   <a href="#">
       <img alt="image02" src="images/2.jpg" />
       <div>http://www.percivalclo.com/</div>
   </a>
 
   <a href="#">
       <img alt="image03" src="images/3.jpg" />
       <div>http://www.wanda.net/fr</div>
   </a>
 
   <a href="#">
      <img alt="image04" src="images/4.jpg" />
      <div>http://lifeingreenville.com/</div>
   </a>
 
   <a href="#">
      <img alt="image05" src="images/5.jpg" />
      <div>http://circlemeetups.com/</div>
   </a>
</div>
 
<nav>
  <span class="dg-prev">&lt;</span>
 <span class="dg-next">&gt;</span>
</nav>
 
</section>

CSS

Kế tiếp là chúng ta sẽ định dạng CSS cơ bản cho các phần tử tạo gallery

.dg-container{
    width: 100%;
    height: 450px;
    position: relative;
}
.dg-wrapper{
    width: 481px;
    height: 316px;
    margin: 0 auto;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.dg-wrapper a{
    width: 482px;
    height: 316px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url(../images/browser.png) no-repeat top left;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
    display: block;
    padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
    font-style: italic;
    text-align: center;
    line-height: 50px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    color: #333;
    font-size: 16px;
    width: 100%;
    bottom: -55px;
    display: none;
    position: absolute;
}
.dg-wrapper a.dg-center div{
    display: block;
}
.dg-container nav{
    width: 58px;
    position: absolute;
    z-index: 1000;
    bottom: 40px;
    left: 50%;
    margin-left: -29px;
}
.dg-container nav span{
    text-indent: -9000px;
    float: left;
    cursor:pointer;
    width: 24px;
    height: 25px;
    opacity: 0.8;
    background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
    opacity: 1;
}
.dg-container nav span.dg-next{
    background-position: top right;
    margin-left: 10px;
}

jQuery

Để hiệu ứng có thể chạy, chúng ta cần chèn thư viện jQuery, jquery.gallery.js và đoạn khai báo đơn giản như sau:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.gallery.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() {    
   $('#dg-container').gallery();
});
// ]]></script>

Plugin jquery.gallery.js các bạn có thể tải về tại phần download và để tùy chỉnh thêm hiệu ứng, các bạn có những lựa chọn sau cho phần khai báo :

current : 0,
// vị trí bắt đầu
autoplay : false,
// tự động chạy
interval : 2000
// thời gian chuyển giữa các hình

Ví dụ khai báo tự động chạy cho các hình ảnh như sau :

<script type="text/javascript">// <![CDATA[
$(function() {     
$('#dg-container').gallery({           
     autoplay:true
  });  
});
// ]]></script>

Mình hy vọng các bạn sẽ cảm thấy thích với hiệu ứng mà plugin này mang đến.

3D Gallery với CSS3 và jQuery Plugin : jquery.gallery.js

3D Gallery với CSS3 và jQuery Plugin : jquery.gallery.js Đăng ngày 21-08-2014  Với 3D transforms , chúng ta có thể biến những phần tử đơn giản trở nên hấp dẫn hơn bằng cách ấn định chúng vào không gian 3 chiều. Cùng với CSS transitions, thì hiệu ứng 3D càng trở nên thực hơn rất nhiều, điều mà trước kia chúng ta chỉ có thể làm được bằng Flash. Trong bài viết này, mình sẽ chia sẻ cho các bạn cách làm hiệu ứng 3D Gallery đẹp mắt với sự kết hợp giữa CSS3 và jQuery Plugin : jquery.gallery.js. 5/10 1107

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn