Web animations material ripple

Developer
KyleDavidE
Size
2,672 Kb
Views
28,336
  1. Web animations material ripple Previews
  2. Web animations material ripple HTML Codes
  3. Web animations material ripple CSS Codes
  4. Web animations material ripple JS Codes

How do I make an web animations material ripple?

What is a web animations material ripple? How do you make a web animations material ripple? This script and codes were developed by KyleDavidE on 11 August 2022, Thursday.

Web animations material ripple Previews
IQ Test

Web animations material ripple - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>web animations material ripple</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .ripple{ position:absolute; width:100vmax; height:100vmax; top:-50vmax; left:-50vmax; border-radius:50%;
}
body{ overflow:hidden;
}
.pad{ position:absolute; left:0; right:0; top:0; bottom:0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- touch or click -->
<div class="pad"></div> <script src="js/index.js"></script>
</body>
</html>

Web animations material ripple - Script Codes CSS Codes

.ripple{ position:absolute; width:100vmax; height:100vmax; top:-50vmax; left:-50vmax; border-radius:50%;
}
body{ overflow:hidden;
}
.pad{ position:absolute; left:0; right:0; top:0; bottom:0;
}

Web animations material ripple - Script Codes JS Codes

var slowMo = false;
var dur = slowMo ? 5000 : 500;
function $(id){ return document.getElementById(id);
}
var players = {};
var hue = 0;
function addTouch(e){ var el = document.createElement('div'); el.classList.add('ripple'); var color = 'hsl('+(hue+=70)+',100%,50%)'; el.style.background = color; var trans = 'translate('+e.pageX+'px,'+e.pageY+'px) ' console.log(trans); var player = el.animate([ {opacity: 0.5, transform: trans+"scale(0) "}, {opacity: 1.0, transform: trans+"scale(2) "} ], { duration: dur }); player.playbackRate = 0.1; players[e.identifier || 'mouse'] = player; document.body.appendChild(el); player.onfinish = function(){ if(!document.querySelector('.ripple ~ .pad')) each(document.getElementsByClassName('pad'),function(e){ e.remove(); }); el.classList.remove('ripple'); el.classList.add('pad'); }
}
function dropTouch(e){ players[e.identifier || 'mouse'].playbackRate = 1;
}
function each(l,fn){ for(var i = 0; i < l.length; i++){ fn(l[i]); }
}
document.body.onmousedown = addTouch;
document.body.onmouseup = dropTouch;
document.body.ontouchstart = function(e){ e.preventDefault(); each(e.changedTouches,addTouch);
};
document.body.ontouchend = function(e){ e.preventDefault(); each(e.changedTouches,dropTouch);
};
var el = document.body;
function prevent(e){ e.preventDefault();
}
el.addEventListener("touchstart", prevent, false); el.addEventListener("touchend", prevent, false); el.addEventListener("touchcancel", prevent, false); el.addEventListener("touchleave", prevent, false); el.addEventListener("touchmove", prevent, false);
function fakeTouch(){ var touch = { pageX:Math.random()*innerWidth, pageY:Math.random()*innerHeight, identifier:'fake_'+Math.random()+'__fake' } addTouch(touch); var length = Math.random()*1000+500; setTimeout(function(){ dropTouch(touch); },length) setTimeout(function(){ fakeTouch(); },length - 100)
}
if(location.pathname.match(/fullcpgrid/i)) fakeTouch(); //demo in grid
Web animations material ripple - Script Codes
Web animations material ripple - Script Codes
Home Page Home
Developer KyleDavidE
Username KyleDavidE
Uploaded August 11, 2022
Rating 3.5
Size 2,672 Kb
Views 28,336
Do you need developer help for Web animations material ripple?

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!

KyleDavidE (KyleDavidE) Script Codes
Name
Abstract shape 3d
Flexbox Dna Helix by Joe Ski
A Pen by KyleDavidE
A lonely pixel rag
XKCD 1608 Hoverboard zoomable
A Pen by KyleDavidE
Sunshades
BLOCK CLOCK
Android 4.4 kitkat time picker
A lonely rectangle
Create amazing blog posts 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!