Animating characters with jQuery

Developer
042
Size
2,776 Kb
Views
6,072
  1. Animating characters with jQuery Previews
  2. Animating characters with jQuery HTML Codes
  3. Animating characters with jQuery CSS Codes
  4. Animating characters with jQuery JS Codes

How do I make an animating characters with jquery?

A jQuery plugin for creating spinners based on ASCII.. What is a animating characters with jquery? How do you make a animating characters with jquery? This script and codes were developed by 042 on 09 January 2023, Monday.

Animating characters with jQuery Previews
IQ Test

Animating characters with jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating characters with jQuery</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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>
<p id="spinner1"></p>
<p id="spinner2"></p>
<p id="spinner3"></p>
<p id="spinner4"></p>
<p id="spinner5"></p>
<p id="spinner6"></p>
<p id="spinner7"></p>
<p id="spinner8"></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animating characters with jQuery - Script Codes CSS Codes

body { font-family: "Courier New", Courier, monospace; text-align: center; font-size: 3em; color: #444; background: #fefefe;
}
p { margin: 0.7em 0;
}
#spinner7 { font-size: 16px;
}

Animating characters with jQuery - Script Codes JS Codes

(function(window, document, $, undefined){ var CharAnim = function(elem, options){ this.elem = elem; this.frames = options.frames; this.interval = options.interval; this.maxCount = this.frames.length; this.start(); } CharAnim.prototype = { count: 0, maxCount: 0, interval: 0, timer: null, start: function(){ this.loop(); }, stop: function(){ clearInterval(this.timer); }, loop: function(){ this.timer = setInterval($.proxy(function(){ this.elem.innerHTML = this.frames[this.count]; this.count = (this.count+1) >= this.maxCount ? 0 : (this.count+1); }, this), this.interval); return this.timer; } }; $.fn.charAnim = function(options){ return this.each(function(){ if (!$(this).data('charAnim')) { var charAnim = new CharAnim(this, options); $(this).data('charAnim', charAnim); } }); }; // Examples $(function(){ $('#spinner1').charAnim({ frames: '/ &mdash; \\ |'.split(' '), interval: 120 }); $('#spinner2').charAnim({ frames: '◐ ◓ ◑ ◒'.split(' '), interval: 40 }); $('#spinner3').charAnim({ frames: '▉ ▊ ▋ ▍ ▎ ▏ ▎ ▍ ▋ ▊ ▉'.split(' '), interval: 80 }); $('#spinner4').charAnim({ frames: '┤ ┘ ┴ └ ├ ┌ ┬ ┐'.split(' '), interval: 100 }); $('#spinner5').charAnim({ frames: '◢ ◣ ◤ ◥'.split(' '), interval: 100 }); $('#spinner6').charAnim({ frames: '◡◡ ⊙⊙ ◠◠'.split(' '), interval: 40 }); $('#spinner7').charAnim({ frames: '(-*--------) (--*-------) (-----*----) (-------*--) (---------*)'.split(' '), interval: 220 }); });
}(window, document, jQuery));
Animating characters with jQuery - Script Codes
Animating characters with jQuery - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 2,776 Kb
Views 6,072
Do you need developer help for Animating characters with jQuery?

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!

042 (042) Script Codes
Name
Custom HTML Nested List Counters
JCycle2 with HammerJS
Custom Kakao Share Button
Scrolling through cards with stepper
Fastest website generator, ever.
Vertical Sprite with Greensock TweenMax
JF_01
The Singapore Flag using Pure CSS
Colored Numbers for Ordered List
Fixed responsive layout
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!