Web Depot: Highlight Content By Shifting Elements

Stephen Yagielowicz

According to its publisher, Shift.css is a simple framework to build timed, contained CSS animations that provide presentational eye candy.

To deploy Shift.css, first define a DIV to serve as the animation’s container and then define all of the animating child elements within that DIV as Shift Elements, each of which can have animations and timings applied to them as data attributes. Your CSS properties can be added to the Shift Container,such as a background color, height, width and other standard CSS values. Next up come the values for animating elements, including child elements, which can inherit animations from their parent element.

There are three data attributes applied to Shift Elements to add movement and control: data-animation; data-delay; and data-duration. By default, Shift animations are invoked by clicking or tapping on them, but they can play automatically by adding the class shift-play to the Shift Container element. More than a dozen animation presets are currently available, with more scheduled for release.


More Articles


Digital Advertising Really Isn’t Advertising

Juicy Jay ·

Will Your Business Need a Data Protection Officer?

Chad Anderson ·

WIA Profile: Maxine Lynn

Women In Adult ·

Q&A: ExoClick CEO Benjamin Fonzé on Ad Network Conquest

Alejandro Freixes ·

It’s Time for FSC to Set the Terms of Debates

Eric Paul Leue ·

A Legal Primer to Help Develop Explicit Brands Previously Off Limits

Lawrence G. Walters ·

Preventing Data Breaches Staves Off Big Legal Claims

Chad Anderson ·
Show More