CSS Animated Intro Section – Tutorial

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.

Effects:

  • Bounce
  • Cut
  • Mask
  • Mask2
  • Parallax
  • Scale
  • Video

These intro effects have been created using CSS only.

CSS Animated Intro Section - Tutorial

Tutorial | Demo | Download

MixItUp – jQuery plugin for animated filtering and sorting

MixItUp -  jQuery plugin for animated filtering and sorting

A jQuery plugin providing animated filtering and sorting.

Great for managing any categorised or ordered content like portfolios, galleries and blogs, MixItUp can also function as a powerful tool for engaging application UI and data-visualisation.

Features

  • Optimised animation engine utilising requestAnimationFrame
  • Extensible object-oriented architecture
  • Flex box compatibility (experimental)
  • CSS3 columns compatibility
  • Fine-tune your animation effects with customisable parameters
  • Reverse the direction of effects for elements being filtered out
  • Queue filter, sort and layout change operations
  • Metro/iOS-inspired “stagger” effect
  • CSS-selector based filtering
  • Multi-dimensional sorting
  • Retrieve real-time data via the state object
  • Extensions
  • Transition width/height of target elements (experimental)

Core Features

  • Filter and sort elements with CSS3-optimised animations
  • Build on top of your existing percentage-based responsive layouts and media queries
  • Control filtering and sorting via a simple clickable interface or build more complex custom UI via an extensive API
  • Customise your animations with CSS3 transforms and easing
  • Add and remove elements in real time via an Ajax-friendly API
  • Perform simultaneous filter, sort, and layout change operations

Browser & Platform Support

  • Fully functional in desktop Chrome, Safari and Firefox
  • Fully functional in iOS and Android browsers
  • Functional in IE8+ with animations disabled, fully functional IE10+

Demo | Download

10 jQuery Plugins for Fullscreen Video Backgrounds

Fullscreen Video background jQuery plugins helps you to make your website Pretty Cool

Modern web designers have been in favor of the fullscreen background effect. There are many jQuery plugins available for fullscreen Image Background. Fullscreen videos have also been a topic of interest for Modern web designers. Here we are giving you our collection of 10 jQuery Background Video plugins that can help you for any projects which requires video to display at background. We hope you’ll find our fresh jQuery fullscreen Video background plugins collection useful and please comment below if you have or know any useful fullscreen video background jQuery plugins.

1. OKVideo

OKVideo - jQuery Plugins for Fullscreen Video Backgrounds
Demo | Download

OKVideo is a jQuery plugin that allows for YouTube or Vimeo videos to be used as full-screen backgrounds on webpages.

2. Vide

Vide - jQuery plugin for video backgrounds
Demo | Download

Easy as hell jQuery plugin for video backgrounds.

3. jquery.videoBG plugin

jquery.videoBG plugin
Demo | Download

This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div.

4. BigVideo.js

BigVideo.js jQuery Plugin for Big Background Video (and Images)
Demo | Download

The jQuery Plugin for Big Background Video (and Images)

5. Maximage2

Maximage2 Fullscreen Background HTML5 Video jQuery Plugin
Demo | Download

Fullscreen Background HTML5 Video jQuery Plugin

6. Tubular

Tubular is a jQuery plugin that lets you set a YouTube video as your page background
Demo | Download

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.

7. jQuery Video Background plugin

jQuery Video Background plugin
Demo | Download

HTML5 video background jQuery plugin

8. jQuery.mb.YTPlayer

YouTube movies as background
Demo | Download

Your YouTube movies as background! With this jQuery component you can set a YouTube movie as the background of your page

9. VideoBackground.js

JQuery plugin to add html5 video backgrounds
Demo | Download

JQuery plugin to add html5 video backgrounds to divs and auto-resize them.

10. jQuery.BackgroundVideo

 jQuery Plugins for Fullscreen Video Backgrounds
Demo | Download

jQuery plugin that lets you create background videos using youtube api

ClassyCountdown – Circular jQuery Countdown Timer Plugin

ClassyCountdown - Circular jQuery Countdown Timer Plugin

You May Also Like:
1) 7 Useful Free jQuery CSS3 Countdown Timer Scripts and Plugin
2) 7 Cool Free jQuery CSS3 Countdown Timer Scripts for Developers
3) Circle Diagram – Customizable Circular Progress Bar with jQuery and CSS3
4) jQuery countdown Timer Plugin
5) jQuery Circle Progress – Draw animated circular progress bars
6) Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

ClassyCountdown is a jQuery plugin written by Marius Stanciu – Sergiu, a plugin that allows you to easily create clean circular countdowns. It is fully customizable and includes 12 themes, which can be modified and it uses HTML5 canvas for rendering the circles.

Demo | Download

 

ClassyCountdown - Circular jQuery Countdown Timer Plugin

Velocity.js – Animation framework

Velocity.js - Animation framework

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.

Compatibility

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.

Demo | Download

Ideal Image Slider Javascript Plugin

Ideal Image Slider Javascript Plugin

The aim behind the Ideal Image Slider is to create a slider which has just the right amount of features, with no bloat and be easy to extend so that more features can be added as “extensions”.

Features:

  • HTML5 & SEO friendly
  • CSS3 powered transitions
  • Touch-enabled navigation
  • Fully responsive
  • HiDPI (retina) support
  • ARIA support

Quick Start

<html>
<head>
<!-- Include slider and theme CSS files -->
<link rel="stylesheet" href="ideal-image-slider.css">
<link rel="stylesheet" href="themes/default/default.css">
</head>
<body>
<!-- Create your slider and add images -->
<div id="slider">
<img src="img/1.jpg" alt="">
<img data-src="img/2.jpg" src="" alt="">
<img data-src="img/3.jpg" src="" alt="">
</div>
<!-- Include slider JS file -->
<script src="ideal-image-slider.js"></script>
<!-- Create your slider -->
<script>
new IdealImageSlider.Slider('#slider');
</script>
</body>
</html>

Demo | Download