This demonstrates a simple slideshow using JQuery, specifically JQuery's animate method. The challenge here is to get the slides to continuously loop forward and in reverse. The layout in this example shows how this is done by first moving the subsequent or preceding slide into position before animating the transition. In an actual implementation, the slides to the right would be hidden from view (such as by setting the overflow property on the #slide-container element to hidden).
Rich Donohue rgdonohue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=Raleway); | |
| body { |
A demonstration of the W3C Candidate Recommendation CSS Multi-column Layout Module. Viewing on a new page allows columns to adjust in a fluid sense, inviting opportunities for implementation in a responsive layout.
This demonstrates a responsive image technique using picturefill.js, currently one of the best responsive image solutions available. Essentially it mimics an exciting web standard on the horizon, the proposed picture element, to deliver images at an appropriate size (and bandwidth!) for a given screen size. Read more about responsive image solutions from the filament group.
My demonstration here always makes use of "art direction." I've manually cropped, zoomed, and changed the focal point of each image. View this example in a new window to resize the display.
This example demonstrates using CSS transition and @keyframes to animate the drawing of a SVG path. Insight garnered from How SVG Line Animation Works.
Map demonstrates using D3.js to draw a world choropleth map and sequence through data of hypothetical timestamps.
Updating the radius range values using the event scale value to re-size proportional symbols when zooming a map in D3.js. Works okay.
Faking a spotlight filter of renewable energy power plants in the US.
This simple example initially loads the page with an opaque div that covers the map and contains an animated loader gif image. Once the data file (10.8MB) has been loaded with an AJAX request, the div is removed using JavaScript.
Mapping domain values to range outputs with d3.
d3.scale.threshold()
.domain([
10,
20,
30,
40
])OlderNewer