Repository: dixonandmoe/rellax
Branch: master
Commit: 9ed6cb0aae03
Files: 20
Total size: 101.4 KB
Directory structure:
gitextract__z1v1247/
├── .gitignore
├── LICENSE
├── README.md
├── absolute.html
├── bower.json
├── css/
│ └── main.css
├── demo.html
├── option.js
├── package.json
├── rellax.js
└── tests/
├── center.html
├── destroy.html
├── directions.html
├── horizontal.html
├── percentage.html
├── range.html
├── responsive-speeds.html
├── speed.html
├── style.html
└── wrapper.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
rellax-build.js
npm-debug.log
debug.log
# Latest bootstrap version
bootstrap.min_v4.css
# demo file with new bootstrap file
demo1.html
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2016 Dixon & Moe
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# RELLAX
[](https://www.npmjs.org/package/rellax)
[](https://bundlephobia.com/result?p=rellax)
[](https://bundlephobia.com/result?p=rellax)
Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. **Update:** Rellax now works on mobile (v1.0.0).
* [Demo Website](https://dixonandmoe.com/rellax/)
## Getting Started
### Using npm
`npm install rellax --save`
### Using yarn
`yarn add rellax`
### CDN
`<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>`
### Download Locally
if you're old school like us download and insert `rellax.min.js` in your html
```html
<div class="rellax">
I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
I’m extra slow and smooth
</div>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
// Accepts any class name
var rellax = new Rellax('.rellax');
</script>
```
```html
<script>
// Also can pass in optional settings block
var rellax = new Rellax('.rellax', {
speed: -2,
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false
});
</script>
```
## Features
### Speed
Use the `data-rellax-speed` attribute to set the speed of a `.rellax` element to something other than the default value (which is `-2`). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between `-10` and `10`.
#### Responsive Speed
Use responsive speed attributes for breakpoint levels that require a different speed. Defaults to the `data-rellax-speed` setting in unspecified breakpoints.
```html
<div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="-5" data-rellax-mobile-speed="3" data-rellax-tablet-speed="-8" data-rellax-desktop-speed="1">
I parallax at all different speeds depending on your screen width.
</div>
```
Pass an array of breakpoints. Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. Checkout the responsiveness of the [`demo`](https://dixonandmoe.com/rellax/)
```html
<script>
// This is the default setting
var rellax = new Rellax('.rellax', {
breakpoints: [576, 768, 1201]
});
</script>
```
### Centering
After some fantastic work from [@p-realinho](https://github.com/p-realinho), we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works.
There's two ways to implement centering, either on specific elements or as a global option.
1. #### Element-wise Centering
- Add the ```data-rellax-percentage="0.5"``` to a specific html element
```html
<div class="rellax" data-rellax-percentage="0.5">
I’m that default chill speed of "-2" and "centered"
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5">
I’m super fast!! And super centered!!
</div>
<div class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">
I’m extra slow and smooth, and hella centered.
</div>
```
2. #### Global Centering
- To activate the center feature in your whole html, add the code your `<script>` tag or JS file:
```html
<script>
// Center all the things!
var rellax = new Rellax('.rellax', {
center: true
});
</script>
```
### Z-index
If you want to sort your elements properly in the Z space, you can use the data-rellax-zindex property
```html
<div class="rellax">
I’m that default chill speed of "-2" and default z-index of 0
</div>
<div class="rellax" data-rellax-speed="7" data-rellax-zindex="5">
I’m super fast!! And on top of the previous element, I'm z-index 5!!
</div>
```
### Horizontal Parallax
Horizontal parallax is disabled by default. You can enable it by passing `horizontal: true` in the settings block.
This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically.
Note that this can work together at the same time with the default vertical parallax. If you do not want this, pass `vertical: false` in the settings block.
```html
<script>
// Adding horizantal parallax scrolling
var rellax = new Rellax('.rellax', {
// Activate horizantal scrolling
// Turned off by default
horizontal: true
//Deactivate vertical scrolling
vertical: false
});
</script>
```
### Custom Wrapper
By default, the position of parallax elements is determined via the scroll position of the body. Passing in the `wrapper` property will tell Rellax to watch that element instead.
```html
<script>
// Set wrapper to .custom-element instead of the body
var rellax = new Rellax('.rellax', {
wrapper: '.custom-element'
});
</script>
```
### Refresh
```html
<script>
// Start Rellax
var rellax = new Rellax('.rellax');
// Destroy and create again parallax with previous settings
rellax.refresh();
</script>
```
### Destroy
```html
<script>
// Start Rellax
var rellax = new Rellax('.rellax');
// End Rellax and reset parallax elements to their original positions
rellax.destroy();
</script>
```
### Callback
```html
<script>
// Start Rellax
var rellax = new Rellax('.rellax-blur-card', {
callback: function(positions) {
// callback every position change
console.log(positions);
}
});
</script>
```
### Target node
Instead of using a className you can use a node, handy when using React and you want to use `refs` instead of `className`.
```jsx
<div ref={ref => { this.rellaxRef = ref }}>
I’m that default chill speed of "-2"
</div>
var rellax = new Rellax(this.rellaxRef)
```
## In the Wild
If you're using Rellax in production, we'd love to list you here! Let us know: moe@dixonandmoe.com
- [Bowmore Scotch](https://www.bowmore.com/)
- [Generated Photos](https://generated.photos/)
- [How Much Does a Website Cost](https://designagency.io/)
- [Linux Man Pages](https://dashdash.io/)
- [Laws of UX](https://lawsofux.com/)
- [Finch](https://finch.io/)
- [Embedded Payroll](https://robotist.com/embedded-payroll-api)
- [Product Designer in San Francisco](https://moeamaya.com/)
- [EthWorks](http://ethworks.io/)
- [Lorem Ipsum Generator](https://loremipsumgenerator.com/)
- [Deeson](https://www.deeson.co.uk/)
## Development
In the spirit of lightweight javascript, the build processes (thus far) is lightweight also.
1. Open demo.html
2. Make code changes and refresh browser
3. Once feature is finished or bug fixed, use [jshint](http://jshint.com/) to lint code
4. Fix lint issues then use [Google Closure Compiler](https://closure-compiler.appspot.com/home) to minify
5. 🍻
## Changelog
- 1.7.1: Remove animation on destory [PR](https://github.com/dixonandmoe/rellax/pull/132)
- 1.7.0: Scroll position set relative to the wrapper [PR](https://github.com/dixonandmoe/rellax/pull/125)
================================================
FILE: absolute.html
================================================
<section>
<div class="absolute above" style="pointer-events: none;">
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-1">
<div
class="md-twitter rellax"
data-rellax-speed="1"
data-rellax-xs-speed="2"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-1 col-md-2">
<div
class="bt-green rellax"
data-rellax-speed="5"
data-rellax-xs-speed="3"
data-rellax-mobile-speed="4"
data-rellax-tablet-speed="5"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-0 col-md-1">
<div
class="md-dixonandmoe rellax"
data-rellax-speed="2"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="1"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-1">
<div
class="md-facebook rellax"
data-rellax-speed="3"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="3"
data-rellax-percentage="0.5"
style="transform: rotate(45deg);"
></div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="absolute above" style="pointer-events: none;">
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-1">
<div
class="md-twitter rellax"
data-rellax-speed="1"
data-rellax-xs-speed="2"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-1 col-md-2">
<div
class="bt-green rellax"
data-rellax-speed="5"
data-rellax-xs-speed="3"
data-rellax-mobile-speed="4"
data-rellax-tablet-speed="5"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-0 col-md-1">
<div
class="md-dixonandmoe rellax"
data-rellax-speed="2"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="1"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-1">
<div
class="md-facebook rellax"
data-rellax-speed="3"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="3"
data-rellax-percentage="0.5"
style="transform: rotate(45deg);"
></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="absolute above" style="pointer-events: none;">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-2">
<div
class="bt-green rellax"
data-rellax-speed="5"
data-rellax-xs-speed="3"
data-rellax-mobile-speed="4"
data-rellax-tablet-speed="5"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-0 col-md-1">
<div
class="md-dixonandmoe rellax"
data-rellax-speed="2"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="1"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-offset-5 col-md-1">
<div
class="md-twitter rellax"
data-rellax-speed="1"
data-rellax-xs-speed="2"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2"
style="transform: rotate(45deg);"
></div>
</div>
<div class="col-md-1">
<div
class="md-facebook rellax"
data-rellax-speed="3"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="2"
data-rellax-tablet-speed="3"
data-rellax-percentage="0.5"
style="transform: rotate(45deg);"
></div>
</div>
</div>
</div>
</div>
<div class="copy" style="margin-top: 200px;margin-bottom: 500px">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-6">
<h4>SERIOUSLY, WHY?!</h4>
<p>
Come on, how boring is the internet without excessive javascript? We
made this library since too many github repos are abandoned (RIP
skrollr) or feature creepy. You got some beef or caught us slippin
on unit tests, send rants and 10mb gifs to
<a href="mailto:moe@dixonandmoe.">moe@dixonandmoe.com</a>
</p>
</div>
</div>
<div class="row" style="margin-top: 140px">
<div class="col-md-offset-5 col-md-6">
<h4>BUT ACTUALLY</h4>
<p>
We've benefitted so much from open source projects that we're
actively trying to give back. As designers, we're starting by
releasing our own quirky js code.
</p>
</div>
</div>
</div>
</div>
</section>
================================================
FILE: bower.json
================================================
{
"name": "rellax",
"main": "rellax.js",
"version": "1.2.0",
"homepage": "https://dixonandmoe.com/rellax/",
"authors": [
"moeamaya <moeamaya@gmail.com>"
],
"description": "vanilla javascript parallax",
"moduleType": [],
"keywords": [
"parallax"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
================================================
FILE: css/main.css
================================================
html,
body {
margin: 0;
padding: 0;
font-family: "Source Sans Pro", sans-serif;
text-rendering: optimizeLegibility;
color: #222;
/* overflow-x: hidden; */
}
h4 {
font-size: 22px;
margin-bottom: 28px;
}
p {
font-size: 22px;
}
a,
a:active {
text-decoration: none;
color: #5000f1;
}
header h2 {
font-size: 15px;
font-weight: 900;
letter-spacing: 0.15em;
margin-top: 70px;
}
header a h2 {
color: #222;
}
header a h2 span {
transition: all 400ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
header a:hover h2 span {
color: #fff;
margin-left: 10px;
}
header .white-block {
margin-top: 20px;
width: 46px;
height: 6px;
background: #fff;
}
header .title {
margin-top: 80px;
}
header h1 {
font-size: 96px;
font-weight: 900;
letter-spacing: 0.12em;
margin: 0;
margin-left: -6px;
}
header h1 span {
display: inline-block;
font-size: 20px;
margin-top: 18px;
vertical-align: top;
letter-spacing: 0;
}
header .title a {
display: inline-block;
margin-top: 6px;
margin-right: -70px;
background: #222;
padding: 26px 80px;
color: #fff;
border-radius: 12px;
font-size: 26px;
letter-spacing: 0.2em;
transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
header .title a:hover {
margin-top: 12px;
margin-right: -80px;
padding: 20px 90px;
}
header h3 {
font-size: 21px;
}
/*----------------------------------
Background Grid
------------------------------------*/
.grid {
position: fixed;
width: 100%;
}
.grid-line {
height: 100vh;
border-left: 1px solid #ccc;
}
.fixed-top {
position: absolute;
width: 600px;
height: 600px;
background: #00f1c9;
border-radius: 12px;
z-index: -1;
margin-top: -220px;
margin-left: 100px;
}
/*----------------------------------
Main
------------------------------------*/
/* .main {
/* overflow: hidden; */
.section {
position: relative;
}
section.san-francisco {
margin-top: 100px;
}
.absolute {
position: absolute;
width: 100%;
height: auto;
margin-top: 100px;
}
.absolute.above {
z-index: 2;
}
.absolute h2 {
font-size: 140px;
font-weight: 900;
letter-spacing: -0.04em;
color: #f0f0f0;
z-index: -1;
}
.lg-green {
width: 160px;
height: 160px;
background: #00f1c9;
border-radius: 12px;
margin-left: -80px;
margin-top: 200px;
}
.sm-green {
width: 60px;
height: 60px;
background: #00f1c9;
border-radius: 12px;
margin-left: -30px;
margin-top: 400px;
}
.sm-purple {
width: 60px;
height: 60px;
background: #5000f1;
border-radius: 12px;
margin-left: -30px;
margin-top: 400px;
}
.xs-green {
width: 60px;
height: 60px;
background: #00f1c9;
border-radius: 12px;
margin-left: -30px;
margin-top: 400px;
}
.md-green {
width: 120px;
height: 120px;
background: #00f1c9;
border-radius: 12px;
margin-left: -60px;
margin-top: 10px;
}
.lg-purple {
width: 80px;
height: 80px;
background: #5000f1;
border-radius: 12px;
margin-left: 57px;
margin-top: 60px;
}
.date {
margin-top: 400px;
font-size: 48px;
font-weight: 600;
color: #5000f1;
}
.temp {
margin-top: 200px;
font-size: 280px;
font-weight: 900;
letter-spacing: -0.07em;
color: #5000f1;
}
.text-editor {
background: #222;
padding: 60px 50px;
border-radius: 12px;
}
code {
text-align: left;
padding: 0;
font-size: 22px;
background: none;
border-radius: 0;
color: #00f1c9;
}
.md-facebook {
width: 60px;
height: 60px;
background: #5000f1;
border-radius: 12px;
margin-left: 68px;
margin-top: 600px;
}
.md-twitter {
width: 120px;
height: 120px;
background: #00f1c9;
border-radius: 12px;
margin-left: -60px;
margin-top: 60px;
}
.md-dixonandmoe {
width: 120px;
height: 120px;
background: #5000f1;
border-radius: 12px;
margin-left: -60px;
margin-top: 760px;
}
.bt-green {
width: 60px;
height: 60px;
background: #00f1c9;
border-radius: 12px;
margin-left: -30px;
margin-top: 700px;
}
.bt-purple {
width: 80px;
height: 80px;
background: #5000f1;
border-radius: 12px;
margin-left: 57px;
margin-top: 600px;
}
.share {
position: relative;
top: 200px;
}
.share a {
font-size: 34px;
}
.share a span {
transition: all 400ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.share a:hover span {
margin-left: 10px;
}
a.dam,
a.dam:hover,
a.dam:active,
a.dam:visited {
color: #222;
}
span.comment {
color: rgba(255, 255, 255, 0.4);
}
span.purple {
color: #5000f1;
}
span.green {
color: #a0f100;
}
span.white {
color: #fff;
}
span.orange {
color: orange;
}
/* -------------------------------------------------------------------------- */
/* =====================options-menu and documentation======================= */
/* -------------------------------------------------------------------------- */
h2.heading {
font-size: 50px;
}
h3.heading {
font-size: 27px;
font-weight: bolder;
}
.documentation {
margin-top: 8rem;
}
.options {
border-radius: 12px;
border: 1px solid #ccc;
background-color: white;
width: 90%;
padding: 2.5rem;
margin-top: 4rem;
height: auto;
}
.options a {
display: block;
}
.options-text {
font-size: medium;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin: 1rem 0;
}
.options-text--margin {
margin-top: 3rem;
}
.options-title {
font-size: 24px;
padding: 1rem 0;
color: #222;
}
.sticky {
position: sticky;
top: 0;
z-index: 4;
}
/* Style the active class (and buttons on mouse-over) */
.active {
color: #5000f1;
}
.option:hover {
color: #00f1c9;
}
html {
scroll-behavior: smooth;
}
@keyframes fuzz /* Safari and Chrome */ {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
/*-webkit-transform: scaleY(1);*/
opacity: 1;
}
}
@keyframes fuzz2 /* Safari and Chrome */ {
0% {
opacity: 0;
}
48% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fuzz3 /* Safari and Chrome */ {
0% {
opacity: 0;
}
54% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes stretch /* Safari and Chrome */ {
0% {
-webkit-transform: scaleX(0);
opacity: 0;
}
50% {
-webkit-transform: scaleX(0);
opacity: 1;
}
60% {
-webkit-transform: scaleX(0);
}
100% {
-webkit-transform: scaleX(1);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0);
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*----------------------------------
Medium devices: iPad vertical
------------------------------------*/
@media (max-width: 991px) {
}
/*----------------------------------
Small devices: iPhone 6+ and below
------------------------------------*/
@media (max-width: 767px) {
.sticky {
display: none;
}
}
/*----------------------------------
iPhone 6 & 6+ specific text bump
------------------------------------*/
@media (max-width: 991px) and (max-height: 736px) and (min-height: 481px) {
.sticky {
display: none;
}
p {
text-align: justify;
}
}
================================================
FILE: demo.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vanilla Javascript Parallax Library - Rellax.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700,900' rel='stylesheet' type='text/css'>
<!-- Booooooootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
</head>
<body>
<div class="grid">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-2">
<div class="grid-line"></div>
</div>
<div class="col-md-2">
<div class="grid-line"></div>
</div>
<div class="col-md-2">
<div class="grid-line"></div>
</div>
<div class="col-md-2">
<div class="grid-line"></div>
</div>
<div class="col-md-2">
<div class="grid-line" style="margin-right:-30px;border-right:1px solid #ccc"></div>
</div>
</div>
</div>
</div>
<div class="fixed-top rellax" data-rellax-speed="-2" data-rellax-xs-speed="-5" data-rellax-mobile-speed="3"
data-rellax-tablet-speed="-8" style="transform: rotate(45deg);">
</div>
<main class="main">
<header>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-11">
<a href="http://dixonandmoe.com/">
<h2>BY DIXON & MOE <span>➔</span></h2>
</a>
<div class="white-block"></div>
</div>
</div>
<div class="title">
<div class="row">
<div class="col-md-offset-1 col-md-6">
<h1>RELLAX<span>JS</span></h1>
</div>
<div class="col-md-4 text-right">
<a href="https://github.com/dixonandmoe/rellax">GITHUB</a>
</div>
</div>
</div>
<div class="subtitle">
<div class="row">
<div class="col-md-offset-1 col-md-2">
<h3>Light (871b gz)</h3>
</div>
<div class="col-md-2">
<h3>Vanilla Javascript</h3>
</div>
<div class="col-md-2">
<h3>Parallax Library</h3>
</div>
</div>
</div>
</div>
</header>
<section class="section san-francisco">
<div class="absolute">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-11">
<h2 class="rellax" data-rellax-speed="-3" data-rellax-xs-speed="-5" data-rellax-mobile-speed="4"
data-rellax-tablet-speed="-3">
San Francisco<br>California
</h2>
</div>
</div>
</div>
</div>
<div class="absolute above">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-2">
<div class="lg-green rellax" data-rellax-speed="2" data-rellax-xs-speed="1" data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2" style="transform: rotate(45deg);">
</div>
<div class="sm-green rellax" data-rellax-speed="5" data-rellax-xs-speed="3" data-rellax-mobile-speed="4"
data-rellax-tablet-speed="5" style="transform: rotate(45deg);">
</div>
</div>
<div class="col-md-offset-2 col-md-1">
<div class="sm-purple rellax" data-rellax-speed="2" data-rellax-xs-speed="1" data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2" style="transform: rotate(45deg);">
</div>
</div>
<div class="col-md-offset-3 col-md-1">
<div class="xs-green rellax" data-rellax-speed="5" data-rellax-xs-speed="3" data-rellax-mobile-speed="4"
data-rellax-tablet-speed="5" style="transform: rotate(45deg);">
</div>
<div class="md-green rellax" data-rellax-speed="1" data-rellax-xs-speed="1" data-rellax-mobile-speed="2"
data-rellax-tablet-speed="2" style="transform: rotate(45deg);">
</div>
</div>
<div class="col-md-1">
<div class="lg-purple rellax" data-rellax-speed="3" data-rellax-xs-speed="2" data-rellax-mobile-speed="2"
data-rellax-tablet-speed="3" style="transform: rotate(45deg);">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5">
<div class="date">
Incorporated—<br>
1850<br><br>
37°47′N 122°25′W
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="temp">
68°
</div>
</div>
</div>
</div>
</section>
<section class="documentation">
<div class="container">
<section class="row">
<div class="col-md-4 sticky">
<div class="options" id="optnCard">
<p class="options-text disabled">Options</p>
<a href="#GettingStarted" class="option options-title active">Getting Started!</a>
<a class="option options-title" href="#Speed">Speed</a>
<a class="option options-title" href="#Centering">Centering</a>
<a class="option options-title" href="#ZIndex">Z-Index</a>
<a class="option options-title" href="#HorParlx">Horizontal Scrolling</a>
<!-- <span>➔</span> -->
<a class="option options-title" href="#CustomWrapper">Custom Wrapper</a>
<a class="option options-title" href="#TargetNode">Target Node</a>
<p class="options-text options-text--margin">Methods</p>
<a class="option options-title" href="#Refresh">Refresh</a>
<a class="option options-title" href="#Destroy">Destroy</a>
</div>
</div>
<div class="col-md-8">
<!-- Getting Started -->
<section class="section" id="GettingStarted">
<div style="margin-top: 6rem">
<div>
<!-- sect1 -->
<h2 class="heading">Getting Started!</h2>
<div class="text-editor">
<code>
<span class="orange">npm install rellax --save</span>
</code>
</div>
<p style="font-weight: lighter;">
or if you're old school like us, download and insert
<kbd><script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script></kbd> file in your project folder.
</p>
</div>
<div>
<!-- sect2 -->
<h3 class="heading">JavaScript (`accepts any class name`)</h3>
<div class="text-editor">
<code>
<span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax');
</code>
</div>
</div>
<div>
<!-- sect3 -->
<h3 class="heading">Basic Markup (Default Speed: -2)</h3>
<div class="text-editor">
<code>
<div <span class="purple">class</span>="<span class="green">rellax</span>"><br>
<span class="white"> I’m slow and smooth</span><br>
</div>
</code>
</div>
</div>
<div>
<!-- sect4 -->
<h3 class="heading">Optional Speed (-10 to +10)</h3>
<div class="text-editor">
<code>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">-3</span>"><br>
<span class="white"> I’m slow and smooth</span><br>
</div>
<br />
<br>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">7</span>"><br>
<span class="white"> I’m super fast!!</span><br>
</div>
<br />
<br>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">-5</span>"><br>
<span class="white"> I’m extra slow and smooth</span><br>
</div>
<br />
</code>
</div>
</div>
</div>
</section>
<!-- Speed -->
<section class="section" id="Speed">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Speed</h2>
<p style="font-weight: lighter;">
Use the <kbd>data-rellax-speed</kbd> attribute to set the speed of a
<kbd>.rellax</kbd> element to something other than the default value
(which is <kbd>-2</kbd>). A negative value will make it move slower
than regular scrolling, and a positive value will make it move faster.
We recommend keeping the speed between <kbd>-10 and +10</kbd>.
</p>
<div>
<!-- sect2 -->
<h3 class="heading">Responsive Speed</h3 style="margin-top: 4rem">
<p style="font-weight: lighter;">
Use responsive speed attributes for breakpoint levels that require a
different speed. Defaults to the <kbd>data-rellax-speed</kbd> setting
in unspecified breakpoints.
</p>
<div class="text-editor">
<code>
<div
<br> <span class="purple">class</span>="<span class="green">rellax</span>"
<br> <span class="purple">data-rellax-speed</span>="<span class="green">7</span>"
<br> <span class="purple">data-rellax-xs-speed</span>="<span class="green">-5</span>"
<br> <span class="purple">data-rellax-mobile-speed</span>="<span class="green">3</span>"
<br> <span class="purple">data-rellax-tablet-speed</span>="<span class="green">-8</span>"
<br> <span class="purple">data-rellax-desktop-speed</span>="<span class="green">1</span>"><br>
<span class="white"> I parallax at all different speeds depending on your screen width.</span><br>
</div>
</code>
</div>
<p style="font-weight: lighter;">
Pass an array of breakpoints. Each breakpoint value represents the
resolution for mobile, tablet, desktop respectively. Checkout the
responsiveness of the demo.
</p>
<div class="text-editor">
<code>
<script>
<br> <span class="comment">//default JS Setting</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax',
<span class="white">
{<br>
<span class="green">breakpoints:</span>[<span class="orange">576, 768, 1201</span>]
<br> }</span>);
<br />
</script>
</code>
</div>
</div>
</div>
</section>
<!-- Centering -->
<section class="section" id="Centering">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Centering</h2>
<p style="font-weight: lighter;">
After some fantastic work from <kbd><a style="color: orange;"
href="https://github.com/p-realinho">@p-realinho</a></kbd>, we
just released the ability to center parallax elements in your viewport!
We'll be building a nice demo website, but for now check out the tests
folder for several examples of how it works via our tests folder on
<a href="https://github.com/dixonandmoe/rellax">GitHub</a>.
</p>
<br>
<p style="font-weight: lighter;">
There's two ways to implement centering, either on specific elements or as a global option.
</p>
<div class="text-editor">
<code>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-percentage</span>="<span class="green">0.5</span>"><br>
<span class="white"> I’m that default chill speed of "-2" and "centered"</span><br>
</div>
<br />
<br>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">7</span>"
<br> <span class="purple">data-rellax-percentage</span>="<span class="green">0.5</span>"><br>
<span class="white"> I’m super fast!! And super centered!!</span><br>
</div>
<br />
<br>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">-4</span>"
<br> <span class="purple">data-rellax-percentage</span>="<span class="green">0.5</span>"><br>
<span class="white"> I’m extra slow and smooth, and hella centered.</span><br>
</div>
<br />
</code>
</div>
<div>
<!-- sect2 -->
<div style="margin-top: 5rem;">
<div class="text-editor">
<code>
<script>
<br> <span class="comment">//default JS Setting</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax',
<span class="white">
{<br>
<span class="green">center:</span><span class="orange">true</span>
<br> }</span>);
<br />
</script>
</code>
</div>
</div>
</div>
</div>
</section>
<!-- Z-index -->
<section class="section" id="ZIndex">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Z-Index</h2>
<p style="font-weight: lighter;">
If you want to sort your elements properly in the Z space,
you can use the <br><kbd>data-rellax-zindex</kbd> property.
</p>
<br>
<div class="text-editor">
<code>
<div <span class="purple">class</span>="<span class="green">rellax</span>"><br>
<span class="white"> I’m that default chill speed of "-2" and default z-index of 0</span><br>
</div>
<br />
<br>
<div <span class="purple">class</span>="<span class="green">rellax</span>" <span class="purple">data-rellax-speed</span>="<span class="green">7</span>"
<br> <span class="purple">data-rellax-zindex</span>="<span class="green">5</span>"><br>
<span class="white"> I’m super fast!! And on top of the previous element, I'm z-index 5!!</span><br>
</div>
<br />
</code>
</div>
</div>
</section>
<!-- Horizontal Parallax -->
<section class="section" id="HorParlx">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Horizontal Parallax</h2>
<p style="font-weight: lighter;">
Horizontal parallax is disabled by default. You can enable it by passing
<br><kbd><span class="orange">horizontal: true</span></kbd> in the settings
block. This feature is intended for panoramic style websites, where users
scroll horizontally instead of vertically. Note that this can work together
at the same time with the default vertical parallax. If you do not want this,
pass <kbd><span class="orange">vertical: false</span></kbd>.
</p>
<br>
<div class="text-editor">
<code>
<script>
<br> <span class="comment">//Enable Horizontal Parallax Scrolling</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax',
<span class="white">
{<br>
<span class="green">horizontal:</span><span class="orange">true</span>
</br ><br> <span class="comment">//Disable vertical Parallax Scrolling</span>
<span class="green">vertical:</span><span class="orange">false</span>
<br> }</span>);
<br />
</script>
</code>
</div>
</div>
</section>
<!-- Custom Wrapper -->
<section class="section" id="CustomWrapper">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Custom Wrapper</h2>
<p style="font-weight: lighter;">
By default, the position of parallax elements is determined via the scroll
position of the body. Passing in the <kbd><span class="orange">wrapper</span></kbd>
property in the settings block will tell Rellax to watch that element instead.
</p>
<br>
<div class="text-editor">
<code>
<script>
<br> <span class="comment">//Set wrapper to .custom-element instead of the body</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax',
<span class="white">
{<br>
<span class="green">wrapper:</span><span class="orange">'.custom-element'</span>
<br> }</span>);
<br />
</script>
</code>
</div>
</div>
</section>
<!-- Target Node -->
<section class="section" id="TargetNode">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Target Node</h2>
<p style="font-weight: lighter;">
Instead of using a className you can use a node, handy when using
React and you want to use <kbd><span class="orange">refs</span></kbd>
instead of <kbd><span class="orange">className</span></kbd>
</p>
<br>
<div class="text-editor">
<code>
<div <span class="purple">ref</span> = {<span class="purple">ref => </span>{ this<span class="green">.rellaxRef </span> = <span class="purple">ref</span>}}><br>
<span class="white"> I’m that default chill speed of "-2"</span><br>
</div>
</code>
<br />
</div>
<div style="margin-top: 5rem;">
<div class="text-editor">
<code>
<script>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>(this<span class="orange">.rellaxRef</span>);
<br>
</script>
</code>
</div>
</div>
</div>
</section>
<!-- Refresh -->
<section class="section" id="Refresh">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Refresh</h2>
<div class="text-editor">
<code>
<script>
<br> <span class="comment">// Start Rellax</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax');
<br />
<br> <span class="comment">// Destroy and create again parallax with previous settings</span>
<br> rellax<span class="orange">.refresh();</span>
<br>
</script>
</code>
</div>
</div>
</section>
<!-- Destroy -->
<section class="section" id="Destroy">
<div style="margin-top: 6rem">
<!-- sect1 -->
<h2 class="heading">Destroy</h2>
<div class="text-editor">
<code>
<script>
<br> <span class="comment">// Start Rellax</span>
<br> <span class="purple">var</span> rellax = <span class="green">new</span> <span class="white">Rellax</span>('.rellax');
<br />
<br> <span class="comment">// End Rellax and reset parallax elements to their original positions</span>
<br> rellax<span class="orange">.refresh();</span>
<br>
</script>
</code>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
<section class="share">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<a class="dam" href="http://dixonandmoe.com/">Dixon & Moe</a>
</div>
<div class="col-md-offset-3 col-md-2">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://dixonandmoe.com/rellax/">Share
<span>➔</span></a>
</div>
<div class="col-md-offset-0 col-md-2">
<a href="https://twitter.com/share?url=http://dixonandmoe.com/rellax/">Tweet <span>➔</span></a>
</div>
</div>
</div>
</section>
</main>
<!-- javascript -->
<script type="text/javascript" src="rellax.js"></script>
<script type="text/javascript" src="option.js"></script>
<script>
var rellax = new Rellax('.rellax', {
// center: true
callback: function (position) {
// callback every position change
console.log(position);
},
breakpoints: [576, 768, 1024]
});
</script>
</body>
</html>
================================================
FILE: option.js
================================================
// ============================================================
// To activate the active class on the links
// ============================================================
// Get the options menu element
var optnCard = document.getElementById("optnCard");
// Get all links with class="option" inside the menu
var optns = optnCard.getElementsByClassName("option");
// Loop through the links and add the active class to the current/clicked link
for (var i = 0; i < optns.length; i++) {
optns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
================================================
FILE: package.json
================================================
{
"name": "rellax",
"version": "1.12.1",
"description": "Lightweight, vanilla javascript parallax library",
"main": "rellax.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/dixonandmoe/rellax.git"
},
"keywords": [
"parallax"
],
"author": "Moe Amaya <moe@dixonandmoe.com> (https://dixonandmoe.com)",
"license": "MIT",
"bugs": {
"url": "https://github.com/dixonandmoe/rellax/issues"
},
"homepage": "https://dixonandmoe.com/rellax/"
}
================================================
FILE: rellax.js
================================================
// ------------------------------------------
// Rellax.js
// Buttery smooth parallax library
// Copyright (c) 2016 Moe Amaya (@moeamaya)
// MIT license
//
// Thanks to Paraxify.js and Jaime Cabllero
// for parallax concepts
// ------------------------------------------
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.Rellax = factory();
}
}(typeof window !== "undefined" ? window : global, function () {
var Rellax = function(el, options){
"use strict";
var self = Object.create(Rellax.prototype);
var posY = 0;
var screenY = 0;
var posX = 0;
var screenX = 0;
var blocks = [];
var pause = true;
// check what requestAnimationFrame to use, and if
// it's not supported, use the onscroll event
var loop = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback){ return setTimeout(callback, 1000 / 60); };
// store the id for later use
var loopId = null;
// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
// check what cancelAnimation method to use
var clearLoop = window.cancelAnimationFrame || window.mozCancelAnimationFrame || clearTimeout;
// check which transform property to use
var transformProp = window.transformProp || (function(){
var testEl = document.createElement('div');
if (testEl.style.transform === null) {
var vendors = ['Webkit', 'Moz', 'ms'];
for (var vendor in vendors) {
if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
return vendors[vendor] + 'Transform';
}
}
}
return 'transform';
})();
// Default Settings
self.options = {
speed: -2,
verticalSpeed: null,
horizontalSpeed: null,
breakpoints: [576, 768, 1201],
center: false,
wrapper: null,
relativeToWrapper: false,
round: true,
vertical: true,
horizontal: false,
verticalScrollAxis: "y",
horizontalScrollAxis: "x",
callback: function() {},
};
// User defined options (might have more in the future)
if (options){
Object.keys(options).forEach(function(key){
self.options[key] = options[key];
});
}
function validateCustomBreakpoints () {
if (self.options.breakpoints.length === 3 && Array.isArray(self.options.breakpoints)) {
var isAscending = true;
var isNumerical = true;
var lastVal;
self.options.breakpoints.forEach(function (i) {
if (typeof i !== 'number') isNumerical = false;
if (lastVal !== null) {
if (i < lastVal) isAscending = false;
}
lastVal = i;
});
if (isAscending && isNumerical) return;
}
// revert defaults if set incorrectly
self.options.breakpoints = [576, 768, 1201];
console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted");
}
if (options && options.breakpoints) {
validateCustomBreakpoints();
}
// By default, rellax class
if (!el) {
el = '.rellax';
}
// check if el is a className or a node
var elements = typeof el === 'string' ? document.querySelectorAll(el) : [el];
// Now query selector
if (elements.length > 0) {
self.elems = elements;
}
// The elements don't exist
else {
console.warn("Rellax: The elements you're trying to select don't exist.");
return;
}
// Has a wrapper and it exists
if (self.options.wrapper) {
if (!self.options.wrapper.nodeType) {
var wrapper = document.querySelector(self.options.wrapper);
if (wrapper) {
self.options.wrapper = wrapper;
} else {
console.warn("Rellax: The wrapper you're trying to use doesn't exist.");
return;
}
}
}
// set a placeholder for the current breakpoint
var currentBreakpoint;
// helper to determine current breakpoint
var getCurrentBreakpoint = function (w) {
var bp = self.options.breakpoints;
if (w < bp[0]) return 'xs';
if (w >= bp[0] && w < bp[1]) return 'sm';
if (w >= bp[1] && w < bp[2]) return 'md';
return 'lg';
};
// Get and cache initial position of all elements
var cacheBlocks = function() {
for (var i = 0; i < self.elems.length; i++){
var block = createBlock(self.elems[i]);
blocks.push(block);
}
};
// Let's kick this script off
// Build array for cached element values
var init = function() {
for (var i = 0; i < blocks.length; i++){
self.elems[i].style.cssText = blocks[i].style;
}
blocks = [];
screenY = window.innerHeight;
screenX = window.innerWidth;
currentBreakpoint = getCurrentBreakpoint(screenX);
setPosition();
cacheBlocks();
animate();
// If paused, unpause and set listener for window resizing events
if (pause) {
window.addEventListener('resize', init);
pause = false;
// Start the loop
update();
}
};
// We want to cache the parallax blocks'
// values: base, top, height, speed
// el: is dom object, return: el cache values
var createBlock = function(el) {
var dataPercentage = el.getAttribute( 'data-rellax-percentage' );
var dataSpeed = el.getAttribute( 'data-rellax-speed' );
var dataXsSpeed = el.getAttribute( 'data-rellax-xs-speed' );
var dataMobileSpeed = el.getAttribute( 'data-rellax-mobile-speed' );
var dataTabletSpeed = el.getAttribute( 'data-rellax-tablet-speed' );
var dataDesktopSpeed = el.getAttribute( 'data-rellax-desktop-speed' );
var dataVerticalSpeed = el.getAttribute('data-rellax-vertical-speed');
var dataHorizontalSpeed = el.getAttribute('data-rellax-horizontal-speed');
var dataVerticalScrollAxis = el.getAttribute('data-rellax-vertical-scroll-axis');
var dataHorizontalScrollAxis = el.getAttribute('data-rellax-horizontal-scroll-axis');
var dataZindex = el.getAttribute( 'data-rellax-zindex' ) || 0;
var dataMin = el.getAttribute( 'data-rellax-min' );
var dataMax = el.getAttribute( 'data-rellax-max' );
var dataMinX = el.getAttribute('data-rellax-min-x');
var dataMaxX = el.getAttribute('data-rellax-max-x');
var dataMinY = el.getAttribute('data-rellax-min-y');
var dataMaxY = el.getAttribute('data-rellax-max-y');
var mapBreakpoints;
var breakpoints = true;
if (!dataXsSpeed && !dataMobileSpeed && !dataTabletSpeed && !dataDesktopSpeed) {
breakpoints = false;
} else {
mapBreakpoints = {
'xs': dataXsSpeed,
'sm': dataMobileSpeed,
'md': dataTabletSpeed,
'lg': dataDesktopSpeed
};
}
// initializing at scrollY = 0 (top of browser), scrollX = 0 (left of browser)
// ensures elements are positioned based on HTML layout.
//
// If the element has the percentage attribute, the posY and posX needs to be
// the current scroll position's value, so that the elements are still positioned based on HTML layout
var wrapperPosY = self.options.wrapper ? self.options.wrapper.scrollTop : (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
// If the option relativeToWrapper is true, use the wrappers offset to top, subtracted from the current page scroll.
if (self.options.relativeToWrapper) {
var scrollPosY = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
wrapperPosY = scrollPosY - self.options.wrapper.offsetTop;
}
var posY = self.options.vertical ? ( dataPercentage || self.options.center ? wrapperPosY : 0 ) : 0;
var posX = self.options.horizontal ? ( dataPercentage || self.options.center ? self.options.wrapper ? self.options.wrapper.scrollLeft : (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0 ) : 0;
var blockTop = posY + el.getBoundingClientRect().top;
var blockHeight = el.clientHeight || el.offsetHeight || el.scrollHeight;
var blockLeft = posX + el.getBoundingClientRect().left;
var blockWidth = el.clientWidth || el.offsetWidth || el.scrollWidth;
// apparently parallax equation everyone uses
var percentageY = dataPercentage ? dataPercentage : (posY - blockTop + screenY) / (blockHeight + screenY);
var percentageX = dataPercentage ? dataPercentage : (posX - blockLeft + screenX) / (blockWidth + screenX);
if(self.options.center){ percentageX = 0.5; percentageY = 0.5; }
// Optional individual block speed as data attr, otherwise global speed
var speed = (breakpoints && mapBreakpoints[currentBreakpoint] !== null) ? Number(mapBreakpoints[currentBreakpoint]) : (dataSpeed ? dataSpeed : self.options.speed);
var verticalSpeed = dataVerticalSpeed ? dataVerticalSpeed : self.options.verticalSpeed;
var horizontalSpeed = dataHorizontalSpeed ? dataHorizontalSpeed : self.options.horizontalSpeed;
// Optional individual block movement axis direction as data attr, otherwise global movement direction
var verticalScrollAxis = dataVerticalScrollAxis ? dataVerticalScrollAxis : self.options.verticalScrollAxis;
var horizontalScrollAxis = dataHorizontalScrollAxis ? dataHorizontalScrollAxis : self.options.horizontalScrollAxis;
var bases = updatePosition(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed);
// ~~Store non-translate3d transforms~~
// Store inline styles and extract transforms
var style = el.style.cssText;
var transform = '';
// Check if there's an inline styled transform
var searchResult = /transform\s*:/i.exec(style);
if (searchResult) {
// Get the index of the transform
var index = searchResult.index;
// Trim the style to the transform point and get the following semi-colon index
var trimmedStyle = style.slice(index);
var delimiter = trimmedStyle.indexOf(';');
// Remove "transform" string and save the attribute
if (delimiter) {
transform = " " + trimmedStyle.slice(11, delimiter).replace(/\s/g,'');
} else {
transform = " " + trimmedStyle.slice(11).replace(/\s/g,'');
}
}
return {
baseX: bases.x,
baseY: bases.y,
top: blockTop,
left: blockLeft,
height: blockHeight,
width: blockWidth,
speed: speed,
verticalSpeed: verticalSpeed,
horizontalSpeed: horizontalSpeed,
verticalScrollAxis: verticalScrollAxis,
horizontalScrollAxis: horizontalScrollAxis,
style: style,
transform: transform,
zindex: dataZindex,
min: dataMin,
max: dataMax,
minX: dataMinX,
maxX: dataMaxX,
minY: dataMinY,
maxY: dataMaxY
};
};
// set scroll position (posY, posX)
// side effect method is not ideal, but okay for now
// returns true if the scroll changed, false if nothing happened
var setPosition = function() {
var oldY = posY;
var oldX = posX;
posY = self.options.wrapper ? self.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;
posX = self.options.wrapper ? self.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset;
// If option relativeToWrapper is true, use relative wrapper value instead.
if (self.options.relativeToWrapper) {
var scrollPosY = (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;
posY = scrollPosY - self.options.wrapper.offsetTop;
}
if (oldY != posY && self.options.vertical) {
// scroll changed, return true
return true;
}
if (oldX != posX && self.options.horizontal) {
// scroll changed, return true
return true;
}
// scroll did not change
return false;
};
// Ahh a pure function, gets new transform value
// based on scrollPosition and speed
// Allow for decimal pixel values
var updatePosition = function(percentageX, percentageY, speed, verticalSpeed, horizontalSpeed) {
var result = {};
var valueX = ((horizontalSpeed ? horizontalSpeed : speed) * (100 * (1 - percentageX)));
var valueY = ((verticalSpeed ? verticalSpeed : speed) * (100 * (1 - percentageY)));
result.x = self.options.round ? Math.round(valueX) : Math.round(valueX * 100) / 100;
result.y = self.options.round ? Math.round(valueY) : Math.round(valueY * 100) / 100;
return result;
};
// Remove event listeners and loop again
var deferredUpdate = function() {
window.removeEventListener('resize', deferredUpdate);
window.removeEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).removeEventListener('scroll', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : document).removeEventListener('touchmove', deferredUpdate);
// loop again
loopId = loop(update);
};
// Loop
var update = function() {
if (setPosition() && pause === false) {
animate();
// loop again
loopId = loop(update);
} else {
loopId = null;
// Don't animate until we get a position updating event
window.addEventListener('resize', deferredUpdate);
window.addEventListener('orientationchange', deferredUpdate);
(self.options.wrapper ? self.options.wrapper : window).addEventListener('scroll', deferredUpdate, supportsPassive ? { passive: true } : false);
(self.options.wrapper ? self.options.wrapper : document).addEventListener('touchmove', deferredUpdate, supportsPassive ? { passive: true } : false);
}
};
// Transform3d on parallax element
var animate = function() {
var positions;
for (var i = 0; i < self.elems.length; i++){
// Determine relevant movement directions
var verticalScrollAxis = blocks[i].verticalScrollAxis.toLowerCase();
var horizontalScrollAxis = blocks[i].horizontalScrollAxis.toLowerCase();
var verticalScrollX = verticalScrollAxis.indexOf("x") != -1 ? posY : 0;
var verticalScrollY = verticalScrollAxis.indexOf("y") != -1 ? posY : 0;
var horizontalScrollX = horizontalScrollAxis.indexOf("x") != -1 ? posX : 0;
var horizontalScrollY = horizontalScrollAxis.indexOf("y") != -1 ? posX : 0;
var percentageY = ((verticalScrollY + horizontalScrollY - blocks[i].top + screenY) / (blocks[i].height + screenY));
var percentageX = ((verticalScrollX + horizontalScrollX - blocks[i].left + screenX) / (blocks[i].width + screenX));
// Subtracting initialize value, so element stays in same spot as HTML
positions = updatePosition(percentageX, percentageY, blocks[i].speed, blocks[i].verticalSpeed, blocks[i].horizontalSpeed);
var positionY = positions.y - blocks[i].baseY;
var positionX = positions.x - blocks[i].baseX;
// The next two "if" blocks go like this:
// Check if a limit is defined (first "min", then "max");
// Check if we need to change the Y or the X
// (Currently working only if just one of the axes is enabled)
// Then, check if the new position is inside the allowed limit
// If so, use new position. If not, set position to limit.
// Check if a min limit is defined
if (blocks[i].min !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY <= blocks[i].min ? blocks[i].min : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX <= blocks[i].min ? blocks[i].min : positionX;
}
}
// Check if directional min limits are defined
if (blocks[i].minY != null) {
positionY = positionY <= blocks[i].minY ? blocks[i].minY : positionY;
}
if (blocks[i].minX != null) {
positionX = positionX <= blocks[i].minX ? blocks[i].minX : positionX;
}
// Check if a max limit is defined
if (blocks[i].max !== null) {
if (self.options.vertical && !self.options.horizontal) {
positionY = positionY >= blocks[i].max ? blocks[i].max : positionY;
}
if (self.options.horizontal && !self.options.vertical) {
positionX = positionX >= blocks[i].max ? blocks[i].max : positionX;
}
}
// Check if directional max limits are defined
if (blocks[i].maxY != null) {
positionY = positionY >= blocks[i].maxY ? blocks[i].maxY : positionY;
}
if (blocks[i].maxX != null) {
positionX = positionX >= blocks[i].maxX ? blocks[i].maxX : positionX;
}
var zindex = blocks[i].zindex;
// Move that element
// (Set the new translation and append initial inline transforms.)
var translate = 'translate3d(' + (self.options.horizontal ? positionX : '0') + 'px,' + (self.options.vertical ? positionY : '0') + 'px,' + zindex + 'px) ' + blocks[i].transform;
self.elems[i].style[transformProp] = translate;
}
self.options.callback(positions);
};
self.destroy = function() {
for (var i = 0; i < self.elems.length; i++){
self.elems[i].style.cssText = blocks[i].style;
}
// Remove resize event listener if not pause, and pause
if (!pause) {
window.removeEventListener('resize', init);
pause = true;
}
// Clear the animation loop to prevent possible memory leak
clearLoop(loopId);
loopId = null;
};
// Init
init();
// Allow to recalculate the initial values whenever we want
self.refresh = init;
return self;
};
return Rellax;
}));
================================================
FILE: tests/center.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
display: flex;
align-items: center;
outline: 1px solid #eed;
font-size: 42pt;
/*padding: 37.5vh 12.5vw;*/
padding: 0 12.5vw;
height: 200vh;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
/*padding: 0 42pt;*/
margin-top: 20vh;
height: 200px;
width: 400px;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h4>data-rellax-speed = default</h4>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#6</span></div></div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {center: true});
</script>
</body>
</html>
================================================
FILE: tests/destroy.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
display: flex;
align-items: center;
outline: 1px solid #eed;
font-size: 42pt;
/*padding: 37.5vh 12.5vw;*/
padding: 0 12.5vw;
height: 200vh;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
/*padding: 0 42pt;*/
margin-top: 20vh;
height: 200px;
width: 400px;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
button {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h4>cancelAnimation upon destroy <br><small>(check performance panel)</small></h4>
<button id="destroy">destroy</button>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#6</span></div></div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {
center: true,
callback: function(positions) {
// callback every position change
console.log(positions);
}
});
// test cancaelAnimation on Rellax destroy
document.querySelector('#destroy').addEventListener('click', function() {
rellax.destroy();
}, false);
</script>
</body>
</html>
================================================
FILE: tests/directions.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html,
body {
color: #223;
font-size: 21pt;
margin: 0;
padding: 0;
}
nav {
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0;
left: 0;
}
nav a {
color: inherit;
}
.col {
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4 {
text-align: center;
}
.container {
outline: 1px solid #eed;
font-size: 42pt;
padding: 37.5vh 12.5vw;
}
.block {
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
padding: 0 42pt;
position: relative;
}
span {
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h4>verticalScroll X / verticalScroll XY</h4>
<section>
<div class="col">
<div class="container">
<div class="block">#1<span class="rellax" data-rellax-vertical-scroll-axis="x">#1</span></div>
</div>
</div>
<div class="col">
<div class="container">
<div class="block">#1<span class="rellax" data-rellax-vertical-scroll-axis="xy">#1</span></div>
</div>
</div>
</section>
<h4>speedX = 3 / speedX = 1, speedY = 2</h4>
<h4>verticalScroll X / verticalScroll XY</h4>
<section>
<div class="col">
<div class="container">
<div class="block">#2<span class="rellax" data-rellax-horizontal-speed="3" data-rellax-vertical-scroll-axis="x">#2</span></div>
</div>
</div>
<div class="col">
<div class="container">
<div class="block">#2<span class="rellax" data-rellax-horizontal-speed="1" data-rellax-vertical-speed="2" data-rellax-vertical-scroll-axis="xy">#2</span></div>
</div>
</div>
</section>
<h4>MaxX 200 / MinX -215 MinY -300</h4>
<h4>verticalScroll X / verticalScroll XY</h4>
<section>
<div class="col">
<div class="container">
<div class="block">#3<span class="rellax" data-rellax-vertical-scroll-axis="x" data-rellax-max-x="200">#3</span></div>
</div>
</div>
<div class="col">
<div class="container">
<div class="block">#3<span class="rellax" data-rellax-speed="2" data-rellax-vertical-scroll-axis="xy" data-rellax-min-x="-215" data-rellax-min-y="-300">#3</span></div>
</div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {
horizontal: true,
});
</script>
</body>
</html>
================================================
FILE: tests/horizontal.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
body
{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
width: 400vw;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
section
{
width: 100vw;
height: 200vh;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, BB10 */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Firefox, Chrome */
}
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
outline: 1px solid #eed;
font-size: 42pt;
padding: 37.5vh 12.5vw;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
padding: 0 42pt;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<section>
<div class="col">
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="2">#1</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="-2">#1</span></div></div>
</div>
</section>
<section>
<div class="col">
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="4">#2</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="-4">#2</span></div></div>
</div>
</section>
<section>
<div class="col">
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="6" data-rellax-percentage="0.5">#3</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="-6" data-rellax-percentage="0.5">#3</span></div></div>
</div>
</section>
<section>
<div class="col">
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="8" data-rellax-percentage="0.5">#4</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="-8" data-rellax-percentage="0.5">#4</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {horizontal: true, vertical: true});
</script>
</body>
</html>
================================================
FILE: tests/percentage.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
outline: 1px solid #eed;
font-size: 42pt;
padding: 37.5vh 12.5vw;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
padding: 0 42pt;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h4>data-rellax-speed = default</h4>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5">#6</span></div></div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div id="21" class="container"><div class="block">#1<span class="rellax">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
</div>
</section>
<!-- /// -->
<h4>data-rellax-speed = 2</h4>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#1</span></div></div>
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#2</span></div></div>
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#3</span></div></div>
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#4</span></div></div>
<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#5</span></div></div>
<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="2" data-rellax-percentage="0.5">#6</span></div></div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="2">#1</span></div></div>
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="2">#2</span></div></div>
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="2">#3</span></div></div>
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="2">#4</span></div></div>
<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="2">#5</span></div></div>
<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="2">#6</span></div></div>
</div>
</section>
<!-- /// -->
<h4>Misc</h4>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="1" data-rellax-percentage="0.5">#1</span></div></div>
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="-1" data-rellax-percentage="0.5">#2</span></div></div>
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="4" data-rellax-percentage="0.5">#3</span></div></div>
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="-4" data-rellax-percentage="0.5">#4</span></div></div>
<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="0" data-rellax-percentage="0.5">#5</span></div></div>
<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="-10" data-rellax-percentage="0.5">#6</span></div></div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="1">#1</span></div></div>
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="-1">#2</span></div></div>
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="0">#3</span></div></div>
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="0">#4</span></div></div>
<div class="container"><div class="block">#5<span class="rellax" data-rellax-speed="0">#5</span></div></div>
<div class="container"><div class="block">#6<span class="rellax" data-rellax-speed="0">#6</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax();
</script>
</body>
</html>
================================================
FILE: tests/range.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body {
margin: 0; padding: 0;
font-family: monospace;
font-weight: bold;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; width: 100%;
padding: 60vh 0;
}
.rellax-container {
height: 25vmin; width: 25vmin;
position: relative;
background: #ccc;
margin: 0 3vmin;
box-shadow: inset 0 .5rem 4rem -1rem rgba(0,0,0,.8),
0 -119px 0 #fff,
0 -120px 0 #888,
0 119px 0 #fff,
0 120px 0 #888;
}
.rellax {
background: #123;
color: #fff;
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 .5rem 2rem -1rem rgba(0,0,0,1);
will-change: transform;
}
</style>
</head>
<body>
<div class="flex">
<div class="rellax-container">
<div class="rellax" data-rellax-speed="-5"> null </div>
</div>
<div class="rellax-container">
<div class="rellax" data-rellax-speed="-5" data-rellax-min="0">min: 0</div>
</div>
<div class="rellax-container">
<div class="rellax" data-rellax-speed="-5" data-rellax-min="-120" data-rellax-max="120">min: -120 | max: 120</div>
</div>
<div class="rellax-container">
<div class="rellax" data-rellax-speed="-5" data-rellax-max="120">max: 120</div>
</div>
</div>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {center: true});
</script>
</body>
</html>
================================================
FILE: tests/responsive-speeds.html
================================================
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Responsive Speeds</title>
<style>
html,
body {
color: #223;
font-size: 21pt;
margin: 0;
padding: 0;
}
section {
margin-top: 30vh;
width: 100vw;
height: 200vh;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, BB10 */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Firefox, Chrome */
}
h4 {
text-align: center;
}
.block {
background: #223;
position: relative;
padding-top: 45px;
width: 100%;
}
.block::before {
content: "Static BG - Mobile";
color: #fff;
position: absolute;
margin-left: 15px;
top: 0;
}
@media screen and (min-width: 768px) {
.block::before {
content: "Static BG - Tablet";
}
}
@media screen and (min-width: 1201px) {
.block::before {
content: "Static BG - Desktop";
}
}
span {
background: #eed;
color: #223;
text-align: left;
padding: 10px;
display: block;
width: 50%;
margin-left: 25%;
min-height: 100px;
box-sizing: border-box;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<section>
<div class="block">
<span
class="rellax"
data-rellax-speed="-2"
data-rellax-xs-speed="1"
data-rellax-mobile-speed="3"
data-rellax-tablet-speed="7"
data-rellax-desktop-speed="10"
>I move upwards faster on larger screens</span
>
<span
class="rellax"
data-rellax-speed="-2"
data-rellax-xs-speed="-1"
data-rellax-mobile-speed="-3"
data-rellax-tablet-speed="-7"
data-rellax-desktop-speed="-10"
>I move downwards faster on larger screens</span
>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax(".rellax", {
breakpoints: [200, 400, 600]
});
</script>
</body>
</html>
================================================
FILE: tests/speed.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
outline: 1px solid #eed;
font-size: 42pt;
padding: 37.5vh 12.5vw;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
padding: 0 42pt;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h4>speed = -1000 / speed = -10</h4>
<section>
<div class="col">
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="-1000">#1</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#1<span class="rellax" data-rellax-speed="-10">#1</span></div></div>
</div>
</section>
<h4>speed = 1000 / speed = 10</h4>
<section>
<div class="col">
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="1000">#2</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#2<span class="rellax" data-rellax-speed="10">#2</span></div></div>
</div>
</section>
<h4>percentage = 0.5</h4>
<h4>speed = -1000 / speed = -5</h4>
<section>
<div class="col">
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="-1000" data-rellax-percentage="0.5">#3</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#3<span class="rellax" data-rellax-speed="-5" data-rellax-percentage="0.5">#3</span></div></div>
</div>
</section>
<h4>percentage = 0.5</h4>
<h4>speed = 1000 / speed = 5</h4>
<section>
<div class="col">
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="1000" data-rellax-percentage="0.5">#4</span></div></div>
</div>
<div class="col">
<div class="container"><div class="block">#4<span class="rellax" data-rellax-speed="5" data-rellax-percentage="0.5">#4</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax();
</script>
</body>
</html>
================================================
FILE: tests/style.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body{
color: #223;
font-size: 21pt;
margin: 0; padding: 0;
}
nav{
font-size: 21pt;
line-height: 1.5em;
position: fixed;
bottom: 0; left: 0;
}
nav a{ color: inherit; }
.col{
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4{ text-align: center;}
.container{
outline: 1px solid #eed;
font-size: 42pt;
padding: 37.5vh 12.5vw;
}
.block{
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
padding: 0 42pt;
position: relative;
}
span{
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0; left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<section>
<div class="col">
<div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5" style="background:#b02; color:#fff;">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="background:#b02; color:#fff;">#6</span></div></div>
</div>
<div class="col">
<div id="21" class="container"><div class="block">#1<span class="rellax" style="background:#b02; color:#fff;">#1</span></div></div>
<div id="22" class="container"><div class="block">#2<span class="rellax">#2</span></div></div>
<div id="23" class="container"><div class="block">#3<span class="rellax">#3</span></div></div>
<div id="24" class="container"><div class="block">#4<span class="rellax" style="background:#b02; color:#fff;">#4</span></div></div>
<div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
<div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
</div>
</section>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax();
</script>
</body>
</html>
================================================
FILE: tests/wrapper.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html, body {
color: #223;
font-size: 21pt;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
}
.Layout__wrapper-container {
position: absolute;
width: 100%;
height: 100%;
}
.Layout__wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.Layout__main {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-content: space-between;
position: relative;
overflow-x: hidden;
overflow-y: auto;
flex-grow: 1;
z-index: 1;
}
.page-content {
max-width: 100vw;
flex: 100%;
}
.col {
text-align: center;
width: 50%;
float: left;
box-sizing: border-box;
}
h4 {
text-align: center;
}
.container {
display: flex;
align-items: center;
outline: 1px solid #eed;
font-size: 42pt;
padding: 0 12.5vw;
height: 200vh;
}
.block {
background: #223;
color: #eed;
line-height: 25vh;
text-align: right;
margin-top: 20vh;
height: 200px;
width: 400px;
position: relative;
}
span {
background: #eed;
color: #223;
line-height: 25vh;
text-align: left;
padding: 0 42pt;
display: block;
width: 50%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="Layout__wrapper-container">
<div class="Layout__wrapper">
<!-- Here can be fixed header -->
<main class="Layout__main">
<div class="page-content">
<h4>data-rellax-speed = default</h4>
<section>
<div class="col">
<br>With Percentage (0.5) <br><br>
<div class="container">
<div class="block">
#1<span class="rellax" data-rellax-percentage="0.5">#1</span>
</div>
</div>
<div class="container">
<div class="block">
#2<span class="rellax" data-rellax-percentage="0.5">#2</span>
</div>
</div>
<div class="container">
<div class="block">
#3<span class="rellax" data-rellax-percentage="0.5">#3</span>
</div>
</div>
<div class="container">
<div class="block">
#4<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#4</span>
</div>
</div>
<div class="container">
<div class="block">
#5<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#5</span>
</div>
</div>
<div class="container">
<div class="block">
#6<span class="rellax" data-rellax-percentage="0.5" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#6</span>
</div>
</div>
</div>
<div class="col">
<br>Without Percentage <br><br>
<div class="container">
<div class="block">
#1<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#1</span>
</div>
</div>
<div class="container">
<div class="block">
#2<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#2</span>
</div>
</div>
<div class="container">
<div class="block">
#3<span class="rellax" style="transition: transform 10s cubic-bezier(0,1,.5,1);">#3</span>
</div>
</div>
<div class="container">
<div class="block">
#4<span class="rellax">#4</span>
</div>
</div>
<div class="container">
<div class="block">
#5<span class="rellax">#5</span>
</div>
</div>
<div class="container">
<div class="block">
#6<span class="rellax">#6</span>
</div>
</div>
</div>
</section>
</div>
</div>
</main>
<!-- Here can be fixed footer -->
</div>
</div>
<!-- Scripts -->
<script src="../rellax.js"></script>
<script>
var rellax = new Rellax('.rellax', {
center: true,
wrapper: document.querySelector('.Layout__main') // or '.Layout__main'
});
</script>
</body>
</html>
gitextract__z1v1247/
├── .gitignore
├── LICENSE
├── README.md
├── absolute.html
├── bower.json
├── css/
│ └── main.css
├── demo.html
├── option.js
├── package.json
├── rellax.js
└── tests/
├── center.html
├── destroy.html
├── directions.html
├── horizontal.html
├── percentage.html
├── range.html
├── responsive-speeds.html
├── speed.html
├── style.html
└── wrapper.html
SYMBOL INDEX (1 symbols across 1 files)
FILE: rellax.js
function validateCustomBreakpoints (line 103) | function validateCustomBreakpoints () {
Condensed preview — 20 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (112K chars).
[
{
"path": ".gitignore",
"chars": 149,
"preview": ".DS_Store\n\nrellax-build.js\n\n\nnpm-debug.log\ndebug.log\n\n# Latest bootstrap version\nbootstrap.min_v4.css\n\n# demo file with "
},
{
"path": "LICENSE",
"chars": 1078,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2016 Dixon & Moe\n\nPermission is hereby granted, free of charge, to any person obtai"
},
{
"path": "README.md",
"chars": 7178,
"preview": "# RELLAX\n\n[](https://www.npmjs.org/package/rellax)\n[![Minified Si"
},
{
"path": "absolute.html",
"chars": 5620,
"preview": "<section>\n <div class=\"absolute above\" style=\"pointer-events: none;\">\n <div class=\"container\">\n <div class=\"row"
},
{
"path": "bower.json",
"chars": 397,
"preview": "{\n \"name\": \"rellax\",\n \"main\": \"rellax.js\",\n \"version\": \"1.2.0\",\n \"homepage\": \"https://dixonandmoe.com/rellax/\",\n \"a"
},
{
"path": "css/main.css",
"chars": 6972,
"preview": "html,\nbody {\n margin: 0;\n padding: 0;\n font-family: \"Source Sans Pro\", sans-serif;\n text-rendering: optimizeLegibili"
},
{
"path": "demo.html",
"chars": 25706,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,"
},
{
"path": "option.js",
"chars": 711,
"preview": "// ============================================================\n// To activate the active class on the links\n// ========"
},
{
"path": "package.json",
"chars": 570,
"preview": "{\n \"name\": \"rellax\",\n \"version\": \"1.12.1\",\n \"description\": \"Lightweight, vanilla javascript parallax library\",\n \"mai"
},
{
"path": "rellax.js",
"chars": 19146,
"preview": "\n// ------------------------------------------\n// Rellax.js\n// Buttery smooth parallax library\n// Copyright (c) 2016 Moe"
},
{
"path": "tests/center.html",
"chars": 3199,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/destroy.html",
"chars": 3683,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/directions.html",
"chars": 3453,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-widt"
},
{
"path": "tests/horizontal.html",
"chars": 3244,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "tests/percentage.html",
"chars": 6106,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/range.html",
"chars": 1701,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/responsive-speeds.html",
"chars": 2428,
"preview": "<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-sc"
},
{
"path": "tests/speed.html",
"chars": 2695,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/style.html",
"chars": 2699,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "tests/wrapper.html",
"chars": 7072,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
}
]
About this extraction
This page contains the full source code of the dixonandmoe/rellax GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 20 files (101.4 KB), approximately 28.4k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.