未加星标

Create Fully Animated Widgets with Shift.css

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Web animationoffers a way to grab people’s attention and draw them further into a website. There are lots of tools out there to create free animations but Shift.css is one of the newest in the bunch.

38 Inspiring CSS3 Animation Demos 38 Inspiring CSS3 Animation Demos

Editor's note: For a newer, updated version of this post, check it out here. Since the introduction of… Read more

It’s a free open source framework made for creating dynamic animations within any container . And these animations aren’t locked into one sequence . You can actually build custom animations for each element in the block and apply these in a certain order .


Create Fully Animated Widgets with Shift.css

The Shift demo page can show you much better than I can explain in words.

One thing you’ll notice is that each element inside the container is a separate HTML element . Whether it’s an SVG or an image or whatever, you can animate everything separately to create your own custom animation effect .

The library comes with two files, a .css and .js library, and both need to be added to your document head .

I can’t find any GitHub repo for this project, so you’ll need to download the files directly from the Shift.css website .

The next step is to define a container element with some contents. Class names are important so every animating element needs to have the class .shift-element applied .

<div id="shift-container">
<div id="div1" class="shift-element">
<div id="div2" class="shift-element"></div>
<div id="div3" class="shift-element"></div>
</div>
</div>

Along with these classes, you can also add html5 data attributes to define how the animation works. Right now there are only three but they should be enough to customize a full animation effect.

data-animation : Name of the animation data-delay : Total delay(in seconds) before the animation starts data-duration : Total length(in seconds) of the animation

The animation name needs to be a predefined animation created for the Shift library. Right now there are 15 animation names to choose from . You can see them listed at the bottom of the Shift.css homepage.

Just copy/paste whatever you want into the animation name setting and you should be good to go! For example, if I wanted to use the exit fade animation I’d add data-animation="shift_exitFade" as a data attribute to whatever element should animate that way. Easy peasy.

I do wish this library came with more options in javascript because it would let developers have so much more control over the placement and features. But for a simple(and free) animation framework I can’t complain.

Shift.css is perfect for newer developers who want to create more complex animation styles without writing verbose code from scratch.

Tuesday.css is The Hottest Animation Library Right Now Tuesday.css is The Hottest Animation Library Right Now

By now you should already be familiar with Animate.css as the primary animation library among web designers. But… Read more

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSS3HTMLCSSGitJavaScriptJavaHTML5GitHub
分页:12
转载请注明
本文标题:Create Fully Animated Widgets with Shift.css
本站链接:http://www.codesec.net/view/532330.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(56)