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 Free Portfolio PSD Web Templates [Freebies]

Today We would like to share with you 10 Free Portfolio PSD Web Templates for every designer who want to have a website for showing his work. These templates were designed by professional designers and handpicked from trusted sources.

Fertile – PSD Portfolio Template

Here’s an exclusive portfolio template by Pixelhint called Fertile. This template is clean, modern, and also available in HTML/CSS format at Pixelhint.

Fertile – PSD Portfolio Template
Download


Folio – One Page Portfolio PSD Template

Folio is a portfolio PSD template designed with flat-style and One-Page design. The PSD template is fully layered and well organized. Folio template can be used to create portfolio website for personal or agency websites.

Folio – One Page Portfolio PSD Template
Download


Strict Portfolio Template

Strict is a modern one page template for creating portfolio, freelance and personal websites. The design is clean and flat, and you can easily create a coded version. The Strict download package comes with an editable layered PSD file for customization. Strict Portfolio Template was designed by Ekhtiar Mahmud.

Strict Portfolio Template
Download


Creativo – Free One page PSD template

Creativo is a colourful one-page portfolio PSD template design for creative folks. Fully customizable (responsive) solution to showcase your creative informations with a modern and professional touch!

Creativo - Free One page PSD template
Demo | Download


Personal Site Free PSD

Personal Site Free PSD

Demo | Download


Moderno – Creative Simple Portfolio Page

Moderno is small and simple PSD portfolio web page template, great for small agency and freelancers. Modern and clean design with free google fonts .Links for fonts and images can be found in “help” file. Note – Images are not included in psd file.

Moderno - Creative Simple Portfolio Page
Download


Portfolio site Freebie

Portfolio site Freebie

Demo | Download


Minimal Portfolio Template PSD with Mobile Version

Minimal Portfolio Template PSD file is full layered so it is easy to manage.

Minimal Portfolio Template PSD with Mobile Version
Demo | Download


FREE PSD Creative Portfolio Bootstrap 3 Template – REEN!

This FREE PSD Resource comes from Creative Portfolio Bootstrap 3 Template – REEN! It is pixel perfect (nearly), well organized in layers, based on the Bootstrap 3 Grid System and includes hover and on scroll states as well!

FREE PSD Creative Portfolio Bootstrap 3 Template – REEN!
Demo | Download


Freebie: Hexal Portfolio Template

Hexal is a single page portfolio template that came out as a by product of various design experimentation’s with hexagons.

Freebie: Hexal Portfolio Template
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