X-Parallax: New HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

A couple of days ago I blogged about an experiment in the creation of a purely CSS3-driven parallax effect, and ever since I started thinking of wrapping it as a custom HTML5 Web Component to avoid the hassle of class names and rules in setting the slide images or background color.

As a whole, I am very happy with the result, called X-Parallax. It is easy to configure, fully responsive and very fast. Below are a few screenshots, but if you want you may want to jump straight to the demo (acting also as a tutorial of how to use it) and download the code.

Usage

[html]
<acidjs-xparallax nav="top" animationspeed="2000" defaultslide="0">
    <acidjs-xparallax-slide label="X-Parallax" background="images/roots.jpg">
    <!– slide content –>
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Download" background="images/sea.jpg">
    <!– slide content –>
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="Installation" valign="middle" background="images/flowers.jpg">
    <!– slide content –>
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide align="left" valign="top" label="Customization" background="images/glass.jpg">
    <!– slide content –>
    </acidjs-xparallax-slide>
    <acidjs-xparallax-slide label="HTML5 Web Components" align="left" background="images/broken.jpg">
    <!– slide content –>
    </acidjs-xparallax-slide>
</acidjs-xparallax>
[/html]

Screenshots

Top Navigation Bar

x-parallax-top

Right Navigation Bar

x-parallax-right

Bottom Navigation Bar

x-parallax-bottom

Left Navigation Bar

x-parallax-left

Navigation Off

x-parallax-none

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".

Supported Browsers:

Evergreen browsers plus Internet Explorer 10 and above.

Check it on this page and have fun!

thumb

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Categories and Tags
Links

© 2006 - 2025 Martin Ivanov