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

profile

WIA Profile: Karen Tynan

Women In Adult ·
profile

Q&A: Adrian DeGus Optimizes Adult SEO Partners

Alejandro Freixes ·
opinion

Moving the Needle to Lead Growth

Mitch Platt ·
opinion

Trying to Stop Web Fraud Before It Happens

Jonathan Corona ·
opinion

Webmasters Shouldn’t Wait for Disaster to Hit

Cathy Beardsley ·
opinion

Hefner’s Legacy Lives On in the Industry

Juicy Jay ·
opinion

Privacy Notices Shouldn’t Be Treated as an Afterthought

Corey D. Silverstein ·
opinion

Legal Issues Pop Up When Filming Sex in Public

Lawrence G. Walters ·
trends

A Road Less Traveled: Accepting Alternative Payment Solutions

Stephen Yagielowicz ·
trends

Credit Card Processing Today: Decline or Dominance?

Stephen Yagielowicz ·
Show More