Draggable Background Slideshow With jQuery GSAP Wavescroll - Download Draggable Background Slideshow With jQuery And GSAP - Wavescroll

Download Draggable Background Slideshow With jQuery And GSAP – Wavescroll

By Posted on

This time I will share jQuery Plugin and tutorial about Draggable Background Slideshow With jQuery And GSAP – Wavescroll, hope it will help you in programming stack.

Draggable Background Slideshow With jQuery GSAP Wavescroll - Download Draggable Background Slideshow With jQuery And GSAP - Wavescroll
File Size: 3.27 KB
Views Total: 2415
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



Wavescroll is a fancy, touchable slideshow which allows the use to scroll through a set of background images with a cool ‘Wavescroll’ animation effects. Supports drag, touch swipe and mouse scroll events. Built with jQuery, CSS3, requestAnimationFrame and GSAP’s TweenMax.js.

How t use it:

1. Build the html structure for the background slideshow.

view source
01 <div class="ws-pages">
02   <div class="ws-bgs">
03     <div class="ws-bg"></div>
04     <div class="ws-bg"></div>
05     <div class="ws-bg"></div>
06     <div class="ws-bg"></div>
07     <div class="ws-bg"></div>
08   </div>
09   <div class="ws-text">
10     <h2 class="ws-text__heading">
11       <span>This is Slide 1</span>
12     </h2>
13     <h2 class="ws-text__heading">
14       <span>This is Slide 2</span>
15     </h2>
16     <h2 class="ws-text__heading">
17       <span>This is Slide 3</span>
18     </h2>
19     <h2 class="ws-text__heading">
20       <span>This is Slide 4</span>
21     </h2>
22     <h2 class="ws-text__heading">
23       <span>This is Slide 5</span>
24       <span>The end</span>
25     </h2>
26   </div>
27 </div>

2. The primary CSS styles.

view source
01 .ws-pages {
02   overflow: hidden;
03   position: relative;
04   height: 100%;
05 }
06  
07 .ws-bgs {
08   position: relative;
09   height: 100%;
10 }
11  
12 .ws-bg {
13   height: 100%;
14   background-size: cover;
15   background-position: center center;
16 }
17  
18 .ws-pages.s--ready .ws-bg { background: none !important; }
19  
20 .ws-bg:after {
21   content: "";
22   display: table;
23   clear: both;
24 }
25  
26 .ws-bg__part {
27   overflow: hidden;
28   position: relative;
29   float: left;
30   width: 4.16667%;
31   height: 100%;
32   background-size: cover;
33   background-position: center center;
34   cursor: -webkit-grab;
35   cursor: grab;
36   -webkit-user-select: none;
37   -moz-user-select: none;
38   -ms-user-select: none;
39   user-select: none;
40 }
41  
42 .ws-bg__part:after {
43   content: "";
44   position: absolute;
45   top: 0;
46   width: 100vw;
47   height: 100%;
48   background: inherit;
49 }
50  
51 .ws-bg__part-1:after { left: 0vw; }
52  
53 .ws-bg__part-2:after { left: -4.16667vw; }
54  
55 .ws-bg__part-3:after { left: -8.33333vw; }
56  
57 .ws-bg__part-4:after { left: -12.5vw; }
58  
59 .ws-bg__part-5:after { left: -16.66667vw; }
60  
61 .ws-bg__part-6:after { left: -20.83333vw; }
62  
63 .ws-bg__part-7:after { left: -25vw; }
64  
65 .ws-bg__part-8:after { left: -29.16667vw; }
66  
67 .ws-bg__part-9:after { left: -33.33333vw; }
68  
69 .ws-bg__part-10:after { left: -37.5vw; }
70  
71 .ws-bg__part-11:after { left: -41.66667 source : jqueryscript.net

Related posts: