129 lines
3.4 KiB
HTML
129 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title></title>
|
|
<style>
|
|
html,
|
|
body {
|
|
color: #223;
|
|
font-size: 21pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav {
|
|
font-size: 21pt;
|
|
line-height: 1.5em;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
nav a {
|
|
color: inherit;
|
|
}
|
|
|
|
.col {
|
|
text-align: center;
|
|
width: 50%;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h4 {
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
outline: 1px solid #eed;
|
|
font-size: 42pt;
|
|
padding: 37.5vh 12.5vw;
|
|
}
|
|
|
|
.block {
|
|
background: #223;
|
|
color: #eed;
|
|
line-height: 25vh;
|
|
text-align: right;
|
|
padding: 0 42pt;
|
|
position: relative;
|
|
}
|
|
|
|
span {
|
|
background: #eed;
|
|
color: #223;
|
|
line-height: 25vh;
|
|
text-align: left;
|
|
padding: 0 42pt;
|
|
display: block;
|
|
width: 50%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h4>verticalScroll X / verticalScroll XY</h4>
|
|
<section>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#1<span class="rellax" data-rellax-vertical-scroll-axis="x">#1</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#1<span class="rellax" data-rellax-vertical-scroll-axis="xy">#1</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h4>speedX = 3 / speedX = 1, speedY = 2</h4>
|
|
<h4>verticalScroll X / verticalScroll XY</h4>
|
|
<section>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#2<span class="rellax" data-rellax-horizontal-speed="3" data-rellax-vertical-scroll-axis="x">#2</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#2<span class="rellax" data-rellax-horizontal-speed="1" data-rellax-vertical-speed="2" data-rellax-vertical-scroll-axis="xy">#2</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h4>MaxX 200 / MinX -215 MinY -300</h4>
|
|
<h4>verticalScroll X / verticalScroll XY</h4>
|
|
<section>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#3<span class="rellax" data-rellax-vertical-scroll-axis="x" data-rellax-max-x="200">#3</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="container">
|
|
<div class="block">#3<span class="rellax" data-rellax-speed="2" data-rellax-vertical-scroll-axis="xy" data-rellax-min-x="-215" data-rellax-min-y="-300">#3</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scripts -->
|
|
<script src="../rellax.js"></script>
|
|
<script>
|
|
var rellax = new Rellax('.rellax', {
|
|
horizontal: true,
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|