Splash animation with checkboxes

100%

Splash animation with checkboxes

✓ Published0🌍 Public

Last edited Feb 27, 2020

Created on Feb 7, 2020

This example demonstrates a playful splash animation triggered by user interaction. A checkbox input, hidden via CSS, controls a series of animations when checked. The code uses HTML checkboxes, CSS transitions, and keyframe animations to create a mustard bottle that shakes and a paint splatter image that scales and fades over eight seconds. The splatter image is loaded from an external URL and rendered with a mix-blend-mode overlay effect, while the label element acts as a clickable toggle.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

animating flexbox

A button labeled "Remove blocks" triggers a two-stage animation that collapses four square divs within a flexbox container. The example demonstrates how D3.js transitions sequence opacity changes and dimensional resizing, with the divs first fading out over 300 milliseconds, then shrinking their width and margins to zero over 700 milliseconds. The animation toggles between the original and collapsed states with each button click, showcasing the interplay between CSS flexbox layout and D3's transition API for managing HTML elements.

KKaustav Sen

63% match

Loading thumbnail…

SVG Experiment

This example demonstrates the interactive styling capabilities of SVG graphics, using CSS transitions to create a smooth visual response when the user hovers over a blue circle, which gradually turns red and thickens its border over three seconds. The visualization composes a variety of SVG primitives, including lines, a circle, and a path, all rendered directly within the HTML page using inline SVG markup. The implementation relies on vanilla CSS and JavaScript, with no external libraries, and is built using React as indicated by the project metadata, though the code itself is a standalone HTML file.

MMinchan Jun

62% match

Loading thumbnail…

form with strip background and css animation bubbles

A form with floating labels sits on a striped background made via repeated CSS `linear-gradient` layers. Eight geometric shapes (circles, triangles, squares) float upward from the bottom in CSS keyframe animations (`shapes1`, `shapes2`, `shapes3`) with varied delays, durations, and colors, some using `border-radius` and border triangles. JavaScript event listeners on `focusin`/`focusout` toggle an `.active` class to animate labels. Password validation shows requirements when invalid, using `:invalid` and `:placeholder-shown` selectors. No external libraries are used; all rendering relies on native CSS and JavaScript.

KKacieW

62% match

Loading thumbnail…

Untitled

This example shows a set of overlapping circles and ellipses inside an SVG canvas, demonstrating CSS-driven interactivity and animation. Three yellow circles with green strokes transition their radius and stroke-width over five seconds when hovered, while three nested ellipses change their fill color to blue on hover. Built with React and rendered using SVG markup, the visualization relies on CSS properties like `transition`, `r`, and `stroke-width`, applied directly to SVG elements. The source code uses a basic HTML structure with inline styles, illustrating how CSS can directly manipulate SVG shapes without JavaScript logic.

Kkaline

62% match

Loading thumbnail…

Click to Select: Interaction with Unidirectional Data Flow

Five fruit circles animate in and out of a bowl, and clicking one selects it with a navy stroke. The example demonstrates unidirectional data flow where React-like state changes trigger a re-render that updates SVG circles via D3’s data join and `transition` for smooth radius and fill changes. It uses `scaleOrdinal` for color and size, `selectAll` with key functions, and `merge`/`exit` for enter-update-exit patterns. The code shows automatic updates as fruits are removed or replaced without direct DOM manipulation.

AAnnie Liao

62% match

Loading thumbnail…

Demo-1

A playful D3.js and React visualization presents 10 interactive circles and 8 interactive squares in rainbow colors, with pulsing, bouncing, rotating, flip, and spin animations. Clicking a shape selects it, dimming unselected shapes. It loads letter and count data from a CSV file using d3.csv. The title text animates with a stroke-dash drawing effect and rainbow color cycle, while d3.scaleLinear, d3.scaleSequential, and d3.interpolateRainbow handle sizing and coloring.

NNita

62% match

Loading thumbnail…

Copying Nita's work

Three blue rectangles sit in a row on a black-outlined SVG canvas. This example demonstrates interactive CSS transitions on SVG elements using plain React within an HTML page. Each rectangle is assigned a distinct CSS class, and hovering over one gradually changes its fill color and dramatically thickens its stroke over three seconds via the `transition: all 3000ms` rule. The code relies on standard SVG markup and CSS hover pseudo-classes, with no external JavaScript libraries beyond React for structure.

Aabhineetsingh10

62% match

Loading thumbnail…

Untitled

This example demonstrates an interactive coloring book application built with the React framework and rendered on HTML Canvas. Users select colors from a customizable palette and apply them to images using a brush tool, with an eraser option and adjustable brush size. The component is implemented as a custom HTML element using JavaScript's Custom Elements API and relies on jQuery for DOM manipulation. Images are stored as static assets, and the interface includes navigation thumbnails, undo, clear, save, and print functions. The styling is controlled through CSS overrides, allowing for theme customization.

Sslawson48

61% match