add paralax
This commit is contained in:
parent
b09b309abd
commit
a8838049a7
21
node_modules/rellax/LICENSE
generated
vendored
Normal file
21
node_modules/rellax/LICENSE
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
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.
|
||||
195
node_modules/rellax/README.md
generated
vendored
Normal file
195
node_modules/rellax/README.md
generated
vendored
Normal file
@ -0,0 +1,195 @@
|
||||
# RELLAX
|
||||
|
||||
[](https://www.npmjs.org/package/rellax)
|
||||
[](https://bundlephobia.com/result?p=rellax)
|
||||
[](https://bundlephobia.com/result?p=rellax)
|
||||
[](https://twitter.com/dixonandmoe)
|
||||
|
||||
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/)
|
||||
|
||||
Have any suggestions or feedback? Reach out [@dixonandmoe](https://twitter.com/dixonandmoe)
|
||||
|
||||
## Getting Started
|
||||
`npm install rellax --save` or if you're old school like us download and insert `rellax.min.js`
|
||||
|
||||
```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="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 (mobile, tablet and desktop respectively).
|
||||
```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.
|
||||
```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>
|
||||
```
|
||||
```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.
|
||||
|
||||
### 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
|
||||
- [Microsoft Fluent](https://fluent.microsoft.com/)
|
||||
- [Gucci Gift](http://gift.gucci.com/)
|
||||
- [Bowmore Scotch](https://www.bowmore.com/)
|
||||
- [How Much Does a Website Cost](https://designagency.io/)
|
||||
- [Laws of UX](https://lawsofux.com/)
|
||||
- [Finch](https://finch.io/)
|
||||
- [Product Designer in San Francisco](https://moeamaya.com/)
|
||||
- [Cool Backgrounds](https://coolbackgrounds.io/)
|
||||
- [EthWorks](http://ethworks.io/)
|
||||
- [Unlimited Designs](https://servicelist.io/)
|
||||
- [Airgora](https://www.airgora.com/competition)
|
||||
- [Lorem Ipsum Generator](https://loremipsumgenerator.com/)
|
||||
- [Terry Design](http://terrydesign.co.uk/)
|
||||
- [Deeson](https://www.deeson.co.uk/)
|
||||
- [Alex Bailon Portfolio](http://www.iambailon.com/)
|
||||
|
||||
## 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)
|
||||
22
node_modules/rellax/bower.json
generated
vendored
Normal file
22
node_modules/rellax/bower.json
generated
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
5
node_modules/rellax/css/bootstrap.min.css
generated
vendored
Normal file
5
node_modules/rellax/css/bootstrap.min.css
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
420
node_modules/rellax/css/main.css
generated
vendored
Normal file
420
node_modules/rellax/css/main.css
generated
vendored
Normal file
@ -0,0 +1,420 @@
|
||||
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:hover,
|
||||
a:active,
|
||||
a:visited {
|
||||
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,
|
||||
.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;
|
||||
margin-left: 15px;
|
||||
}
|
||||
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: -240px;
|
||||
}
|
||||
.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.purple {
|
||||
color: #5000F1;
|
||||
}
|
||||
span.green {
|
||||
color: #A0F100;
|
||||
}
|
||||
span.white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fuzz /* Safari and Chrome */ {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
/*-webkit-transform: scaleY(1);*/
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fuzz2 /* Safari and Chrome */ {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
48% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fuzz3 /* Safari and Chrome */ {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
54% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@-webkit-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);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-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) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------------
|
||||
iPhone 6 & 6+ specific text bump
|
||||
------------------------------------*/
|
||||
|
||||
@media (max-width: 991px) and (max-height: 736px) and (min-height: 481px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
329
node_modules/rellax/demo.html
generated
vendored
Normal file
329
node_modules/rellax/demo.html
generated
vendored
Normal file
@ -0,0 +1,329 @@
|
||||
<!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"
|
||||
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">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"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
<div class="sm-green rellax"
|
||||
data-rellax-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"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-offset-3 col-md-1">
|
||||
<div class="xs-green rellax"
|
||||
data-rellax-speed="5"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
<div class="md-green rellax"
|
||||
data-rellax-speed="1"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-1">
|
||||
<div class="lg-purple rellax"
|
||||
data-rellax-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="section">
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div style="margin-top: 200px">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<h4>JAVASCRIPT (ACCEPTS ANY CLASS NAME)</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<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>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center" style="margin-top:80px">
|
||||
<h4>BASIC MARKUP (DEFAULT SPEED: -2)</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<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>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center" style="margin-top:40px">
|
||||
<h4>OPTIONAL SPEED (-10 to +10) (+ RESPONSIVE SPEEDS)</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-offset-2 col-md-8">
|
||||
<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">6</span>"><br>
|
||||
<span class="white"> I’m slow and smooth</span><br>
|
||||
</div>
|
||||
</code>
|
||||
</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"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-offset-0 col-md-1">
|
||||
<div class="md-dixonandmoe rellax"
|
||||
data-rellax-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"
|
||||
style="transform: rotate(45deg);">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-1">
|
||||
<div class="md-facebook rellax"
|
||||
data-rellax-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>
|
||||
|
||||
<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>
|
||||
var rellax = new Rellax('.rellax', {
|
||||
// center: true
|
||||
callback: function(position) {
|
||||
// callback every position change
|
||||
console.log(position);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
52
node_modules/rellax/package.json
generated
vendored
Normal file
52
node_modules/rellax/package.json
generated
vendored
Normal file
@ -0,0 +1,52 @@
|
||||
{
|
||||
"_from": "rellax",
|
||||
"_id": "rellax@1.12.1",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==",
|
||||
"_location": "/rellax",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "tag",
|
||||
"registry": true,
|
||||
"raw": "rellax",
|
||||
"name": "rellax",
|
||||
"escapedName": "rellax",
|
||||
"rawSpec": "",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "latest"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/rellax/-/rellax-1.12.1.tgz",
|
||||
"_shasum": "1b433ef7ac4aa3573449a33efab391c112f6b34d",
|
||||
"_spec": "rellax",
|
||||
"_where": "/home/kevin/Documents/Developer/docker/docker-lamine_wp/wwwroot/html",
|
||||
"author": {
|
||||
"name": "Moe Amaya",
|
||||
"email": "moe@dixonandmoe.com",
|
||||
"url": "https://dixonandmoe.com"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/dixonandmoe/rellax/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"deprecated": false,
|
||||
"description": "Lightweight, vanilla javascript parallax library",
|
||||
"homepage": "https://dixonandmoe.com/rellax/",
|
||||
"keywords": [
|
||||
"parallax"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "rellax.js",
|
||||
"name": "rellax",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/dixonandmoe/rellax.git"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"version": "1.12.1"
|
||||
}
|
||||
497
node_modules/rellax/rellax.js
generated
vendored
Normal file
497
node_modules/rellax/rellax.js
generated
vendored
Normal file
@ -0,0 +1,497 @@
|
||||
|
||||
// ------------------------------------------
|
||||
// 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 dataVericalScrollAxis = 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 gobal movement direction
|
||||
var verticalScrollAxis = dataVericalScrollAxis ? dataVericalScrollAxis : 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;
|
||||
}));
|
||||
14
node_modules/rellax/rellax.min.js
generated
vendored
Normal file
14
node_modules/rellax/rellax.min.js
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
(function(q,g){"function"===typeof define&&define.amd?define([],g):"object"===typeof module&&module.exports?module.exports=g():q.Rellax=g()})("undefined"!==typeof window?window:global,function(){var q=function(g,u){function C(){if(3===a.options.breakpoints.length&&Array.isArray(a.options.breakpoints)){var f=!0,c=!0,b;a.options.breakpoints.forEach(function(a){"number"!==typeof a&&(c=!1);null!==b&&a<b&&(f=!1);b=a});if(f&&c)return}a.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")}
|
||||
var a=Object.create(q.prototype),l=0,v=0,m=0,n=0,d=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},p=null,x=!1;try{var k=Object.defineProperty({},"passive",{get:function(){x=!0}});window.addEventListener("testPassive",null,k);window.removeEventListener("testPassive",null,k)}catch(f){}var D=window.cancelAnimationFrame||window.mozCancelAnimationFrame||
|
||||
clearTimeout,E=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var c=["Webkit","Moz","ms"],b;for(b in c)if(void 0!==a.style[c[b]+"Transform"])return c[b]+"Transform"}return"transform"}();a.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};u&&Object.keys(u).forEach(function(d){a.options[d]=
|
||||
u[d]});u&&u.breakpoints&&C();g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){a.elems=k;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(k=document.querySelector(a.options.wrapper))a.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var F,B=function(){for(var f=0;f<d.length;f++)a.elems[f].style.cssText=d[f].style;d=[];v=window.innerHeight;n=window.innerWidth;f=a.options.breakpoints;F=n<f[0]?"xs":n>=f[0]&&n<
|
||||
f[1]?"sm":n>=f[1]&&n<f[2]?"md":"lg";H();for(f=0;f<a.elems.length;f++){var c=void 0,b=a.elems[f],e=b.getAttribute("data-rellax-percentage"),y=b.getAttribute("data-rellax-speed"),t=b.getAttribute("data-rellax-xs-speed"),g=b.getAttribute("data-rellax-mobile-speed"),h=b.getAttribute("data-rellax-tablet-speed"),k=b.getAttribute("data-rellax-desktop-speed"),l=b.getAttribute("data-rellax-vertical-speed"),m=b.getAttribute("data-rellax-horizontal-speed"),p=b.getAttribute("data-rellax-vertical-scroll-axis"),
|
||||
q=b.getAttribute("data-rellax-horizontal-scroll-axis"),u=b.getAttribute("data-rellax-zindex")||0,x=b.getAttribute("data-rellax-min"),A=b.getAttribute("data-rellax-max"),C=b.getAttribute("data-rellax-min-x"),D=b.getAttribute("data-rellax-max-x"),E=b.getAttribute("data-rellax-min-y"),L=b.getAttribute("data-rellax-max-y"),r=!0;t||g||h||k?c={xs:t,sm:g,md:h,lg:k}:r=!1;t=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&
|
||||
(t=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var z=a.options.vertical?e||a.options.center?t:0:0,I=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;t=z+b.getBoundingClientRect().top;g=b.clientHeight||b.offsetHeight||b.scrollHeight;h=I+b.getBoundingClientRect().left;k=b.clientWidth||b.offsetWidth||b.scrollWidth;
|
||||
z=e?e:(z-t+v)/(g+v);e=e?e:(I-h+n)/(k+n);a.options.center&&(z=e=.5);c=r&&null!==c[F]?Number(c[F]):y?y:a.options.speed;l=l?l:a.options.verticalSpeed;m=m?m:a.options.horizontalSpeed;p=p?p:a.options.verticalScrollAxis;q=q?q:a.options.horizontalScrollAxis;y=J(e,z,c,l,m);b=b.style.cssText;r="";if(e=/transform\s*:/i.exec(b))r=b.slice(e.index),r=(e=r.indexOf(";"))?" "+r.slice(11,e).replace(/\s/g,""):" "+r.slice(11).replace(/\s/g,"");d.push({baseX:y.x,baseY:y.y,top:t,left:h,height:g,width:k,speed:c,verticalSpeed:l,
|
||||
horizontalSpeed:m,verticalScrollAxis:p,horizontalScrollAxis:q,style:b,transform:r,zindex:u,min:x,max:A,minX:C,maxX:D,minY:E,maxY:L})}K();w&&(window.addEventListener("resize",B),w=!1,G())},H=function(){var d=l,c=m;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;m=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;
|
||||
a.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||c!=m&&a.options.horizontal?!0:!1},J=function(d,c,b,e,g){var f={};d=100*(g?g:b)*(1-d);c=100*(e?e:b)*(1-c);f.x=a.options.round?Math.round(d):Math.round(100*d)/100;f.y=a.options.round?Math.round(c):Math.round(100*c)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",
|
||||
h);(a.options.wrapper?a.options.wrapper:window).removeEventListener("scroll",h);(a.options.wrapper?a.options.wrapper:document).removeEventListener("touchmove",h);p=A(G)},G=function(){H()&&!1===w?(K(),p=A(G)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(a.options.wrapper?a.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(a.options.wrapper?a.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},K=function(){for(var f,
|
||||
c=0;c<a.elems.length;c++){var b=d[c].verticalScrollAxis.toLowerCase(),e=d[c].horizontalScrollAxis.toLowerCase();f=-1!=b.indexOf("x")?l:0;b=-1!=b.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?m:0;e=-1!=e.indexOf("y")?m:0;f=J((f+g-d[c].left+n)/(d[c].width+n),(b+e-d[c].top+v)/(d[c].height+v),d[c].speed,d[c].verticalSpeed,d[c].horizontalSpeed);e=f.y-d[c].baseY;b=f.x-d[c].baseX;null!==d[c].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=d[c].min?d[c].min:e),a.options.horizontal&&!a.options.vertical&&
|
||||
(b=b<=d[c].min?d[c].min:b));null!=d[c].minY&&(e=e<=d[c].minY?d[c].minY:e);null!=d[c].minX&&(b=b<=d[c].minX?d[c].minX:b);null!==d[c].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=d[c].max?d[c].max:e),a.options.horizontal&&!a.options.vertical&&(b=b>=d[c].max?d[c].max:b));null!=d[c].maxY&&(e=e>=d[c].maxY?d[c].maxY:e);null!=d[c].maxX&&(b=b>=d[c].maxX?d[c].maxX:b);a.elems[c].style[E]="translate3d("+(a.options.horizontal?b:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+d[c].zindex+"px) "+d[c].transform}a.options.callback(f)};
|
||||
a.destroy=function(){for(var f=0;f<a.elems.length;f++)a.elems[f].style.cssText=d[f].style;w||(window.removeEventListener("resize",B),w=!0);D(p);p=null};B();a.refresh=B;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});
|
||||
94
node_modules/rellax/tests/center.html
generated
vendored
Normal file
94
node_modules/rellax/tests/center.html
generated
vendored
Normal file
@ -0,0 +1,94 @@
|
||||
<!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>
|
||||
114
node_modules/rellax/tests/destroy.html
generated
vendored
Normal file
114
node_modules/rellax/tests/destroy.html
generated
vendored
Normal file
@ -0,0 +1,114 @@
|
||||
<!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>
|
||||
128
node_modules/rellax/tests/directions.html
generated
vendored
Normal file
128
node_modules/rellax/tests/directions.html
generated
vendored
Normal file
@ -0,0 +1,128 @@
|
||||
<!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>
|
||||
123
node_modules/rellax/tests/horizontal.html
generated
vendored
Normal file
123
node_modules/rellax/tests/horizontal.html
generated
vendored
Normal file
@ -0,0 +1,123 @@
|
||||
<!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>
|
||||
133
node_modules/rellax/tests/percentage.html
generated
vendored
Normal file
133
node_modules/rellax/tests/percentage.html
generated
vendored
Normal file
@ -0,0 +1,133 @@
|
||||
<!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>
|
||||
74
node_modules/rellax/tests/range.html
generated
vendored
Normal file
74
node_modules/rellax/tests/range.html
generated
vendored
Normal file
@ -0,0 +1,74 @@
|
||||
<!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>
|
||||
103
node_modules/rellax/tests/responsive-speeds.html
generated
vendored
Normal file
103
node_modules/rellax/tests/responsive-speeds.html
generated
vendored
Normal file
@ -0,0 +1,103 @@
|
||||
<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>
|
||||
107
node_modules/rellax/tests/speed.html
generated
vendored
Normal file
107
node_modules/rellax/tests/speed.html
generated
vendored
Normal file
@ -0,0 +1,107 @@
|
||||
<!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>
|
||||
84
node_modules/rellax/tests/style.html
generated
vendored
Normal file
84
node_modules/rellax/tests/style.html
generated
vendored
Normal file
@ -0,0 +1,84 @@
|
||||
<!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>
|
||||
191
node_modules/rellax/tests/wrapper.html
generated
vendored
Normal file
191
node_modules/rellax/tests/wrapper.html
generated
vendored
Normal file
@ -0,0 +1,191 @@
|
||||
<!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>
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@ -45,6 +45,11 @@
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
|
||||
},
|
||||
"rellax": {
|
||||
"version": "1.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rellax/-/rellax-1.12.1.tgz",
|
||||
"integrity": "sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA=="
|
||||
},
|
||||
"unidragger": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/unidragger/-/unidragger-2.3.1.tgz",
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"flickity": "^2.2.1",
|
||||
"normalize.css": "^8.0.1"
|
||||
"normalize.css": "^8.0.1",
|
||||
"rellax": "^1.12.1"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
|
||||
6
web/app/themes/la_mine/asset/dist/index.js
vendored
6
web/app/themes/la_mine/asset/dist/index.js
vendored
@ -60,6 +60,11 @@ hamburgers.addEventListener("click", function() {
|
||||
});
|
||||
|
||||
|
||||
function paralax() {
|
||||
var rellax = new Rellax('.paralax', {
|
||||
center:true
|
||||
}); }
|
||||
|
||||
function isotope() {
|
||||
|
||||
var $grid = $('.grid').isotope({
|
||||
@ -73,5 +78,6 @@ function isotope() {
|
||||
}
|
||||
|
||||
$( document ).ready(function() {
|
||||
paralax();
|
||||
isotope();
|
||||
});
|
||||
|
||||
14
web/app/themes/la_mine/asset/dist/js/rellax.pkgd.min.js
vendored
Normal file
14
web/app/themes/la_mine/asset/dist/js/rellax.pkgd.min.js
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
(function(q,g){"function"===typeof define&&define.amd?define([],g):"object"===typeof module&&module.exports?module.exports=g():q.Rellax=g()})("undefined"!==typeof window?window:global,function(){var q=function(g,u){function C(){if(3===a.options.breakpoints.length&&Array.isArray(a.options.breakpoints)){var f=!0,c=!0,b;a.options.breakpoints.forEach(function(a){"number"!==typeof a&&(c=!1);null!==b&&a<b&&(f=!1);b=a});if(f&&c)return}a.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")}
|
||||
var a=Object.create(q.prototype),l=0,v=0,m=0,n=0,d=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},p=null,x=!1;try{var k=Object.defineProperty({},"passive",{get:function(){x=!0}});window.addEventListener("testPassive",null,k);window.removeEventListener("testPassive",null,k)}catch(f){}var D=window.cancelAnimationFrame||window.mozCancelAnimationFrame||
|
||||
clearTimeout,E=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var c=["Webkit","Moz","ms"],b;for(b in c)if(void 0!==a.style[c[b]+"Transform"])return c[b]+"Transform"}return"transform"}();a.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};u&&Object.keys(u).forEach(function(d){a.options[d]=
|
||||
u[d]});u&&u.breakpoints&&C();g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){a.elems=k;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(k=document.querySelector(a.options.wrapper))a.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var F,B=function(){for(var f=0;f<d.length;f++)a.elems[f].style.cssText=d[f].style;d=[];v=window.innerHeight;n=window.innerWidth;f=a.options.breakpoints;F=n<f[0]?"xs":n>=f[0]&&n<
|
||||
f[1]?"sm":n>=f[1]&&n<f[2]?"md":"lg";H();for(f=0;f<a.elems.length;f++){var c=void 0,b=a.elems[f],e=b.getAttribute("data-rellax-percentage"),y=b.getAttribute("data-rellax-speed"),t=b.getAttribute("data-rellax-xs-speed"),g=b.getAttribute("data-rellax-mobile-speed"),h=b.getAttribute("data-rellax-tablet-speed"),k=b.getAttribute("data-rellax-desktop-speed"),l=b.getAttribute("data-rellax-vertical-speed"),m=b.getAttribute("data-rellax-horizontal-speed"),p=b.getAttribute("data-rellax-vertical-scroll-axis"),
|
||||
q=b.getAttribute("data-rellax-horizontal-scroll-axis"),u=b.getAttribute("data-rellax-zindex")||0,x=b.getAttribute("data-rellax-min"),A=b.getAttribute("data-rellax-max"),C=b.getAttribute("data-rellax-min-x"),D=b.getAttribute("data-rellax-max-x"),E=b.getAttribute("data-rellax-min-y"),L=b.getAttribute("data-rellax-max-y"),r=!0;t||g||h||k?c={xs:t,sm:g,md:h,lg:k}:r=!1;t=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&
|
||||
(t=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var z=a.options.vertical?e||a.options.center?t:0:0,I=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;t=z+b.getBoundingClientRect().top;g=b.clientHeight||b.offsetHeight||b.scrollHeight;h=I+b.getBoundingClientRect().left;k=b.clientWidth||b.offsetWidth||b.scrollWidth;
|
||||
z=e?e:(z-t+v)/(g+v);e=e?e:(I-h+n)/(k+n);a.options.center&&(z=e=.5);c=r&&null!==c[F]?Number(c[F]):y?y:a.options.speed;l=l?l:a.options.verticalSpeed;m=m?m:a.options.horizontalSpeed;p=p?p:a.options.verticalScrollAxis;q=q?q:a.options.horizontalScrollAxis;y=J(e,z,c,l,m);b=b.style.cssText;r="";if(e=/transform\s*:/i.exec(b))r=b.slice(e.index),r=(e=r.indexOf(";"))?" "+r.slice(11,e).replace(/\s/g,""):" "+r.slice(11).replace(/\s/g,"");d.push({baseX:y.x,baseY:y.y,top:t,left:h,height:g,width:k,speed:c,verticalSpeed:l,
|
||||
horizontalSpeed:m,verticalScrollAxis:p,horizontalScrollAxis:q,style:b,transform:r,zindex:u,min:x,max:A,minX:C,maxX:D,minY:E,maxY:L})}K();w&&(window.addEventListener("resize",B),w=!1,G())},H=function(){var d=l,c=m;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;m=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;
|
||||
a.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||c!=m&&a.options.horizontal?!0:!1},J=function(d,c,b,e,g){var f={};d=100*(g?g:b)*(1-d);c=100*(e?e:b)*(1-c);f.x=a.options.round?Math.round(d):Math.round(100*d)/100;f.y=a.options.round?Math.round(c):Math.round(100*c)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",
|
||||
h);(a.options.wrapper?a.options.wrapper:window).removeEventListener("scroll",h);(a.options.wrapper?a.options.wrapper:document).removeEventListener("touchmove",h);p=A(G)},G=function(){H()&&!1===w?(K(),p=A(G)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(a.options.wrapper?a.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(a.options.wrapper?a.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},K=function(){for(var f,
|
||||
c=0;c<a.elems.length;c++){var b=d[c].verticalScrollAxis.toLowerCase(),e=d[c].horizontalScrollAxis.toLowerCase();f=-1!=b.indexOf("x")?l:0;b=-1!=b.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?m:0;e=-1!=e.indexOf("y")?m:0;f=J((f+g-d[c].left+n)/(d[c].width+n),(b+e-d[c].top+v)/(d[c].height+v),d[c].speed,d[c].verticalSpeed,d[c].horizontalSpeed);e=f.y-d[c].baseY;b=f.x-d[c].baseX;null!==d[c].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=d[c].min?d[c].min:e),a.options.horizontal&&!a.options.vertical&&
|
||||
(b=b<=d[c].min?d[c].min:b));null!=d[c].minY&&(e=e<=d[c].minY?d[c].minY:e);null!=d[c].minX&&(b=b<=d[c].minX?d[c].minX:b);null!==d[c].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=d[c].max?d[c].max:e),a.options.horizontal&&!a.options.vertical&&(b=b>=d[c].max?d[c].max:b));null!=d[c].maxY&&(e=e>=d[c].maxY?d[c].maxY:e);null!=d[c].maxX&&(b=b>=d[c].maxX?d[c].maxX:b);a.elems[c].style[E]="translate3d("+(a.options.horizontal?b:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+d[c].zindex+"px) "+d[c].transform}a.options.callback(f)};
|
||||
a.destroy=function(){for(var f=0;f<a.elems.length;f++)a.elems[f].style.cssText=d[f].style;w||(window.removeEventListener("resize",B),w=!0);D(p);p=null};B();a.refresh=B;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});
|
||||
7
web/app/themes/la_mine/asset/dist/style.css
vendored
7
web/app/themes/la_mine/asset/dist/style.css
vendored
@ -11,6 +11,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.paralax{
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
}
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-family: Universalis ADF Std, sans-serif;
|
||||
@ -468,7 +472,8 @@ body.la-collecte .__header h3{
|
||||
margin: 30px 0;
|
||||
}
|
||||
._pjt{
|
||||
margin-top: 8%
|
||||
margin-top: 8%;
|
||||
/* RETIRE LES % */
|
||||
}
|
||||
/* END PAGE projets */
|
||||
|
||||
|
||||
1
web/app/themes/la_mine/asset/images/objet_1.svg
Normal file
1
web/app/themes/la_mine/asset/images/objet_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
1
web/app/themes/la_mine/asset/images/objet_2.svg
Normal file
1
web/app/themes/la_mine/asset/images/objet_2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.7 KiB |
1
web/app/themes/la_mine/asset/images/objet_3.svg
Normal file
1
web/app/themes/la_mine/asset/images/objet_3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
@ -21,6 +21,11 @@
|
||||
|
||||
function theme_js(){
|
||||
|
||||
wp_enqueue_script( 'rellax',
|
||||
get_template_directory_uri() . '/asset/dist/js/rellax.pkgd.min.js',
|
||||
array() );
|
||||
|
||||
|
||||
wp_enqueue_script( 'flickity',
|
||||
get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
|
||||
array() );
|
||||
|
||||
@ -17,20 +17,32 @@
|
||||
<div class="btn tout_voir">
|
||||
<a href="/agenda">Tout voir</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="paralax" data-rellax-speed="5">
|
||||
<img src="{{theme.link}}/asset/images/objet_1.svg" alt="objet 1">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section_accueil" id="section_asso">
|
||||
<div class="association">
|
||||
{% include 'partial/section_asso.twig' %}
|
||||
<div class="paralax" data-rellax-speed="3">
|
||||
<img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section_accueil" id="section_projets">
|
||||
<div class="projet">
|
||||
{% include 'partial/section_projets.twig' %}
|
||||
<div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5">
|
||||
<img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -39,7 +51,6 @@
|
||||
{% include 'partial/section_tpsF.twig' %}
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section_accueil" id="section_MineVideo">
|
||||
<div class="video">
|
||||
<div class="__header">
|
||||
|
||||
@ -18,4 +18,5 @@
|
||||
{% include 'components/buttons/bouton_ensavoir.html.twig' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user