#scrolling effect

Parallax scrolling is one of biggest trend in 2014. It's special scrolling technique that can be interpreted in many ways. Basically it's showing depth in 2d, and making some of elements looks like they are animated.

Parallax scroll has become mainstream, Ian Coyle created the very first parallax website for Nike "Nike Better World" on 2011, nowadays it is overused as a trendy effect but it is a great tool if it serves the user experience and is perfect for storytelling websites.

Parallax scrolling is a special scrolling technique in computer graphics, where in background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade gameMoon Patrol.

Parallax Scrolling websites mostly use html5, css, jquery and native javascript code to create this scrolling effect.

New Post has been published on http://www.htmluse.com/parallax-slider/

Parallax Slider

Download   Demo

This content slider incorporates a parallax scrolling effect where each slide and its contents glide into view at different speeds, creating a captivating visual experience. Visual intrigue aside, however, Parallax Slider is an easy to customize, responsive slider that can adapt to different screen and device sizes, by supporting a percentage value as its width.

Features

Entire contents of slider defined via HTML markup. Each slide consists of a  background image layer plus any number of content layers.  Each layer within the slide is glided in sequentially after a slight delay following the previous.

The Slider supports two orientations- horizontal (default), or vertical (up down scrolling) instead.

Slider supports either fixed or fluid (percentage) dimensions via CSS, allowing for a responsive slider.

Slider can be set to automatically rotate and optionally stopping after x cycles.

Persistence of last viewed slide supported, so when the user reloads the page, the slider resumes from the last slide.

Slider automatically pauses onMouseover.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="parallaxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.velocity.min.js"></script> <script type="text/javascript" src="jquery.touchSwipe.min.js"></script> <script src="parallaxslider.js" type="text/javascript">

2. HTML

<div id="myparallaxslider" class="parallaxslider"> <div class="slide"> <div class="bgoverlay" data-bgimage="zenrocks.jpg"></div> <div class="desc">A cairn is a man-made pile (or stack) of stones, used as trail markers in many parts of the world. -Wikipedia</div> <div class="desc"> <div style="position:absolute; bottom:15px; left:30px; width:250px; background:black; font:normal 105% Germand; padding:10px; font-style:italic; border-radius:10px; line-height:1.4em;"> “Letting go is the lesson. Letting go is always the lesson. Have you ever noticed how much of our agony is all tied up with craving and loss?” <br />- Susan Gordon Lydon </div> </div> </div> <div class="slide"> <div class="bgoverlay" data-bgimage="callalilies.jpg"></div> <div class="desc"> <div style="position:absolute; width:150px; right:10px; line-height:1.5em; background:#E2AF16; padding:10px; border-radius:7px">“The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant </div> </div> <div class="desc"> <div style="position:absolute; bottom:1em">Cally Lily is a perennial plant, evergreen where rainfall and temperatures are adequate. -Wikipedia </div> </div> </div> <div class="slide"> <div class="bgoverlay" data-bgimage="leaf.jpg"></div> <div class="desc"> <div style="position:absolute; top:40%; background:#754B08; font:normal 100% Germand; padding:10px; font-style:italic; border-radius:10px"> “Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way” <br /><br />Alan Wilson Watts </div> </div> </div> <div class="slide"> <div class="bgoverlay" data-bgimage="rowan.jpg"></div> <div class="desc" style="padding:0"> <img src="strip1.jpg" style="position:absolute; top:0; opacity:0.9" /> </div> <div class="desc" style="padding:0"> <img src="strip2.jpg" style="position:absolute; top:135px; opacity:0.9" /> </div> <div class="desc" style="padding:0"> <img src="strip3.jpg" style="position:absolute; top:259px; opacity:0.9" /> </div> </div> </div> <a href="javascript:firstparallaxslider.navigate('back')">Back</a> | <a href="javascript:firstparallaxslider.navigate('forth')">Forth</a>

Understanding the structure of the parallax slider’s markup

The slider’s markup consists of a main DIV with an unique ID and CSS class of =”parallaxslider”. Then for each slide, it consists of the following:

A <div class=”bgoverlay”> element to display a background image. Use the data-bgimage attribute to specify the full path to the background image, which is easier than using CSS’s style=”background:url(…)”, though the later method also works.

Any number of <div class=”desc”> elements to show arbitrary pieces of content that slide in one after the next. This DIV acts as a content holder, and should not be modified in any way via CSS, such as add padding/ margin or CSS positioning to it. Instead, define contents inside this DIV and stylize those contents to achieve the desired contents positioning and look. The following shows two examples of a slide’s markup, one correct, one incorrect:

Correct

<div class="desc"> <div style="position:absolute; width:150px; right:10px;"> “ The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant </div> </div>

Incorrect

<div class="desc" style="position:absolute; width:150px; right:10px;"> The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant </div>

So as you can see, the <div class=”desc”> tag itself should always be left untouched, with no style added to it.

All “bgoverlay” and “desc” DIV are animated into view in succession, with a delay as defined by options.delaybtwdesc between them.

3. JAVASCRIPT

Add the below code to the HEAD section of your page:

New Post has been published on http://www.htmluse.com/tilted-page-scroll/

Tilted Page Scroll

Download   Demo

Tilted Page Scroll is a jQuery plugin that Creates a beautilful 3D tilted scrolling effect for your website.

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

1. INCLUDE JS AND CSS FILES

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.tiltedpage-scroll.js"></script> <link href='tiltedpage-scroll.css' rel='stylesheet' type='text/css'>

2. HTML

<div class="main"> <section class="page1"> ... </section> <section class="page2"> ... </section> ... <section class="last-page"> ... </section> </div>

3. JAVASCRIPT