Skip to main content
100%

$.fn.firework

✓ Published0🌍 Public
Aabernier
Last edited Oct 7, 2013
Created on Feb 10, 2012

A jQuery plugin demo shows a fireworks animation inside a bordered div, triggered by a button or on page load. It renders star-shaped characters from a configurable array (including emoji and HTML snippets) as absolutely positioned spans that animate outward with randomized distance, font size, and opacity changes using jQuery’s `animate()` method with easing functions from jQuery UI. Options like `amount`, `boundary`, `duration`, and `content` are editable live via `contenteditable` text parsed with `eval`, and the plugin’s defaults and custom settings are merged via `$.extend`.

AI-generated description

Similar vizzes

Loading thumbnail…

Fireworks on Canvas

This visualization displays a dynamic field of colorful dots that radiate outward and pulse in a circular pattern, evoking the effect of a fireworks display against a fading black backdrop. The animation is driven by a generative mathematical formula based on a grid of parameters, where each dot’s position is calculated from trigonometric functions of time, and its hue shifts through a rainbow spectrum. The code utilizes the Canvas `getContext('2d')` API for all drawing, with `fillStyle`, `fillRect`, and `arc` methods to render the fading trails and circles, and `requestAnimationFrame` for the continuous animation loop.

Bbootshine2
67% match
Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX
64% match
Loading thumbnail…

D3.js Hanabi

This example animates a celebratory fireworks display for the Brooklyn JS community, featuring text and a dark backdrop. It uses D3.js v3 to generate 100 particles per burst from a normal distribution, mapping them to SVG circles. The `transition` method with custom easing functions like 'circle' and 'exp' orchestrates the launch, explosion, and fading of particles, while an ordinal color scale assigns yellow and green hues. Set intervals periodically trigger the sequence, creating a repeating show.

TThanaporn-sk
62% match
Loading thumbnail…

Fork of Circles with D3

A fireworks rocket launches from a red tube, erupting into a burst of orange particles that scatter and fade against a black background. The animation begins after a two-second delay, with each particle expanding from the launch point and moving outward with randomized trajectories. Built with D3.js v7, the visualization uses SVG primitives and a transition with `easeCubicOut` easing to animate the particles' positions and opacity, creating a simple, looping firework effect.

Wwkj0713@gmail.com
61% match
Loading thumbnail…

CSS Animated Starfield

This example demonstrates a purely decorative, CSS-animated starfield that brings a static header image to life. The animation adds a subtle twinkling effect to the stars by fading them in and out while slightly scaling their size, creating a gentle shimmering ambiance. The code relies exclusively on CSS keyframes and the `-webkit-animation` property, with each star's position and animation delay defined by its unique ID. The background image and texture are layered using CSS `background` properties, while the foreground cover element is positioned absolutely. No JavaScript libraries are used; the effect is achieved solely through HTML and CSS.

CCKschneid
60% match
Loading thumbnail…

stars

This example animates the words “My favorite cities are New York and Paris” as glowing, star-like particles that explode and reform along wavy SVG text paths. It combines SVG for the text layout and paths with Canvas for the particle system, using D3 v5 and the WebFont loader to ensure the custom font is ready before the animation starts. Each word travels along its own path, with a sinusoidal curve for the final word, while colored particles trace the text. A background image, gradient fills, and star-shaped particle textures create a luminous, space-like effect. The animation also includes interactive mouse-based forces (configured via `starOptions`), a dark background with blur/contrast filters, and options to show the paths and endpoints for illustration. The example is part of a series exploring animated text intros with different effects like rotation and gradients.

EEE2dev
60% match
Loading thumbnail…

$.inside

A jQuery plugin called `$.inside` computes an element's position relative to an ancestor, returning normalized coordinates between 0 and 1 that indicate how far the element extends beyond the ancestor's bounds. The demo uses a draggable and resizable `#bar` inside `#foo`, with the `inside` special event updating two meters and a large text readout in real time at 15 frames per second. The code relies on jQuery UI for drag/resize interactions and the `offsetRelative` helper to calculate offsets.

Aabernier
59% match
Loading thumbnail…

jQuery.fn.caroufredsel.js

This gallery example demonstrates a jQuery plugin, `carouFredSel`, which transforms a set of DOM elements into an infinite, scrollable carousel. The visualization showcases the plugin's code architecture, including its constructor, prototype methods for initialization, event binding, and utility functions for item navigation, sizing, and effects. The example highlights how the plugin manages scrolling animations, navigation controls, and responsive sizing through a modular system of helper functions, all written in JavaScript with a CoffeeScript version provided.

Aabernier
59% match