scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute […]

HalfStyle: Style Half of a Character by CSS

Sparked by the question β€œIs it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created: HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually. Works on any dynamic text, or a single character, and is […]

CSS Animated Content Switching

A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you should read — I started goofing around with CSS transforms and transitions a bit. The […]

Skrollr – CSS animations linked to scroll position

Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr […]

CSS Filterlab

While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6. With CSS Filters you can create stunning effects. filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2); for […]