Boilerplate

100%

✓ Published0🌍 Public

Last edited May 27, 2014

Created on May 27, 2014

This example shows a simple image rotator that cycles through a series of figures with captions, displaying one at a time with a fade transition. Users can manually advance or rewind using the previous and next arrow controls, or enable automatic rotation by adding the "auto" class to the container. The implementation uses vanilla JavaScript with event delegation and the `classList` API to toggle visibility, while CSS transitions handle the opacity changes. The markup relies on standard HTML5 `<figure>` and `<figcaption>` elements, with placeholder images sourced from placehold.it.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7416538

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.

Aakre54

68% match

Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

KKacieW

68% 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

68% match

Loading thumbnail…

Simple Bootstrap Carousel

A Bootstrap carousel displays a sequence of three placeholder images, each a solid color block, with left and right arrow controls for manual navigation. The example relies on jQuery 2.2.4 and Bootstrap 3.3.6's carousel JavaScript plugin, initializing the carousel with `data-ride="slide"` and `data-interval="false"` to prevent auto-advancing. The `carousel-control` links trigger previous and next slides via the `data-slide` attribute, while the active slide is marked by the `.active` class on the `item` div. The layout is constrained by a wrapper set to 800 pixels wide, with a light gray page background.

Aadamfknapp

66% match

Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

JJonas Carvalho

65% match

Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AAndrew-Kiwa

64% match

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

63% match

Loading thumbnail…

image-fade

This example demonstrates a cross-fading transition between two images of the same scene—a daytime and a nighttime view—using jQuery's `fadeIn` and `fadeOut` methods. The visualization shows how two static images can be swapped with a smooth opacity transition, creating a before-and-after effect. The code relies on jQuery to handle the fade animations and a `div` container with absolute-positioned images. Although D3.js v4 is loaded in the page, the visible behavior uses only jQuery DOM manipulation and animation, with image sources pulled directly from GitHub URLs.

BBillyBHWong

62% match