Skip to main content
100%

Gist 7416538

✓ Published0🌍 Public
Aakre54
Last edited Nov 12, 2013
Created on Nov 11, 2013

A rotating carousel cycles through a list of slider frames, each displaying a distinct visual effect. The code uses `requestInterval` to trigger frame transitions every four seconds, removing the first frame and appending a cloned copy to the end. Stylus styles define three transition effects—fade, scroll-down, and scroll-left—using CSS `transition` properties with `transform: translate3d` and opacity changes. The example demonstrates pure CSS-based animation without a charting library, relying on DOM manipulation and hardcoded item dimensions for offset calculations.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist b5b1465342d4885de179

This animated visualization demonstrates a carousel interface built with Backbone.js, where items cycle through views with smooth transitions. The code uses a Backbone View to manage carousel behavior, including previous/next navigation controls and automatic item rotation. The animation renders the carousel's items dynamically, updating the active element as users interact with the controls. The visualization relies on jQuery for DOM manipulation and Underscore for utility functions, with the Backbone framework providing the structural foundation for the view logic.

Aabernier
73% match
Loading thumbnail…

Chained Transitions

Fifty circles, each representing a discrete ordinal value, form a vertical column on the left edge of a 960 by 500 pixel canvas. The animation shows the circles moving horizontally back and forth, creating a chained, wave-like effect as each circle starts its journey after the previous one completes a traversal. The d3.js library (version 2.9.1) drives the motion, using a custom `slide` function to schedule `transition()` calls per circle, with each transition's duration dynamically calculated from the `Date.now()` timestamps to create the sequential delay. The source code is a single HTML file from a gist, with circles styled via CSS.

GGerHobbelt
71% match
Loading thumbnail…

Intro to CSS Animations

This example demonstrates the flexibility of CSS animations and transitions for creating simple motion and interactive effects in web graphics. A static SVG hexagon is embedded as a base64 data URI, and its styling responds to user interaction—hovering causes the shape to scale up and rotate 45 degrees with a smooth two-tenths-second transition. The CSS also defines a slide keyframe animation that translates an element horizontally, though the active circles using this effect are commented out in the code. The example uses core CSS features including `@keyframes`, `transform` properties, and transition timing.

JJn1532
71% match
Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu
70% match
Loading thumbnail…

slider

A range slider input automatically advances in ten-step increments every second, moving from zero to one hundred. The visualization demonstrates a timed sequence control using basic HTML and JavaScript, with D3.js handling DOM selection and attribute updates. The code employs the `setInterval` function to trigger a recurring update, while `d3.select` modifies the slider's value property. A console log tracks the progression, and the timer clears once the maximum value is reached. This example highlights a simple animation loop without underlying dataset visualization.

Aaaizemberg
70% match
Loading thumbnail…

static-transition

A set of four parallel line charts displaying randomly generated data, with each chart independently redrawn every five seconds. The charts are rendered in SVG using D3's line generator and axes. Superimposed on top is a translucent canvas layer that constantly draws random black and white rectangles, creating a static-like visual noise effect. During each transition, the canvas alternately switches between drawing only black squares with a larger size and then both colors with a smaller size, while the underlying SVG charts update.

11wheel
69% match
Loading thumbnail…

Gist 9070122

A kaleidoscope animation built entirely with CSS 3D transforms and divs, overlaid on a pizza image. The page constructs a hexagonal tiling from six triangular divs, each using nested transforms with rotations and scaling to map the image into a kaleidoscopic pattern. The animation cycles through the kaleidoscope’s symmetrical views by shifting the hexagon positions, creating a continuously morphing, mirrored effect.

Aabernier
69% match
Loading thumbnail…

Chained Transitions II

Fifty circles, arranged vertically and colored by a linear scale interpolating through HCL color space, slide left and right across the SVG canvas in repeating chains. Each circle’s initial delay staggers its motion, and the `slide` function uses `d3.active` to restart the sequence after each transition completes. The example demonstrates chained transitions in D3 v4, binding data to a `d3.scalePoint` domain and animating the `cx` attribute with `transition.attr`.

Mmbostock
69% match