HTML5, CSS3 & JS Experiments

By Martin Ivanov

Parallax HTML5 Web Component

X-Parallax is a HTML Web Component, 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:

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

Not ready for HTML Web Components yet? Check the CSS3-only version of the parallax.

Demo

Click here to open X-Slides in a new tab.

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XParallax/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XParallax/classes/XParallax.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>X-Parallax Web Component by Martin Ivanov (@wemakesitesnet)</title>
        <meta name="description" content="Parallax HTML5 Web Component" />
        <meta name="keywords" content="html5 web components, html5 webcomponent, html5 parallax, html5 parallax scroll, css scroll parallax, parallax html5 page, parallax javascript" />
        <style>
        acidjs-xparallax
        {
            clip: rect(0, 0, 0, 0);
            position: absolute;
        }    
        </style>
    </head>
    <body>
        <acidjs-xparallax nav="top" animationspeed="2000" defaultslide="0">
            <acidjs-xparallax-slide label="X-Parallax" background="images/roots.jpg">
                <h1>X-Parallax by <a href="http://wemakesites.net" target="_blank">Martin Ivanov</a> 
                (<a href="https://twitter.com/wemakesitesnet" target="_blank">@wemakesitesnet</a>)!</h1>
                <p>X-Parallax is a <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">HTML5 WebComponent</a>, 
                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.</p>
                <p>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.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide label="Download" background="images/sea.jpg">
                <h1>Download X-Parallax</h1>
                <p>Get it from 
                its <a href="/x-parallax-html5-web-component.html" target="_blank">home page</a>.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide label="Installation" valign="middle" background="images/flowers.jpg">
                <h2>Adding X-Parallax to the Page</h2>
                <p>Please, refer to component's 
                <a href="http://experiments.wemakesites.net/x-parallax-html5-web-component.html" target="_blank">home page</a> 
                for detailed instructions or check the source of this page.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide align="left" valign="top" label="Customization" background="images/glass.jpg">
                <h2>Customizing X-Parallax</h2>
                <p>You could easily customize X-Parallax with the 
                different HTML attributes, it supports.</p>
                <h3>HTML Attributes of the <code><acidjs-xparallax /></code> tag:</h3>
                <div class="semi-transparent-panel">
                    <ul>
                        <li><code>nav</code>: Position of the navigation bar. 
                            Default: <code>"top"</code>. Other values 
                            are <code>"right"</code>, <code>"bottom"</code>, <code>"left"</code> 
                            or <code>"none"</code>. Setting <code>nav="none"</code> will 
                            not render the navigation bar.</li>
                            <li><code>animationspeed</code>: Slide speed in milliseconds. 
                            The default value is <code>"2000"</code>, i.e. 2 seconds.</li>
                            <li><code>defaultslide</code>: Zero-index visible slide on 
                            page load. The default value is <code>"0"</code>, i.e. the first slide.</li>
                    </ul>
                </div>
                <h3>HTML Attributes of the <code><acidjs-xparallax-slide /></code> tag:</h3>
                <div class="semi-transparent-panel">
                    <ul>
                        <li><code>label</code>: Navigation item label.</li>
                        <li><code>background</code>: Valid color value or image. Default value: <code>"#639"</code> 
                            (my thoughts are with you and your family, <a href="http://meyerweb.com/" target="_blank">Eric</a>).</li>
                        <li><code>align</code>: Horizontal alignment. Default: 
                            <code>"center"</code>. Other values: <code>"left"</code>, 
                            <code>"center"</code> or <code>"justify"</code>.</li>
                        <li><code>valign</code>: Vertical alignment. Default: <code>"middle"</code>. 
                            Other values: <code>"top"</code> or <code>"bottom"</code>.</li>
                    </ul>
                </div>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide label="HTML5 Web Components" align="left" background="images/broken.jpg">
                <h2>What are Web Components?</h2>
                <p>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.</p>
                <p>For lots more information about it, including articles and 
                presentations, check out <a href="http://webcomponents.org" target="_blank">webcomponents.org</a>.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide  label="The Parallax" valign="top" align="right" background="images/face.jpg">
                <h2>What is a Parallax?</h2>
                <p>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.</p>
                <p>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.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide  label="Supported Browsers" background="images/stormy.jpg">
                <h2>Supported Browsers</h2>
                <p>All <a href="http://eisenbergeffect.bluespire.com/evergreen-browsers/" target="_blank">evergreen browsers</a> 
                    plus Internet Explorer 10 and above.</p>
            </acidjs-xparallax-slide>
            <acidjs-xparallax-slide label="About" align="left" background="images/nebula.jpg">
                <h2>About X-Parallax</h2>
                <p>Created by <a href="http://wemakesites.net/" target="_blank">Martin Ivanov</a>.</p>
                <p>If you like this solution, you may also want to check my 
                <a href="http://experiments.wemakesites.net/" target="_blank">HTML5, CSS3 and JavaScript Experiments</a>, 
                <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
                <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
                <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
                <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
                 follow <a href="https://twitter.com/wemakesitesnet" target="_blank">@wemakesitesnet</a> 
                 or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
            </acidjs-xparallax-slide>
        </acidjs-xparallax>
        <script src="AcidJs.XParallax/lib/x-tag-components.js"></script>
        <link rel="import" href="AcidJs.XParallax/classes/XParallax.html" />
    </body>
</html>
/*
 * X-Parallax Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html,
body,
acidjs-xparallax,
acidjs-xparallax acidjs-xparallax-slide,
acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content
{
    height: 100vh;
}

acidjs-xparallax,
acidjs-xparallax acidjs-xparallax-slide,
acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content
{
    width: 100%;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input + span::after,
acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav input + span::before,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav input + span::before
{
    transition: all 300ms;
}

html,
body
{
    margin: 0;
}

acidjs-xparallax,
acidjs-xparallax acidjs-xparallax-slide
{
    display: block;
}

acidjs-xparallax acidjs-xparallax-slide, 
acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-background
{
    background-position: 50% 50%; 
    background-size: cover;  
}

a,
acidjs-xparallax acidjs-xparallax-slide
{
    color: #fff;
}

html,
acidjs-xparallax 
{
    overflow: hidden;
}

acidjs-xparallax ,
acidjs-xparallax ~ .acidjs-xparallax-nav
{
    font-family: "Open Sans", Helvetica, Sans-serif;
}

acidjs-xparallax 
{ 
    opacity: 0;
    position: static;
    display: block;
    cursor: default;
    background: #2c232e;
    perspective: 1px;
    transform-style: preserve-3d;
    transition: opacity 1s .5s;
}

acidjs-xparallax[ready]
{
    opacity: 1;
}

acidjs-xparallax  *
{
    font-weight: 400;
    outline: none;
}

acidjs-xparallax acidjs-xparallax-slide
{
    position: relative;
    height: 100%;
    transform-style: inherit;
    box-shadow: 0 -1px 20px 4px rgba(0, 0, 0, .75);
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-background
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

acidjs-xparallax acidjs-xparallax-slide:nth-child(odd) acidjs-xparallax-slide-background
{
    z-index: -1;
    margin-left: -10px;
    transform: translateZ(-1px) scale(2);
}

acidjs-xparallax acidjs-xparallax-slide:nth-child(even)
{
    background-attachment: fixed;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content
{
    display: table-cell;
    width: 100vw;
    padding: 5%;
    font-size: 3vmin;
    vertical-align: middle;
    text-align: center;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[valign="top"]
{
    vertical-align: top;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[valign="middle"]
{
    vertical-align: middle;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[valign="bottom"]
{
    vertical-align: bottom;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[align="left"]
{
    text-align: left;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[align="center"]
{
    text-align: center;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[align="right"]
{
    text-align: right;
}

acidjs-xparallax acidjs-xparallax-slide acidjs-xparallax-slide-content[align="justify"]
{
    text-align: justify;
}

acidjs-xparallax ~ .acidjs-xparallax-nav
{
    position: fixed;
    top: 0;
    text-align: center;
    width: 100%;
}

acidjs-xparallax ~ .acidjs-xparallax-nav *
{
    margin: 0;
    padding: 0;
}

acidjs-xparallax ~ .acidjs-xparallax-nav
{
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, .75);
}

acidjs-xparallax ~ .acidjs-xparallax-nav *
{
    display: inline-block;
}

acidjs-xparallax ~ .acidjs-xparallax-nav li
{
    line-height: 2em;
    vertical-align: middle;
    font-size: .8em;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input
{
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

acidjs-xparallax ~ .acidjs-xparallax-nav label
{
    cursor: pointer;
    display: inline-block;
    padding: 0 .75em;
    text-transform: uppercase;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input + span
{
    color: #663399;
    opacity: .5;
}

acidjs-xparallax ~ .acidjs-xparallax-nav label:hover span
{
    opacity: .75;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input + span::after
{
    content: "";
    display: block;
    margin: 0 0 2px;
    height: 4px;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input:checked + span
{
    opacity: 1;
}

acidjs-xparallax ~ .acidjs-xparallax-nav input:checked + span::after
{
    background: #663399;
}

acidjs-xparallax[nav="bottom"] ~ .acidjs-xparallax-nav
{
    top: auto;
    bottom: 0;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav
{
    top: 50%;
    left: 0;
    width: auto;
    text-align: left;
    transform: translatey(-50%);
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav *,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav *
{
    display: block;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav
{
    right: 0;
    left: auto;
    text-align: right;
}

acidjs-xparallax[nav="none"] ~ .acidjs-xparallax-nav
{
    display: none;
}

acidjs-xparallax[nav="none"]
{ 
    overflow-y: auto;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav
{
    background: none;
    box-shadow: none;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav li,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav li
{
    margin: .25em;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav span,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav span
{
    border: solid 2px #639;
    width: 2.1em;
    height: 2.1em;
    border-radius: 2.1em;
    opacity: 1;
    background: rgba(0, 0, 0, .75);
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav input + span::after,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav input + span::after
{
    display: block;
    margin: 4px 0 0 4.7px;
    height: 1.1em;
    width: 1.1em;
    border-radius: 1.1em;
    vertical-align: middle;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav input + span::before,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav input + span::before
{
    content: attr(data-label);
    position: absolute;
    z-index: 5;
    margin: 0 0 0 2.5em;
    opacity: 0;
    color: #fff;
    text-shadow: 1px 1px #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav input:checked + span::before,
acidjs-xparallax[nav="right"]  ~ .acidjs-xparallax-nav li:hover input + span::before,
acidjs-xparallax[nav="left"] ~ .acidjs-xparallax-nav input:checked + span::before,
acidjs-xparallax[nav="left"]  ~ .acidjs-xparallax-nav li:hover input + span::before
{
    opacity: 1;
}

acidjs-xparallax[nav="right"] ~ .acidjs-xparallax-nav input + span::before
{
    margin: 0;
    right: 3.5em;
}

acidjs-xparallax code
{
    font-family: Consolas, "Courier New", Courier, Monospace;
}

acidjs-xparallax .semi-transparent-panel
{
    border: solid 1px #fff;
    padding: .15em;
    background: rgba(0, 0, 0, .75);
    font-size: .75em;
    box-shadow: 4px 4px 7px 4px rgba(0, 0, 0, .5);
}