Ripple Effect
How do I make an ripple effect?
What is a ripple effect? How do you make a ripple effect? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.
Ripple Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ripple Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div class="paper"> <p id="num">Circle Ripple Effect</p> <div class="ripple"></div> </div> <div class="paper" style="background:#09c;"> <p id="num">Square Ripple Effect</p> <div class="ripple square"></div> </div> <div class="paper" style=" background:#009900;"> <p id="num">Triangle Ripple Effect</p> <div class="ripple triangle"></div> </div> <div class="paper" style=" background:#e39900;"> <p id="num">Facebook Ripple Effect</p> <div class="ripple facebook-icon"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Ripple Effect - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
html { background-color: #EEEDEF;
}
#container { position: absolute; top: 50%; left: 50%; margin-right: -50%; opacity: 0.9; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
}
.paper { background-color: #e13000; width: 400px; height: 100px; overflow: hidden; position: relative; margin-bottom: 16px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); transition: 0.75s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.paper:hover { cursor: pointer;
}
#num { font-family: 'Roboto', sans-serif; font-size: 20px; color: #fff; text-align: center; margin-top: 32px;
}
.ripple { background-color: rgba(0, 0, 0, 0.35); border-radius: 100%; height: 100px; width: 100px; margin-top: -90px; position: relative; -webkit-transform: scale(0); transform: scale(0); opacity: 0.5;
}
.square { border-radius: 0px !important;
}
.triangle { border-radius: 0px !important; width:0 !important; height:0 !important; border-left:50px solid transparent; border-right:50px solid transparent; background-color: transparent; border-bottom:100px solid rgba(0, 0, 0, 0.35);
}
.facebook-icon { background: rgba(0, 0, 0, 0.4); text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border-bottom: 0;
}
.facebook-icon::before { content: "/20"; position: absolute; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px;
}
.facebook-icon::after { content: "/20"; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px;
}
.animate { -webkit-animation: ripple 1s linear; animation: ripple 1s linear;
}
@-webkit-keyframes ripple { 100% { -webkit-transform: scale(8); transform: scale(8); background-color: transparent; }
}
@keyframes ripple { 100% { -webkit-transform: scale(8); transform: scale(8); background-color: transparent; }
}
Ripple Effect - Script Codes JS Codes
$(document).ready(function() { $(".paper").mousedown(function(e) { var ripple = $(this).find(".ripple"); ripple.removeClass("animate"); var x = parseInt(e.pageX - $(this).offset().left) - (ripple.width() / 2); var y = parseInt(e.pageY - $(this).offset().top) - (ripple.height() / 2); ripple.css({ top: y, left: x }).addClass("animate"); });
});
Developer | Parth Viroja |
Username | parthviroja |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 2,548 Kb |
Views | 28,336 |
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!
Name | Size |
Tag list | 2,358 Kb |
Rotate Circle Pure Javascript | 2,896 Kb |
Treeview using Angular | 4,244 Kb |
Box transition | 1,784 Kb |
Css Dropdown Design | 2,096 Kb |
Form Wizard | 2,857 Kb |
Upload Image Form | 2,689 Kb |
Slide up down | 1,833 Kb |
Ubuntu Terminal | 2,603 Kb |
Dynamic Radial Menu Using Javascript | 3,008 Kb |
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!
Name | Username | Size |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Weather App | Kw7oe | 3,162 Kb |
Light Switch | Bartuc | 4,933 Kb |
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!