valentin_le_moign/lamine_wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add paralax

Browse Source
This commit is contained in:
Kevin Tessier
2020-06-29 18:58:50 +02:00
parent b09b309abd
commit a8838049a7
31 changed files with 2761 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
node_modules/rellax/tests/center.html generated vendored Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>