Pulsar

Developer
Todd Moy
Size
3,191 Kb
Views
12,144
  1. Pulsar Previews
  2. Pulsar HTML Codes
  3. Pulsar CSS Codes
  4. Pulsar JS Codes

How do I make an pulsar?

What is a pulsar? How do you make a pulsar? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Pulsar Previews
IQ Test

Pulsar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pulsar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="btn">Item One</button>
<button class="btn">Item Two</button> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pulsar - Script Codes CSS Codes

html, body { height: 100%; min-height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; font-family: sans-serif; font-size: 13px;
}
.btn { background-color: rgba(26, 130, 226, 0.8); color: white; border-radius: 2px; padding: 12px 30px; display: inline-block; border: solid #1A82E2 1px;
}
.btn:hover { background-color: #1a82e2; cursor: pointer;
}
.btn:active { -webkit-transform: translate(0%, 2px); transform: translate(0%, 2px); background-color: rgba(26, 130, 226, 0.9);
}
.sonar--pinging { position: relative;
}
.sonar--pinging:before, .sonar--pinging:after { content: " "; position: absolute; display: block; width: 10px; height: 10px; left: -5px; /* -0.5 x width */ top: -5px; /* -0.5 x height */ border-radius: 100px; background-color: #b71b1b; z-index: 9999; opacity: 0; -webkit-animation: sonar--animate 3s infinite ease-out; animation: sonar--animate 3s infinite ease-out;
}
.sonar--pinging:after { -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
@-webkit-keyframes sonar--animate { 0% { opacity: 0.3; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(10); transform: scale(10); } 100% { opacity: 0; -webkit-transform: scale(8); transform: scale(8); }
}
@keyframes sonar--animate { 0% { opacity: 0.3; -webkit-transform: scale(0); transform: scale(0); } 50% { opacity: 0; -webkit-transform: scale(10); transform: scale(10); } 100% { opacity: 0; -webkit-transform: scale(8); transform: scale(8); }
}

Pulsar - Script Codes JS Codes

// Sonar Plugin
// adds pulsing rings to a given element
;(function($, window, document, undefined) { var pluginName = "sonar", defaults = {}; function Plugin(element, options) { this.init(element); } Plugin.prototype.init = function(element) { $(element).addClass("sonar--pinging"); // we'll want to disable this forever, once the user has touched it. May need to store this in a cookie. $(element).on("mouseover", this.disable); }; Plugin.prototype.disable = function() { $(this).removeClass("sonar--pinging"); } $.fn[pluginName] = function(options) { return this.each(function() { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); }
}(jQuery, window, document));
// Initialize
$(document).ready(function(){ $(".btn").sonar();
});
Pulsar - Script Codes
Pulsar - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 3,191 Kb
Views 12,144
Do you need developer help for Pulsar?

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!

Todd Moy (toddmoy) Script Codes
Name
Loader 5
A Pen by Todd Moy
SVG Animation Test
Header Test
Flexbox test
Experiment
Subscribe Button
Modal Interaction Test
Hidden Menu Test
Logo Animation
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!