X-Parallax is a HTML5 WebComponent, wrapped as a custom tag that can be used to create awesome looking parallax home pages or one-pager websites. You don't need to be a JavaScript guru to use it. All you need to know is some basic HTML and CSS.
Use the navigation bar at the top to learn how to install and customize and and have it up and running in a couple of minutes.
Get it from its home page.
Please, refer to component's home page for detailed instructions or check the source of this page.
You could easily customize X-Parallax with the different HTML attributes, it supports.
<acidjs-xparallax /> tag:nav: Position of the navigation bar.
Default: "top". Other values
are "right", "bottom", "left"
or "none". Setting nav="none" will
not render the navigation bar.animationspeed: Slide speed in milliseconds.
The default value is "2000", i.e. 2 seconds.defaultslide: Zero-index visible slide on
page load. The default value is "0", i.e. the first slide.<acidjs-xparallax-slide /> tag:label: Navigation item label.background: Valid color value or image. Default value: "#639"
(my thoughts are with you and your family, Eric).align: Horizontal alignment. Default:
"center". Other values: "left",
"center" or "justify".valign: Vertical alignment. Default: "middle".
Other values: "top" or "bottom".Web Components are a collection of standards which are working their way through the W3C. They enable truly encapsulated and reusable components for the web. And if you think HTML5 changed the web, wait to see what Web Components will do.
For lots more information about it, including articles and presentations, check out webcomponents.org.
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
A simple everyday example of parallax can be seen in the dashboard of motor vehicles that use a needle-style speedometer gauge. When viewed from directly in front, the speed may show exactly 60; but when viewed from the passenger seat the needle may appear to show a slightly different speed, due to the angle of viewing.
All evergreen browsers plus Internet Explorer 10 and above.
Created by Martin Ivanov.
If you like this solution, you may also want to check my HTML5, CSS3 and JavaScript Experiments, personal wesbite, Semtex UI Framework, Acid.JS Web.UI, my blog, follow @wemakesitesnet or consider a donation.