A collection of fancy text effects, to animate the tagline and action buttons of your website intro section.
Animations in web design are often used to drive the user’s focus to a specific section. One section you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However here I’m going to share a tutorial for creating some text effects that you can easily apply to the intro section of your web projects.
These intro effects have been created using CSS only.
Velocity.js (made by Julian Shapiro) is an animation engine that re-implements jQuery’s $.animate() for significantly greater performance (making Velocity also faster than CSS animation libraries) while including several new features.
In just 9Kb zipped, Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.
Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), your code doesn’t need to change.
In this tutorial you will see how to make a drop down box by using CSS3 animations and a checkbox hack. Usually these are made with the help of jQuery but thanks to CSS3 we can do this with the transition property.
Toggle switch has become one of the popular form elements in mobile apps, sometimes, on desktop website. It makes perfect sense while we use it on touch screen devices because it works exactly like those switches in our living space.
In this tutorial, we show how to easily create some fantastic round, flat and flip-style CSS toggle switches. We’ll be using pure CSS to create some toggle switches, adding a neat user experience to checkbox functionality.
A simple 3Dform concept where different faces act as different parts of the form. The default state looks like a flat button which surprises the user by rotating to show the next face which is the text input.
On submission the user sees a pulsating loader and finally the thank you message on completion. This thank you message face could also be used to show validation errors.
This concept can be further enhanced to have multiple inputs as different faces of the cuboids being manipulated dynamically using JS.