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.

Related:  

More Articles

opinion

Facebook Ends Custom Link Preview Snippets

Lauren MacEwen ·
opinion

Dealing With the Press Can Be a Mixed Blessing

Eric Paul Leue ·
opinion

It’s Crucial to Keep Records Up-to-Date, Ask Same of Vendors

Cathy Beardsley ·
opinion

How to Safely Buy a Pre-Owned Adult Domain

Adrian DeGus ·
profile

WIA Profile: Ruth Blair

Women In Adult ·
profile

New Kids on the Block: FuckingAwesome.com

Rhett Pardon ·
trends

Mandatory Age Verification: A Game Changer for Adult

Stephen Yagielowicz ·
trends

The European Legal Scene: Challenges, Opportunities in 2017

Stephen Yagielowicz ·
trends

Euro Trends: Evolving a Unique Marketplace

Stephen Yagielowicz ·
Show More