mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-01-14 00:38:04 -05:00
378 lines
12 KiB
HTML
378 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
|
|
<script src="./lib/lax.min.js"></script>
|
|
<!-- <script src="../src/lax.js"></script> -->
|
|
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
document.getElementById("main").classList.add("loaded")
|
|
|
|
lax.setup()
|
|
|
|
const update = () => {
|
|
lax.update(window.scrollY)
|
|
window.requestAnimationFrame(update)
|
|
}
|
|
|
|
window.requestAnimationFrame(update)
|
|
|
|
let w = window.innerWidth
|
|
window.addEventListener("resize", function() {
|
|
if(w !== window.innerWidth) {
|
|
lax.populateElements()
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body,html {
|
|
margin:0;
|
|
padding:0;
|
|
color: #F3F4F5;
|
|
background: #191818;
|
|
overflow-x: hidden;
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
#main {
|
|
opacity: 0;
|
|
transition: opacity 200ms;
|
|
}
|
|
|
|
#main.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
#header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
z-index: 2;
|
|
height: 100vh;
|
|
}
|
|
|
|
.bg {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#header img {
|
|
width: 78pt;
|
|
margin-top: 12pt;
|
|
}
|
|
|
|
#header h2 {
|
|
margin-top: 60pt;
|
|
font-size: 24pt;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
#header h4 {
|
|
font-size: 16pt;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
}
|
|
|
|
#header i {
|
|
font-size: 14pt;
|
|
background: white;
|
|
color: black;
|
|
width: 30pt;
|
|
text-align: center;
|
|
height: 30pt;
|
|
line-height: 30pt;
|
|
border-radius: 15pt;
|
|
margin-top: -10pt;
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
left: 80pt;
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: 80pt;
|
|
}
|
|
|
|
.chunkyText {
|
|
font-size: 80pt;
|
|
font-weight: 1000;
|
|
}
|
|
|
|
.crazyText {
|
|
font-size: 40pt;
|
|
font-weight: 1000;
|
|
color: #5ee5d5;
|
|
position: absolute;
|
|
width: 100vw;
|
|
text-align: center;
|
|
margin-top: 500pt;
|
|
}
|
|
|
|
.bubble {
|
|
position: absolute;
|
|
margin-top: 100pt;
|
|
}
|
|
|
|
.block {
|
|
position: absolute;
|
|
width: 60pt;
|
|
height: 60pt;
|
|
}
|
|
|
|
.bubble.a {
|
|
width: 100pt;
|
|
height: 100pt;
|
|
border-radius: 50pt
|
|
}
|
|
|
|
.bubble.b {
|
|
width: 130pt;
|
|
height: 130pt;
|
|
border-radius: 65pt
|
|
}
|
|
|
|
.bubble.c {
|
|
width: 50pt;
|
|
height: 50pt;
|
|
border-radius: 25pt
|
|
}
|
|
|
|
.section {
|
|
z-index: 2;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
#section1 {
|
|
height: 750pt;
|
|
}
|
|
|
|
#section2 {
|
|
height: 200pt;
|
|
}
|
|
|
|
#section3 {
|
|
padding: 0 20pt;
|
|
font-size: 20pt;
|
|
line-height: 30pt;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 85vh;
|
|
}
|
|
|
|
p {
|
|
max-width: 500pt;
|
|
text-align: center;
|
|
margin-bottom: 100pt;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.button {
|
|
padding: 10pt 50pt;
|
|
background: url(img/button-bg.jpg);
|
|
background-size: 100pt;
|
|
border-radius: 10pt;
|
|
font-weight: 600;
|
|
color: black !important;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: black !important;
|
|
}
|
|
|
|
.button:hover {
|
|
background: white;
|
|
color: black !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.github-corner {
|
|
z-index: 1000;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="main">
|
|
<div id="header" class="section">
|
|
<img src="./img/l.png" class="lax" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" data-lax-optimize=true />
|
|
<img src="./img/a.png" class="lax" data-lax-translate-x="0 0, vh -200" data-lax-optimize=true />
|
|
<img src="./img/x.png" class="lax" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<img src="./img/x.png" class="lax" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 200" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 400" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 600" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 800" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 1000" data-lax-opacity="0 1, (0.8*vh) 0" />
|
|
<h2 class="lax" data-lax-scale="0 1, vh 0.2" data-lax-translate-y="0 0, vh 1200" data-lax-opacity="0 1, (vh*0.5) 0">awesum scroll effects</h2>
|
|
|
|
<h4 class="lax" data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>
|
|
<i class="lax fas fa-chevron-down"
|
|
data-lax-opacity="0 1, (vh*0.1) 0"
|
|
data-lax-translate-y="0 0, 200 100">
|
|
</i>
|
|
</div>
|
|
|
|
|
|
<div id="section1" class="section">
|
|
<div class="left">
|
|
<div class="lax bubble a"
|
|
style="background: #EDD943"
|
|
data-lax-preset="lazy-250"
|
|
></div>
|
|
|
|
<div class="lax bubble c"
|
|
style="background: #ED2471; margin-left: 80pt"
|
|
data-lax-preset="lazy-100"
|
|
></div>
|
|
|
|
<div class="lax bubble b"
|
|
style="background: #35D5E5; margin-left: 160pt"
|
|
data-lax-preset="lazy-300"
|
|
></div>
|
|
|
|
<h3 data-lax-preset="driftRight" data-lax-optimize=true class="lax chunkyText" style="color: #35D5E5;">oooh!</h3>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="lax bubble a"
|
|
style="background: #35D5E5; margin-left: 120pt"
|
|
data-lax-preset="lazy-200"
|
|
></div>
|
|
|
|
<div class="lax bubble c"
|
|
style="background: #EDD943; margin-left: -20pt"
|
|
data-lax-preset="lazy-150"
|
|
></div>
|
|
|
|
<div class="lax bubble b"
|
|
style="background: #ED2471; margin-left: 20pt; margin-top: 200pt"
|
|
data-lax-preset="lazy-350"
|
|
></div>
|
|
<h3 data-lax-optimize=true data-lax-preset="driftLeft" class="lax chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
|
|
</div>
|
|
|
|
<h3 data-lax-preset="crazy zoomInOut" class="lax crazyText" data-lax-optimize=true>sooo crazy</h3>
|
|
</div>
|
|
|
|
<div id="section2" class="section">
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #35D5E5;"
|
|
data-lax-preset="spin"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.2 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #EDD943; margin-top: -50pt; margin-left: -50pt; width: 40pt; height: 40pt;"
|
|
data-lax-preset="spinRev-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #ED2471; margin-top: -90pt; margin-left: -0pt;"
|
|
data-lax-preset="spin-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #EDD943; margin-top: 70pt; margin-left: -150pt; width: 40pt; height: 40pt;"
|
|
data-lax-preset="spinRev-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.3 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #EDD943; margin-top: 100pt; margin-left: -60pt; width: 25pt; height: 25pt;"
|
|
data-lax-preset="spin-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #ED2471; margin-top: -30pt; margin-left: -70pt;"
|
|
data-lax-preset="spin"
|
|
></div>
|
|
</div>
|
|
|
|
<h3 data-lax-preset="leftToRight-0.8 speedy" data-lax-optimize=true class="lax chunkyText" style="
|
|
color: #white; position: absolute; margin-top: -20pt; margin-left: -100pt">
|
|
wheee!
|
|
</h3>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.15 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #35D5E5; margin-top: -70pt; margin-left: -20pt; width: 40pt; height: 40pt;"
|
|
data-lax-preset="spinRev-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.45 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #ED2471; margin-top: -50pt; margin-left: -50pt; width: 25pt; height: 25pt;"
|
|
data-lax-preset="spin-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #35D5E5; margin-top: 30pt; margin-left: -20pt;"
|
|
data-lax-preset="spinRev-500"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="lax blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
|
|
<div class="lax block"
|
|
style="background: #ED2471; margin-top: 80pt; margin-left: -10pt;"
|
|
data-lax-preset="spin-500"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section3" class="lax section">
|
|
<p class="lax" data-lax-preset="linger" data-lax-optimize=true>
|
|
Harness the power of scrolling and make your websites come alive!
|
|
</p>
|
|
<a class="lax button" data-lax-preset="linger" data-lax-optimize=true data-lax-bg-pos-x="0 0, 3000 1000" href="https://github.com/alexfoxy/laxxx">
|
|
Get lax.js
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<a href="https://github.com/alexfoxy/laxxx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
|
|
|
</body>
|