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);
}