X-Parallax by Martin Ivanov (@wemakesitesnet)!

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.

Download X-Parallax

Get it from its home page.

Adding X-Parallax to the Page

Please, refer to component's home page for detailed instructions or check the source of this page.

Customizing X-Parallax

You could easily customize X-Parallax with the different HTML attributes, it supports.

HTML Attributes of the <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.

HTML Attributes of the <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".

What are Web Components?

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.

What is a Parallax?

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.

Supported Browsers

All evergreen browsers plus Internet Explorer 10 and above.

About X-Parallax

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.