Text Ripple Effect

Developer
KimLaRocca
Size
2,754 Kb
Views
14,168
  1. Text Ripple Effect Previews
  2. Text Ripple Effect HTML Codes
  3. Text Ripple Effect CSS Codes
  4. Text Ripple Effect JS Codes

How do I make an text ripple effect?

What is a text ripple effect? How do you make a text ripple effect? This script and codes were developed by KimLaRocca on 29 November 2022, Tuesday.

Text Ripple Effect Previews
IQ Test

Text Ripple Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Ripple Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="text">SWEAT</h1>
<div id="wrapper"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text Ripple Effect - Script Codes CSS Codes

body { overflow: hidden; background: darkmagenta;
}
#text { color: white; font-family: sans-serif; font-size: 6em; font-weight: bold; mix-blend-mode: hard-light; position: absolute; text-align: center; top: calc(50% - 0.5em); width: 100%; z-index: 10;
}
#wrapper { background: darkmagenta; height: 100vh; width: 100vw;
}
#wrapper .ripple { animation: ripple 1200ms ease-out; animation-fill-mode: forwards; background: green; border-radius: 50%; height: 400px; opacity: 1; position: absolute; transform: scale(0); transform-origin: center center; width: 400px;
}
@keyframes ripple { from { background: white; opacity: 1; transform: scale(0); } to { background: white; opacity: 0; transform: scale(1); }
}

Text Ripple Effect - Script Codes JS Codes

(function(w,d,$){ var mouse = { x:0, y:0 }; var $wrapper; function ripple(){ var node = d.createElement('div'); node.className = 'ripple'; node.style.left = (mouse.x - 200) + 'px'; node.style.top = (mouse.y - 200) + 'px'; $wrapper.append($(node)); setTimeout(function(){ $(node).remove(); },1200); }; function mouseMoveHandler(e){ mouse = { x: e.clientX, y: e.clientY }; ripple(); } $(function(){ $wrapper = $('#wrapper'); $(w).on('mousemove',mouseMoveHandler); });
}(window,document,jQuery));
Text Ripple Effect - Script Codes
Text Ripple Effect - Script Codes
Home Page Home
Developer KimLaRocca
Username kimlarocca
Uploaded November 29, 2022
Rating 3
Size 2,754 Kb
Views 14,168
Do you need developer help for Text Ripple Effect?

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!

KimLaRocca (kimlarocca) Script Codes
Name
Character Fade Wipe
Mega Menu Prototype
Highbrow Basic HTML Lesson 8
Highbrow Basic HTML Lesson 3
Highbrow Basic HTML Lesson 6
Responsive Tabs To Accordions
Highbrow Basic HTML Lesson 7
Crop Image
Highbrow Basic HTML Lesson 2
Multi Level Menu
Create amazing video scripts 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!