Category Archives: JavaScript/jQuery

Before/After Used in National Climate Change Website

The US government’s Global Change Research Program recently debuted a fancy new website with loads of HTML5 and CSS3 bells and whistles to discuss climate change. Among the visual eye candy is our own Before/After plugin in use to show the dramatic change in the Alaskan Muir glacier over a period of 60 years. Have a look at http://nca2014.globalchange.gov/report/regions/alaska#graphic-20971.

Time.com Using the Before/After Plugin to Show Typhoon Haiyan Disaster Images

Thanks to Time.com, for choosing to use the Before/After plugin on their article, “Devastating Before and After Images of Typhoon Hiayan“. In addition to this story, time.com has also featured the Before/After plugin on several other stories including:

The Flick Scroller

Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.

I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.

I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.

Demos

A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.