mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-04-24 03:01:10 -04:00
488 lines
12 KiB
HTML
488 lines
12 KiB
HTML
<head>
|
|
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
|
|
|
|
<script type="application/javascript" src="./lib/lax.min.js"></script>
|
|
<script type="application/javascript">
|
|
|
|
window.copyPreset = function () {
|
|
const input = document.getElementById("presetString")
|
|
|
|
input.select()
|
|
input.setSelectionRange(0, 99999)
|
|
|
|
document.execCommand("copy")
|
|
|
|
alert("Copied the text: " + input.value)
|
|
}
|
|
|
|
window.onload = function () {
|
|
|
|
/*
|
|
Setup control data
|
|
*/
|
|
|
|
const baseSettings = {
|
|
fade: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [100, window.innerHeight / 3],
|
|
value: window.innerHeight / 4
|
|
},
|
|
{
|
|
name: 'Starting Opacity',
|
|
limits: [0, 0.9],
|
|
step: 0.1,
|
|
value: 0
|
|
}
|
|
],
|
|
blur: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [100, window.innerHeight / 3],
|
|
value: window.innerHeight / 4
|
|
},
|
|
{
|
|
name: 'Strength',
|
|
limits: [0, 50],
|
|
value: 20
|
|
}
|
|
],
|
|
spin: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [10, 3000],
|
|
value: window.innerHeight
|
|
},
|
|
{
|
|
name: 'Stength',
|
|
limits: [1, 360],
|
|
value: 360
|
|
}
|
|
],
|
|
scale: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [50, window.innerHeight / 3],
|
|
value: window.innerHeight / 4
|
|
},
|
|
{
|
|
name: 'Starting Scale',
|
|
limits: [0, 1],
|
|
step: 0.1,
|
|
value: 0.6
|
|
}
|
|
],
|
|
slide: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [50, window.innerHeight],
|
|
value: window.innerHeight / 4
|
|
},
|
|
{
|
|
name: 'Amount',
|
|
limits: [-1000, 1000],
|
|
value: 500
|
|
}
|
|
]
|
|
}
|
|
|
|
const enabledPresets = ["fadeInOut", "seesaw"]
|
|
|
|
const controlData = {
|
|
fadeIn: [...baseSettings.fade],
|
|
fadeOut: [...baseSettings.fade],
|
|
fadeInOut: [...baseSettings.fade],
|
|
scaleIn: [...baseSettings.scale],
|
|
scaleOut: [...baseSettings.scale],
|
|
scaleInOut: [...baseSettings.scale],
|
|
slideX: [...baseSettings.slide],
|
|
slideY: [...baseSettings.slide],
|
|
jiggle: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [40, 200],
|
|
value: 50
|
|
},
|
|
{
|
|
name: 'Stength',
|
|
limits: [1, 100],
|
|
value: 20
|
|
}
|
|
],
|
|
seesaw: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [40, 200],
|
|
value: 140
|
|
},
|
|
{
|
|
name: 'Stength',
|
|
limits: [1, 40],
|
|
value: 20
|
|
}
|
|
],
|
|
zigzag: [
|
|
{
|
|
name: 'Distance',
|
|
limits: [40, 200],
|
|
value: 170
|
|
},
|
|
{
|
|
name: 'Stength',
|
|
limits: [1, 500],
|
|
value: 200
|
|
}
|
|
],
|
|
hueRotate: [...baseSettings.spin],
|
|
spin: [...baseSettings.spin],
|
|
flipX: [...baseSettings.spin],
|
|
flipY: [...baseSettings.spin],
|
|
blurIn: [...baseSettings.blur],
|
|
blurOur: [...baseSettings.blur],
|
|
blurInOut: [...baseSettings.blur],
|
|
}
|
|
|
|
/*
|
|
UI Update methods
|
|
*/
|
|
|
|
function updateLaxSettings() {
|
|
lax.removeElements("#laxLogo")
|
|
|
|
const presets = []
|
|
|
|
enabledPresets.forEach((presetName) => {
|
|
const control = controlData[presetName]
|
|
const controlStr = control ? ":" + control.map(c => c.value).join(":") : ''
|
|
const settingString = `${presetName}${controlStr}`
|
|
presets.push(settingString)
|
|
})
|
|
|
|
lax.addElements("#laxLogo", {
|
|
scrollY: {
|
|
presets
|
|
}
|
|
})
|
|
|
|
presetString.value = presets.map((p) => {
|
|
return `lax_preset_${p}`
|
|
}).join(" ")
|
|
}
|
|
|
|
function onSliderUpdate(name, value) {
|
|
const valueEl = document.getElementById(name + '-value')
|
|
if (valueEl) valueEl.innerHTML = value
|
|
updateLaxSettings()
|
|
}
|
|
|
|
function onCheckBoxUpdate(controlName) {
|
|
const index = enabledPresets.indexOf(controlName)
|
|
const enabled = index >= 0
|
|
const sliders = document.getElementById(controlName + "-controls")
|
|
|
|
if (enabled) {
|
|
enabledPresets.splice(index, 1)
|
|
if (sliders) sliders.classList.remove('visible')
|
|
} else {
|
|
enabledPresets.push(controlName)
|
|
if (sliders) sliders.classList.add('visible')
|
|
}
|
|
|
|
const checkbox = document.getElementById(controlName + "-checkbox")
|
|
if (checkbox) checkbox.checked = !enabled
|
|
}
|
|
|
|
/*
|
|
Build UI
|
|
*/
|
|
|
|
const controlsContainer = document.getElementById('controlsContainer')
|
|
const presetString = document.getElementById('presetString')
|
|
|
|
function renderSlider(control, controlName) {
|
|
const container = document.createElement('div')
|
|
container.className = "slider"
|
|
|
|
const slider = document.createElement('input')
|
|
const id = [controlName.toLowerCase(), control.name.toLowerCase()].join("-")
|
|
|
|
slider.type = 'range'
|
|
slider.min = control.limits[0]
|
|
slider.max = control.limits[1]
|
|
slider.step = control.step || 1
|
|
slider.value = control.value
|
|
slider.oninput = function (el) {
|
|
control.value = el.target.value
|
|
onSliderUpdate(id, el.target.value)
|
|
}
|
|
|
|
const labelContainer = document.createElement('div')
|
|
labelContainer.className = "labelContainer"
|
|
|
|
const label = document.createElement('label')
|
|
label.innerHTML = control.name
|
|
|
|
const value = document.createElement('label')
|
|
value.innerHTML = control.value
|
|
value.id = id + "-value"
|
|
|
|
labelContainer.appendChild(label)
|
|
labelContainer.appendChild(value)
|
|
container.appendChild(labelContainer)
|
|
container.appendChild(slider)
|
|
|
|
return container
|
|
}
|
|
|
|
function renderCheckbox(controlName) {
|
|
const container = document.createElement('div')
|
|
container.className = "checkBox"
|
|
|
|
const checkbox = document.createElement('input')
|
|
checkbox.id = controlName + "-checkbox"
|
|
checkbox.type = "checkbox"
|
|
|
|
const enabled = enabledPresets.indexOf(controlName) > -1
|
|
checkbox.checked = enabled
|
|
|
|
const id = [controlName.toLowerCase(), name.toLowerCase()].join()
|
|
|
|
checkbox.oninput = function (el) {
|
|
["blur", "scale", "fade"].forEach((type) => {
|
|
if (controlName.includes(type)) {
|
|
enabledPresets.forEach((presetName) => {
|
|
if (presetName !== controlName && presetName.includes(type)) {
|
|
onCheckBoxUpdate(presetName, true)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
onCheckBoxUpdate(controlName, enabled)
|
|
updateLaxSettings()
|
|
}
|
|
|
|
const label = document.createElement('label')
|
|
label.innerHTML = controlName
|
|
|
|
container.appendChild(label)
|
|
container.appendChild(checkbox)
|
|
|
|
return container
|
|
}
|
|
|
|
function renderControl(controlName) {
|
|
const controls = controlData[controlName]
|
|
const container = document.createElement('div')
|
|
container.className = 'control'
|
|
|
|
const checkbox = renderCheckbox(controlName)
|
|
container.appendChild(checkbox)
|
|
|
|
const sliderControls = document.createElement('div')
|
|
sliderControls.className = 'sliderControls'
|
|
sliderControls.id = controlName + "-controls"
|
|
|
|
controls.forEach((control, i) => {
|
|
const slider = renderSlider(control, controlName)
|
|
sliderControls.appendChild(slider)
|
|
})
|
|
|
|
const enabled = enabledPresets.indexOf(controlName) > -1
|
|
if (enabled) sliderControls.classList.add("visible")
|
|
|
|
container.appendChild(sliderControls)
|
|
controlsContainer.appendChild(container)
|
|
}
|
|
|
|
Object.keys(controlData).forEach((controlName) => renderControl(controlName))
|
|
|
|
/*
|
|
Initialise lax
|
|
*/
|
|
|
|
lax.init()
|
|
|
|
lax.addDriver('scrollY', function () {
|
|
return window.scrollY
|
|
})
|
|
|
|
updateLaxSettings()
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
background-color: #dedbde;
|
|
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
|
|
margin: 0;
|
|
background-size: 700px 700px;
|
|
height: 220vh;
|
|
font-family: 'Montserrat', sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#laxLogo {
|
|
margin-top: 100vh;
|
|
left: 0;
|
|
z-index: 1000;
|
|
font-size: 100px;
|
|
text-align: center;
|
|
transform-origin: 50% 50%;
|
|
color: #a94fe4;
|
|
width: 240px;
|
|
margin-left: calc(50vw - 150px - 120px);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hint {
|
|
left: 0;
|
|
width: 100%;
|
|
opacity: 0.2;
|
|
z-index: 1000;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
position: absolute;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#controlsContainer {
|
|
position: fixed;
|
|
width: 300px;
|
|
background: white;
|
|
height: 100vh;
|
|
box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.2);
|
|
padding: 20;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
#controlsContainer h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#canvas {
|
|
width: calc(100vw - 300px);
|
|
margin-left: 300px;
|
|
position: relative;
|
|
height: 220vh;
|
|
}
|
|
|
|
#presetString {
|
|
background: #4a525a;
|
|
color: white;
|
|
font-family: monospace;
|
|
padding: 10px;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
width: 195px;
|
|
margin-right: 5px;
|
|
outline: none;
|
|
}
|
|
|
|
#presetStringContainer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
background: #e1e8e8;
|
|
left: 0;
|
|
width: 260px;
|
|
padding: 20px 20px;
|
|
}
|
|
|
|
.control {
|
|
border-top: 1px solid #d8d7d7;
|
|
}
|
|
|
|
.checkBox,
|
|
.labelContainer {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
;
|
|
}
|
|
|
|
.sliderControls {
|
|
height: 0px;
|
|
overflow-y: hidden;
|
|
overflow-x: visible;
|
|
transition: height 200ms ease-out;
|
|
}
|
|
|
|
.sliderControls.visible {
|
|
height: 105px;
|
|
}
|
|
|
|
.slider input {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
label {
|
|
font-weight: lighter;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.checkBox label {
|
|
font-weight: 800;
|
|
margin-bottom: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#copyButton {
|
|
border: 0;
|
|
width: 55px;
|
|
height: 36px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #a26ddc;
|
|
border-radius: 10px;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
color: white;
|
|
outline: none;
|
|
}
|
|
|
|
#copyButton:hover {
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#presetTextHelper {
|
|
margin-bottom: 10px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div id="controlsContainer">
|
|
<h1>Lax preset explorer</h1>
|
|
|
|
<div id="presetStringContainer">
|
|
<div id="presetTextHelper">
|
|
<span>Preset code</span>
|
|
<a href="https://github.com/alexfoxy/lax.js#using-presets">How to use</a>
|
|
</div>
|
|
|
|
<input id="presetString" />
|
|
<button onclick="copyPreset()" id="copyButton">Copy</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="canvas">
|
|
<h4 class='hint' style="top: 120px;">Scroll Down..</h4>
|
|
<h4 class='hint' style="bottom: 140px;">Scroll Up..</h4>
|
|
|
|
<img src="assets/lax.png" id="laxLogo" />
|
|
</div>
|
|
|
|
</body> |