幻灯片/轮播

PageScroll - 全屏翻转3D轮播图jQuery插件

创客主机


jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件。该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果。

使用方法

在页面中引入jquery和jquery.mousewheel.min.js以及样式文件jquery.mousewheel.min.css和鼠标滚轮插件jquery.pageScroll3d.min.js。

  1. <link rel="stylesheet" href="jquery.pageScroll3d.min.css">
  2. <script src="path/to/jquery.min.js"></script>
  3. <script src="path/to/jquery.pageScroll3d.min.js"></script>
  4. <script src="path/to/jquery.mousewheel.min.js"></script>

HTML结构

该jQuery全屏3D轮播图的基本HTML结构如下:

  1. <main class="main-content">
  2.   <section>
  3.     <h1>Section 1</h1>
  4.   </section>
  5.   <section>
  6.     <h1>Section 2</h1>
  7.   </section>
  8.   <section>
  9.     <h1>Section 3</h1>
  10.   </section>
  11.   <section>
  12.     <h1>Section 4</h1>
  13.   </section>
  14. </main>

CSS样式

你可以为该jquery 3d轮播图设置自己的样式,例如:

  1. .s3d__side {
  2.   background-size: cover;
  3.   background-position: 50% 50%;
  4.   background-repeat: no-repeat;
  5. }
  6.  
  7. .s3d__side.active h1 { left: -1%; }
  8.  
  9. .s3d__side:nth-child(1) { background-image: url("1.jpg"); }
  10.  
  11. .s3d__side:nth-child(2) { background-image: url("2.jpg"); }
  12.  
  13. .s3d__side:nth-child(3) { background-image: url("3.jpg"); }
  14.  
  15. .s3d__side:nth-child(4) { background-image: url("4.jpg"); }
  16.  
  17. .s3d__side h1 {
  18.   display: inline-block;
  19.   position: absolute;
  20.   left: -100%;
  21.   bottom: 10%;
  22.   padding: .2% 1.5% .2% 2.5%;
  23.   background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
  24.   background: linear-gradient(-90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
  25.   color: #fff;
  26.   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  27.   border-radius: 1px;
  28.   -webkit-transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);
  29.   transition: left 1s cubic-bezier(0.175, 0.885, 0.32, 1.05);
  30. }

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jQuery全屏3D轮播图插件。

  1. $(document).ready(function() {
  2.  
  3.     $('.main-content').scroll3D();
  4.  
  5. });

Github地址:https://github.com/Leon1258/jQuery.PageScroll3D

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!