jQuery Fullscreen Vertical Slider with Parallax Effect - Download jQuery Fullscreen Vertical Slider with Parallax Effect

Download jQuery Fullscreen Vertical Slider with Parallax Effect

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Fullscreen Vertical Slider with Parallax Effect, hope it will help you in programming stack.

jQuery Fullscreen Vertical Slider with Parallax Effect - Download jQuery Fullscreen Vertical Slider with Parallax Effect
File Size: 2.73 KB
Views Total: 31852
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A cool, responsive, vertical, full page slider with a subtle background parallax scrolling effect, built using jQuery, lodash.js and several CSS3 properties.

How to use it:

1. Add content slides to the page slider.

view source
01 <div class="container">
02   <section class="background">
03     <div class="content-wrapper">
04       <p class="content-title">Section One</p>
05       <p class="content-subtitle">Subtitle One</p>
06     </div>
07   </section>
08   <section class="background">
09     <div class="content-wrapper">
10       <p class="content-title">Section Two</p>
11       <p class="content-subtitle">Subtitle Two</p>
12     </div>
13   </section>
14   <section class="background">
15     <div class="content-wrapper">
16       <p class="content-title">Section One</p>
17       <p class="content-subtitle">Subtitle Three</p>
18     </div>
19   </section>
20 </div>

2. The primary CSS / CSS3 rules.

view source
01 html, body { overflow: hidden; }
02  
03 .background {
04   background-size: cover;
05   background-repeat: no-repeat;
06   background-position: center center;
07   overflow: hidden;
08   will-change: transform;
09   -webkit-backface-visibility: hidden;
10   backface-visibility: hidden;
11   height: 130vh;
12   position: fixed;
13   width: 100%;
14   -webkit-transform: translateY(20vh);
15   -ms-transform: translateY(20vh);
16   transform: translateY(20vh);
17   -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
18   transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
19 }

3. Add background images to the slides

view source
01 .background:first-child {
02   background-image: url(1.jpg);
03   -webkit-transform: translateY(-10vh);
04   -ms-transform: translateY(-10vh);
05   transform: translateY(-10vh);
06 }
07  
08 .background:first-child .content-wrapper {
09   -webkit-transform: translateY(10vh);
10   -ms-transform: translateY(10vh);
11   transform: translateY(10vh);
12 }
13  
14 .background:nth-child(2) { background-image: url(2.jpg); }
15  
16 .background:nth-child(3) { background-image: url(3.jpg); }

4. Set stacking context of slides.

view source
01 .background:nth-child(1) { z-index: 2; }
02  
03 .background:nth-child(2) { z-index: 1; }
04  
05 .content-wrapper {
06   height: 100vh;
07   display: -webkit-box;
08   display: -webkit-flex;
09   display: -ms-flexbox;
10   display: flex;
11   -webkit-box-pack: center;
12   -webkit-justify-content: center;
13   -ms-flex-pack: center;
14   justify-content: center;
15   text-align: center;
16   -webkit-flex-flow: column nowrap;
17   -ms-flex-flow: column nowrap;
18   flex-flow: column nowrap;
19   color: #fff;
20   font-family: Montserrat;
21   text-transform: uppercase;
22   -webkit-transform: translateY(40vh);
23   -ms-transform: translateY(40vh);
24   transform: translateY(40vh);
25   will-change: transform;
26   -webkit-backface-visibility: hidden;
27   backface-visibility: hidden;
28   -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
29   transition: all 1.9s cubic-bezier(0.22 source : jqueryscript.net

Related posts: