Animation in relation to user input, the sane way
How do I make an animation in relation to user input, the sane way?
Demo for a CSS technique based on animation-play-state and animation-delay, allowing for sane user input related animation sequences before WebAnimationAPI arrives. . What is a animation in relation to user input, the sane way? How do you make a animation in relation to user input, the sane way? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.
Animation in relation to user input, the sane way Previews
Animation in relation to user input, the sane way - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation in relation to user input, the sane way</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="main-header" data-animation-output-id="header-animation" data-animation-property="offsetHeight"> Header
</header>
<main class="main-area" data-animation-input-id="header-animation" data-progress-event="scroll" data-progress-property="scrollTop"> <div class="content-block"> Lorem </div> <div class="content-block"> Ipsum </div> <div class="content-block"> Dolor </div> <div class="content-block"> Si </div> <div class="content-block"> Amnet </div> <div class="content-block"> Consetetur </div> <div class="content-block"> Sadipscing </div>
</main> <script src='https://wzrd.in/standalone/eventemitter3@latest'></script> <script src="js/index.js"></script>
</body>
</html>Animation in relation to user input, the sane way - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { height: 100%; overflow: hidden; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 16px; background: #fefefe; color: #111111;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.main-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 20vh; background: #eee; border-bottom: 1px solid transparent;
}
.main-area { -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0; overflow: auto; -webkit-overflow-scrolling: touch;
}
.content-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 20vh; background: #5ec792; color: #fefefe;
}
.content-block + .content-block { margin-top: 25px;
}
@-webkit-keyframes header-animation { 0% { color: #fefefe; background: #5ec792; height: 150px; } 75% { color: #fefefe; background: #5ec792; border-color: transparent; } 100% { color: #000; background: #fff; height: 50px; border-color: #ddd; }
}
@keyframes header-animation { 0% { color: #fefefe; background: #5ec792; height: 150px; } 75% { color: #fefefe; background: #5ec792; border-color: transparent; } 100% { color: #000; background: #fff; height: 50px; border-color: #ddd; }
}
[data-animation-output-id="header-animation"] { -webkit-animation-name: header-animation; animation-name: header-animation; -webkit-animation-duration: 100s; animation-duration: 100s; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
Animation in relation to user input, the sane way - Script Codes JS Codes
function getInput(el) { var event = el.getAttribute('data-progress-event'); var property = el.getAttribute('data-progress-property'); var callbacks = []; el.addEventListener(event, function(e){ callbacks.forEach(function(callback){ callback(e.target[property]); }); }); return { on: function(callback) { callbacks.push(callback); } };
}
function getStream(els) { var instances = els.map(getInput); return { pipe: function(target) { instances.forEach(function(instance){ instance.on(target.receive); }); } };
}
function getTarget(el, calculate) { var property = el.getAttribute('data-animation-property'); var initialAnimationValue = el[property]; var animationValue = initialAnimationValue; var fraction = 0; var previousDelay = 0 + 's'; function update() { var currentDelay = Math.round((fraction * -100) * 100)/100 + 's'; if (currentDelay != previousDelay) { previousDelay = currentDelay; el.style.animationDelay = previousDelay; } } function loop() { update(); requestAnimationFrame(loop); } loop(); return { receive: function(value) { fraction = calculate(initialAnimationValue, animationValue, value); } };
}
function initialize(outputElement) { if (!outputElement) { return console.warn('Init called without element'); } var id = outputElement.getAttribute('data-animation-output-id'); var inputSelector = '[data-animation-input-id="'+id+'"]'; var inputElements = [].slice.call(document.querySelectorAll(inputSelector)); var stream = getStream(inputElements); var target = getTarget(outputElement, function(inital, animation, progress){ return Math.round((1 - Math.max(inital - progress, 0) / inital) * 100) / 100; }); stream.pipe(target);
}
function main() { var els = [].slice.call(document.querySelectorAll('[data-animation-output-id]')); var instances = els.map(initialize);
}
document.addEventListener('DOMContentLoaded', main);
| Developer | Mario Nebl |
| Username | marionebl |
| Uploaded | July 07, 2022 |
| Rating | 3 |
| Size | 3,712 Kb |
| Views | 32,384 |
Do you need developer help for Animation in relation to user input, the sane way?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mario Nebl (marionebl) Script Codes
| Name | Size |
| Floating Labels | 4,659 Kb |
| Blog Concept - Landing Page | 8,465 Kb |
| Pure CSS tooltips | 2,292 Kb |
| Pure CSS tabs | 4,046 Kb |
| Pure CSS toggles | 3,607 Kb |
| Pure CSS lightbox technique | 3,372 Kb |
| A Pen by Mario Nebl | 4,034 Kb |
| JQuery for the poor | 1,658 Kb |
| Mobile toolbar study | 4,779 Kb |
| Basic jogwheel example | 4,593 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Personal Logo Animation | Lloydwheeler | 3,795 Kb |
| Large canvas mousemove experiment | Jibbon | 2,885 Kb |
| Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
| Bezier Animation with straight paths | Rhernando | 2,087 Kb |
| Typefaces with descriptions | Megandoty | 2,944 Kb |
| Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
| Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
| Coming Soon | MariamMassadeh | 1,680 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!