A Pen by Michael Fasani.

100%

A Pen by Michael Fasani.

✓ Published0🌍 Public

Last edited Dec 17, 2013

Created on Dec 16, 2013

This example demonstrates how to add a second, synchronized horizontal scroll bar to a jScrollPane container, placing one bar above and one below the content. It uses the jScrollPane API events, specifically `jsp-initialised` to clone the existing horizontal scroll bar and `jsp-scroll-x` to sync the top bar’s drag handle position with the bottom bar’s movement. The code also manages arrow button states by adding or removing the `jspDisabled` class based on scroll position. The content is plain HTML text, styled with CSS, and the behavior is implemented in jQuery within `script.js`.

AI-generated description

Similar vizzes

Loading thumbnail…

A Pen by Michael Fasani.

This example demonstrates a full-width horizontal navigation menu whose six items are evenly distributed across the available space using CSS Flexbox, with equal width and spacing for each link. The menu relies on the `display: -ms-flexbox` and `-ms-flex: 1` properties to achieve the equal layout, while also including fallback properties for older box-based implementations. The code uses the 'Abel' webfont from Google Fonts for styling, and each tab features a subtle gradient background and a hover effect that darkens the tone. The markup is a simple unordered list inside a `<nav>` element, with no JavaScript or data source involved—the visual effect is purely CSS-based.

FFasani

59% match

Loading thumbnail…

JS Bin

This example demonstrates scroll-position detection within a fixed-height container using vanilla JavaScript. The page defines two nested divs: an outer scrollable `divContainer` with a 200-pixel height and an inner `divContent` containing twelve sample paragraphs. When the user scrolls to the bottom, the code triggers an alert and dynamically expands the inner div’s height to 1000 pixels. The implementation relies on the container’s `onscroll` event handler and compares `scrollTop`, `scrollHeight`, and `offsetHeight` properties to determine when the bottom is reached.

JJaloYang

57% match

Loading thumbnail…

Pseudo Horizontal Bar

This example shows four black vertical bars of descending height arranged from left to right across a white canvas, creating a pseudo horizontal bar chart. Each bar uses an SVG `rect` element, with explicit `x`, `y`, `width`, and `height` attributes hard-coded into the markup. The rendering uses static SVG (no animation or interaction) within a simple HTML page, and the overall effect relies on the viewer’s perception of the bars as part of a single horizontal sequence. The chart is purely presentational, with no axis, labels, or data-binding logic.

RRubanda

55% match

Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel

55% match

Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl

55% match

Loading thumbnail…

Smooth Scrolling

This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.

Mmbostock

55% match

Loading thumbnail…

Bars transitioning over text

Bars transition over text shows a row of colored bars repeatedly rising and falling while the letter inside each bar toggles between two hidden messages. Using D3.js 3.5.5, ordinal and linear scales map letter positions and bar heights, while a custom recursive transition drives each bar’s vertical movement and color change. The code builds an SVG with text elements and rects, animating them via `transition().duration(1000).delay(...).each(slide)`, swapping between the letters arrays on each cycle. The bars cycle through a color scale, and the text flips between "Item explorer" and "by Michael Ankerst" as the animation loops.

EEE2dev

54% match

Loading thumbnail…

Psudo Barplot 2 (horizontal)

This example shows a horizontal bar chart with four rectangular bars labeled A through D, where the first bar displays a CSS-specified green fill that overrides its inline red fill attribute. The SVG is rendered directly in HTML using inline `<rect>` and `<text>` elements, with Google Fonts providing the typography. The primary visualization demonstrates how CSS class styling takes precedence over presentation attributes in SVG, as the green fill from the `.first-bar` class rule overrides the `fill='red'` attribute on the first rectangle.

Ppanthabuddhi@gmail.com

54% match