Customizable ripples with angular
How do I make an customizable ripples with angular?
Really love this ripple effect I've seen on some other pens, decided to apply some angular to make it more dynamic and hopefully more useful too. . What is a customizable ripples with angular? How do you make a customizable ripples with angular? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
Customizable ripples with angular Previews
Customizable ripples with angular - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Customizable ripples with angular</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/hint.css/1.3.5/hint.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-container" ng-app="angularPageApp"> <div class="page-container"> <!-- color-index - must match a predefined color class index (see scss)--> <!-- size - corresponds to the font-size attribute (em)--> <!-- speed - corresponds to the animation-duration attribute (higher values = slower speeds)--> <!-- width/height - corresponds to the width/height attributes of the inner circle itself (em)--> <!-- - if anyone knows how we could plug in a hex value here for the color, t'would be really cool :)--> <ripple-circle color-index="2" size="0.2" speed="1.5" width="1" height="1"></ripple-circle> <ripple-circle color-index="3" size="0.9" speed="0.8" width="2.5" height="3"></ripple-circle> <ripple-circle>/* using defaults defined in angular controller */</ripple-circle> <ripple-circle color-index="4" size="1.2" speed="1.3"></ripple-circle> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Customizable ripples with angular - Script Codes CSS Codes
*, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background-color: #fff; font-size: 62.5%;
}
@-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@-o-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@-webkit-keyframes ripple_1 { 0% { box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0); }
}
@-moz-keyframes ripple_1 { 0% { box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0); }
}
@-o-keyframes ripple_1 { 0% { box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0); }
}
@keyframes ripple_1 { 0% { box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0); }
}
@-webkit-keyframes ripple_2 { 0% { box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0); }
}
@-moz-keyframes ripple_2 { 0% { box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0); }
}
@-o-keyframes ripple_2 { 0% { box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0); }
}
@keyframes ripple_2 { 0% { box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0); }
}
@-webkit-keyframes ripple_3 { 0% { box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0); }
}
@-moz-keyframes ripple_3 { 0% { box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0); }
}
@-o-keyframes ripple_3 { 0% { box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0); }
}
@keyframes ripple_3 { 0% { box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0); }
}
@-webkit-keyframes ripple_4 { 0% { box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0); }
}
@-moz-keyframes ripple_4 { 0% { box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0); }
}
@-o-keyframes ripple_4 { 0% { box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0); }
}
@keyframes ripple_4 { 0% { box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3); } 100% { box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0); }
}
.ripple-circle { width: 5em; height: 5em; margin: 10em auto; border-radius: 50%; animation: ripple_1 0.6s linear infinite;
}
.ripple-circle.color_1 { animation-name: ripple_1;
}
.ripple-circle.color_2 { animation-name: ripple_2;
}
.ripple-circle.color_3 { animation-name: ripple_3;
}
.ripple-circle.color_4 { animation-name: ripple_4;
}
.page-container { display: flex; flex-flow: column nowrap;
}
Customizable ripples with angular - Script Codes JS Codes
var PageApp = angular.module('angularPageApp', ['ngSanitize']);
PageApp.directive('rippleCircle', function($timeout) { return { restrict: 'E', replace: true, scope: { color: '@', size: '@', speed: '@' }, controller: function($scope) { // default ripple style values $scope.colorIndex = '1'; $scope.size = 1; $scope.speed = 0.6; $scope.width = 5; $scope.height = 5; $scope.parseAttrs = function(attrs) { if (attrs.colorIndex) $scope.colorIndex = attrs.colorIndex; if (attrs.size) $scope.size = parseFloat(attrs.size); if (attrs.speed) $scope.speed = parseFloat(attrs.speed); if (attrs.width) $scope.width = parseFloat(attrs.width); if (attrs.height) $scope.height = parseFloat(attrs.height); }; $scope.applyStyles = function(element) { var $el = angular.element(element); $el.css({ 'animation-duration': [$scope.speed, 's'].join(''), 'font-size': [$scope.size, 'em'].join(''), 'width': [$scope.width, 'em'].join(''), 'height': [$scope.height, 'em'].join('') }); }; }, template: '<div class="ripple-circle color_{{colorIndex}}"></div>', link: function(scope, element, attrs) { // apply directive attribute values to the scope scope.parseAttrs(attrs); // apply scope values to the dom element scope.applyStyles(element[0]); } };
});
| Developer | Robert Lowe |
| Username | rlo206 |
| Uploaded | July 23, 2022 |
| Rating | 4 |
| Size | 4,825 Kb |
| Views | 36,432 |
Do you need developer help for Customizable ripples with angular?
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!
Robert Lowe (rlo206) Script Codes
| Name | Size |
| The Rainball | 4,656 Kb |
| Crazy Tables | 3,065 Kb |
| Whirlpool Spinner with 4 sizes | 3,473 Kb |
| Dynamic UI with AngularJS attributes | 5,934 Kb |
| Windows 10 toggle button directive | 4,256 Kb |
| Interactive data table with Angular and SCSS | 9,618 Kb |
| Testing Semantic UI Grid | 2,832 Kb |
| Google Mic Icon | 3,388 Kb |
| Semantic Element Document Outline | 3,153 Kb |
| Animated slider in pure angular | 5,111 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS Chat Bubbles | Boylett | 2,094 Kb |
| Light Switch | Bartuc | 4,933 Kb |
| Table Exercise | Fresco | 9,585 Kb |
| Atom | Bhlaird | 1,932 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| Parallax scrolling scene | Iharosi | 2,485 Kb |
| Mini Profile | Frytyler | 3,828 Kb |
Do you want hide your ip address?
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!