CSS Animations
Posted in
3496
10:57 pm, March 14, 2022
Check Wave Click a Checkbox and Watch the Animation
What is Check Wave?
Check a box and watch the wave animation.
Preview
a preview of Check Wave
What can i use this for?
I cant actually think of a use case for this animation, but it looks cool!
Conclusion
A nice example of creative css animation and interaction using css and checkboxes and a little bit of javascript.
Original Source
Thanks to the author @hakimel.
Check Wave Click a Checkbox and Watch the Animation Demo
View Demo Full Screen View Demo New Tab
Check Wave Click a Checkbox and Watch the Animation Code
CSS
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
zoom: 1.4; }
input {
position: absolute;
will-change: transform; }
input.grow {
-webkit-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: grow 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@-webkit-keyframes grow {
0% {
-webkit-transform: scale(1); }
30% {
-webkit-transform: scale(2.5); }
100% {
-webkit-transform: scale(1); } }
@-moz-keyframes grow {
0% {
-moz-transform: scale(1); }
30% {
-moz-transform: scale(2.5); }
100% {
-moz-transform: scale(1); } }
@keyframes grow {
0% {
transform: scale(1); }
30% {
transform: scale(2.5); }
100% {
transform: scale(1); } }
Javascript
var RES_X = 20;
var RES_Y = 20;
var SIZE = 22;
// super laggy on mobile devices so ease up the res
if( /iphone|ipad|android/ig.test( navigator.userAgent ) ) {
RES_X = 16;
RES_Y = 16;
SIZE = 25;
}
var entities = [];
var wrapper = document.createElement( 'div' );
wrapper.className = 'wrapper';
wrapper.style.width = ( RES_X * SIZE ) + 'px';
wrapper.style.height = ( RES_Y * SIZE ) + 'px';
document.body.appendChild( wrapper );
for( var x = 0; x < RES_X; x++ ) {
for( var y = 0; y < RES_Y; y++ ) {
var el = document.createElement( 'input' );
el.setAttribute( 'type', 'checkbox' );
wrapper.appendChild( el );
var entity = {
element: el,
x: x * SIZE,
y: y * SIZE
}
el.style.left = entity.x + 'px';
el.style.top = entity.y + 'px';
el.addEventListener( 'change', this.toggle.bind( this, entity ) );
entities.push( entity );
}
}
function toggle( targetEntity ) {
var checked = targetEntity.element.checked;
entities.forEach( function( entity ) {
var dx = targetEntity.x - entity.x;
var dy = targetEntity.y - entity.y;
var distance = Math.sqrt( dx * dx + dy * dy );
setTimeout( function() {
entity.element.checked = checked;
// re-run the animation, reading offsetWidth forces reflow
entity.element.className = '';
entity.element.offsetWidth;
entity.element.className = 'grow';
}, Math.round( distance * 1.8 ) );
} );
}
setTimeout( function() {
entities[ 0 ].element.checked = true;
toggle( entities[ 0 ] );
}, 500 );
External Link for Check Wave Click a Checkbox and Watch the Animation
Add Comment
Other Items in CSS Animations
Smooth Scrolling with just CSS
Radial Glow under cursor on box hover over effect
Pure CSS 3D Flipping Book with Animations
button animations hover and fill animation
button on focus swing animation
Animated Button Border when Active
Single Element CSS Spinners
CSS Shake - Shake up your elements
Check Wave Click a Checkbox and Watch the Animation
CSS Typing Effect using just CSS
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript