mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-04-24 03:01:10 -04:00
Added input example and improved on update
This commit is contained in:
Alex Fox
56
docs/examples/input.html
Normal file
56
docs/examples/input.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<head>
|
||||
<script type="application/javascript" src="../../lib/lax.min.js"></script>
|
||||
|
||||
<script type="application/javascript">
|
||||
|
||||
window.onload = function () {
|
||||
lax.init()
|
||||
|
||||
const input = document.getElementById('input')
|
||||
|
||||
// Add lax driver for inputLength
|
||||
lax.addDriver('inputLength', function () {
|
||||
return input.value.length
|
||||
})
|
||||
|
||||
lax.addElements("#input", {
|
||||
'inputLength': {
|
||||
"rotate": [
|
||||
[0, 100],
|
||||
[0, 360],
|
||||
],
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#input {
|
||||
text-align: center;
|
||||
width: calc(100vw - 200px);
|
||||
transform-origin: center;
|
||||
margin-left: 100px;
|
||||
margin-top: calc(50vh - 50px);
|
||||
position: fixed;
|
||||
font-size: 40px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-color: #f544ad;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<input id='input' placeholder="type something..." autocomplete="false" autofocus />
|
||||
</body>
|
||||
@@ -10,15 +10,16 @@
|
||||
return document.body.scrollTop
|
||||
})
|
||||
|
||||
lax.addElements(".circle", {}, {
|
||||
lax.addElements("#text", {}, {
|
||||
onUpdate: function (driverValues, domElement) {
|
||||
const scrollY = driverValues.scrollY[0]
|
||||
|
||||
domElement.innerHTML = scrollY
|
||||
const oCount = Math.floor((scrollY / 10) + 1)
|
||||
const oString = Array.from({ length: oCount }, (v, i) => "o").join("")
|
||||
domElement.innerHTML = "scr" + oString + "ll"
|
||||
|
||||
if (scrollY > 400) {
|
||||
if (scrollY > 1000) {
|
||||
domElement.classList.add('pink')
|
||||
domElement.innerHTML = "PINK"
|
||||
} else {
|
||||
domElement.classList.remove('pink')
|
||||
}
|
||||
@@ -29,26 +30,20 @@
|
||||
</head>
|
||||
|
||||
<style>
|
||||
.circle {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #a26ddc;
|
||||
margin-bottom: 0px;
|
||||
margin-left: -100px;
|
||||
margin-top: -100px;
|
||||
border-radius: 100px;
|
||||
left: 50vw;
|
||||
top: 50vh;
|
||||
#text {
|
||||
width: calc(100vw - 40px);
|
||||
left: 20;
|
||||
top: 20;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
font-size: 40px;
|
||||
font-size: 60px;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
color: #a26ddc;
|
||||
overflow-wrap: anywhere;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.circle.pink {
|
||||
background-color: #ff568c;
|
||||
#text.pink {
|
||||
color: #ff568c;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -62,6 +57,6 @@
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="circle">
|
||||
<div id="text">
|
||||
</div>
|
||||
</body>
|
||||
@@ -1,6 +1,6 @@
|
||||
<head>
|
||||
<script type="application/javascript" src="../../lib/lax.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9, minimum-scale=0.9">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;700&display=swap" rel="stylesheet">
|
||||
<script type="application/javascript">
|
||||
@@ -14,11 +14,11 @@
|
||||
return container.scrollLeft
|
||||
})
|
||||
|
||||
lax.addElements(".background", {
|
||||
lax.addElements(".bg", {
|
||||
containerScrollX: {
|
||||
"hue-rotate": [
|
||||
[0, 10000],
|
||||
[0, 1000],
|
||||
"opacity": [
|
||||
["screenWidth * (index-1)", "screenWidth * index", "screenWidth * (index+1)"],
|
||||
[0, 1, 0],
|
||||
],
|
||||
}
|
||||
})
|
||||
@@ -62,7 +62,7 @@
|
||||
containerScrollX: {
|
||||
translateY: [
|
||||
imageAnimationMap,
|
||||
[-200, 0, -200],
|
||||
[-100, 0, -100],
|
||||
{
|
||||
easing: 'easeInOutQuad',
|
||||
}
|
||||
@@ -116,6 +116,13 @@
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.image {
|
||||
height: 60vh;
|
||||
width: 80%;
|
||||
@@ -185,10 +192,14 @@
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="background"></div>
|
||||
<div class="background">
|
||||
<div class="bg" style="background-image: url('../assets/bg3.jpg');"></div>
|
||||
<div class="bg" style="background-image: url('../assets/bg1.jpg');"></div>
|
||||
<div class="bg" style="background-image: url('../assets/bg2.jpg');"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="scroller">
|
||||
<div class="page" style="background-image: url('../assets/bg3.jpg');">
|
||||
<div class="page">
|
||||
<div class="image" style="background-image: url('../assets/shoe3.png');"></div>
|
||||
<h1>Superstar</h1>
|
||||
<p>
|
||||
@@ -197,27 +208,27 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page" style="background-image: url('../assets/bg2.jpg');">
|
||||
<div class="image" style="background-image: url('../assets/shoe1.png');"></div>
|
||||
<h1>Retrorun</h1>
|
||||
<p>
|
||||
Retro design with a modern twist. Check out a busy side street or stroll to the corner store in these adidas
|
||||
running-inspired shoes. Suede overlays and contrast 3-Stripes give the flexible upper a sleek, sporty finish.
|
||||
</p>
|
||||
</div>
|
||||
<div class="page"">
|
||||
<div class=" image" style="background-image: url('../assets/shoe1.png');"></div>
|
||||
<h1>Retrorun</h1>
|
||||
<p>
|
||||
Retro design with a modern twist. Check out a busy side street or stroll to the corner store in these adidas
|
||||
running-inspired shoes. Suede overlays and contrast 3-Stripes give the flexible upper a sleek, sporty finish.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page" style="background-image: url('../assets/bg1.jpg');">
|
||||
<div class="image" style="background-image: url('../assets/shoe2.png');"></div>
|
||||
<h1>Grand Court</h1>
|
||||
<p>
|
||||
A '70s style reborn. These shoes take inspiration from iconic sport styles of the past and move them into the
|
||||
future. The shoes craft an everyday look with a leather-like upper.
|
||||
</p>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="image" style="background-image: url('../assets/shoe2.png');"></div>
|
||||
<h1>Grand Court</h1>
|
||||
<p>
|
||||
A '70s style reborn. These shoes take inspiration from iconic sport styles of the past and move them into the
|
||||
future. The shoes craft an everyday look with a leather-like upper.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="controls">
|
||||
<button onclick="window.goto(-1)">Prev</button>
|
||||
<button onclick="window.goto(1)">Next</button>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button onclick="window.goto(-1)">Prev</button>
|
||||
<button onclick="window.goto(1)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@@ -11,7 +11,7 @@
|
||||
"@babel/preset-env": "^7.12.1",
|
||||
"uglify-js": "^3.9.4"
|
||||
},
|
||||
"description": "Simple & lightweight (<4kb gzipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!",
|
||||
"description": "Simple & lightweight (<4kb gzipped) vanilla JavaScript plugin to create smooth & beautiful animations from user interactions when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!",
|
||||
"license": "MIT",
|
||||
"author": "alexfoxy@gmail.com",
|
||||
"repository": {
|
||||
|
||||
Reference in New Issue
Block a user