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


A Legal Primer to Help Develop Explicit Brands Previously Off Limits

Lawrence G. Walters ·

Preventing Data Breaches Staves Off Big Legal Claims

Chad Anderson ·

Q&A: Vera Sky Dons the Crown for 2017 XBIZ Best Cam Model

Alejandro Freixes ·

Why It Pays When Cam Models Block Cyberbullies

Mia Saldarriaga ·

Casey Heart Talks Cam Past, Future

Casey Heart ·

Less Is More for Live Cam Member Promotions

Steve Hamilton ·

Melody Kush Dishes on Camming Career

Melody Kush ·
Show More