Ripple

Developer
Anghelos Coulon
Size
2,093 Kb
Views
52,624
  1. Ripple Previews
  2. Ripple HTML Codes
  3. Ripple CSS Codes
  4. Ripple JS Codes

How do I make an ripple?

What is a ripple? How do you make a ripple? This script and codes were developed by Anghelos Coulon on 31 August 2022, Wednesday.

Ripple Previews
IQ Test

Ripple - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>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! */ body{ background-color: whitesmoke;
}
.ripple{ position:absolute; margin:auto; top:0;right:0;bottom:0;left:0; border-radius: 100%; transition: all 3s ease; opacity:1;
}
.outer{ width: 7em; height: 7em; box-shadow: 0 0 10px rgba(0,0,0,0.3),inset 0 0 5px rgba(0,0,0,0.3);
}
.inner{ width: 5em; height: 5em; box-shadow: 0 0 5px rgba(0,0,0,0.3),inset 0 0 10px rgba(0,0,0,0.2);
}
.ripple.out{ height: 40em; width:40em; opacity:0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="outer ripple"></div>
<div class="inner ripple"></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 - Script Codes CSS Codes

body{ background-color: whitesmoke;
}
.ripple{ position:absolute; margin:auto; top:0;right:0;bottom:0;left:0; border-radius: 100%; transition: all 3s ease; opacity:1;
}
.outer{ width: 7em; height: 7em; box-shadow: 0 0 10px rgba(0,0,0,0.3),inset 0 0 5px rgba(0,0,0,0.3);
}
.inner{ width: 5em; height: 5em; box-shadow: 0 0 5px rgba(0,0,0,0.3),inset 0 0 10px rgba(0,0,0,0.2);
}
.ripple.out{ height: 40em; width:40em; opacity:0;
}

Ripple - Script Codes JS Codes

$('.inner').click(function(){ $('.ripple').toggleClass('out');
});
Ripple - Script Codes
Ripple - Script Codes
Home Page Home
Developer Anghelos Coulon
Username anguo
Uploaded August 31, 2022
Rating 3
Size 2,093 Kb
Views 52,624
Do you need developer help for 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!

Anghelos Coulon (anguo) Script Codes
Name
Sheji
Pistachio skin remover machine, animated SVG
Pure CSS Giftbox
Night reading mode
Lemon
CSS Gas Flame Animation
Salt Shaker CSS-Animated SVG
Donate Button With CSS Animated God Rays
Simple always-visible comment indicator
Pistachio pattern
Create amazing SEO content 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!