Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Parallax’

The abundance of single-page website layouts has become quite a hot ticket in recent years. I’ve been impressed to see developers jumping onto this trend releasing many free open source plugins and scripts. Parallax itself is defined as a change of perception in objects based on the viewpoint.

This can extend to parallax backgrounds, text, images, or other page elements. The recursive features of parallax design allow for extensible JavaScript plugins with easy-to-customize options. Any developer with an understanding of their idea can quickly implement the needed functionality by using any of these free open source scripts.

Parallax.js

open source library parallax js

Read the rest of this entry »

Parallax.js is a lightweight solution for creating parallax effects.

Besides mouse/cursor support, it works on mobile and tablet (where gyroscope or motion detection hardware is available) too.

It comes with multiple options for customizing the effect where they can be set inline using “data attributes” or in JavaScript.

The library can work standalone or as a jQuery and Zepto plugin (2 versions exist).

Parallax.js

Jarallax is a feature-rich JavaScript library for easily creating and customizing parallax scrolling effects.

The library enables us to manipulate CSS using keyframes and it supports custom controllers.

Jarallax

These controllers, compared to time-based animations, allows us to decide the events that animations will react to (scrolling, mouse gestures, etc.).

And, besides JavaScript animations, it can also use CSS-powered ones for a better performance.

P.S. The library makes use of jQuery.

Codrops, a creative web design and development blog, has created a detailed tutorial on creating a beautiful slider powered only by HTML and CSS3.

The slider not only uses the transition property but also changes the background-position of the given background images accordingly to create a parallax effect.

CSS3 Parallax Slideshow

Slides can be browsed either with the bullet-navigation (styled radio inputs) and/or with the prev-next links.

Both of the effects are very smooth and the slider adapts itself perfectly to any width (responsive).

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com