Animations for Thumbnail Grids with CSS3 & JavaScript

Animations for Thumbnail Grids with CSS3 & JavaScript

Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

InstaStream : jQuery plugin to stream pictures from Instagram

InstaStream : jQuery plugin to stream pictures from Instagram

Instastream is a simple jQuery plugin to stream pictures from Instagram.Before to go further be sure you have an Instagram account and an Instagram API Key.You can choose how many pictures you want by slide. CSS cover 1,2,3 and 4 results, feel free to add new styles if you want more results by slide.

SVG.js : A lightweight library for manipulating and animating SVG

SVG.js : A lightweight library for manipulating and animating SVG

A lightweight library for manipulating and animating SVG.Svg.js has no dependencies and aims to be as small as possible.With svg.js you have all the power of vector graphics at pocket size.

intention.js : A library for intentionally dealing with responsive design

intention.js : A library for intentionally dealing with responsive design

Intention.js is a lightweight tool for responsive design developed at Dow Jones that manipulates the DOM via HTML attributes. The methods for manipulation are placed with the elements themselves, so flexible layouts don’t have to be so abstract and messy.

What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based onusers’ devices. Context.js creates a set of common page contexts for width thresholds, touch devices, high-res displays and a fallback.

mightySlider : jQuery Responsive Slider

mightySlider : jQuery Responsive Slider

mightySlider is a jQuery plugin for creating advanced one-directional slider with item based navigation support.

It can be used as a simple image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.

Features:

  • Responsive design.
  • Animated HTML captions with customizable effects.
  • Easy installation in your Website.
  • Unlimited Slides.
  • Unlimited Caption Layers.
  • Unlimited Caption Effects.
  • Native browser fullscreen support.
  • Cross browser, supports Chrome, FireFox, Safari, Opera and IE7+.
  • Device friendly, works in iPhone, iPad, Android Devices and Windows Phone.
  • Highly User Interface Design.
  • Fully customizable, it’s possible to customize or redesign all parts of mightySlider.
  • Search engine optimized (SEO).
  • YouTube and Vimeo videos are supported.
  • Super smooth hardware accelerated CSS3 transitions for supported touch devices.
  • Smart lazy loading – loads nearby images in background, so users don’t need to wait each time and images are available instantly.
  • Simple clean & valid markup.
  • Deep linking – link to specific slide from URL.
  • Adjustable speed, transition and easing for each caption or slide.
  • Auto cycling with optional pause on hover.
  • Thumbnails, Tabs or bullets for navigation.
  • Multiple sliders allowed on one page.
  • Keyboard support.
  • Touch support.
  • Mouse support: (Click, Wheel).

jQuery End Page Box : Displaying a Box at the End of the Page

jQuery End Page Box : Displaying a Box at the End of the Page

In this day and age, we are all competing for attention. The longer people stay on your website and drill down to your content, the better. Today, I have decided to implement a plugin called End Page Box that will let you easily show any dialog when the user scrolls to the bottom (or any range) of the page.

You can use it to recommend other posts on your website, show related posts, or even to annotate the page with extra information which will eventually create a richer and deeper experience for your users.

This plugin will keep track of your scroll location and whenever you scroll to the specified area, the plugin will automatically display the dialog until you go out of range. The animations available are a combination of jQuery for basic animations such as fade and slide, and CSS3 (defined in endpage-box.css) for more complex ones.

freewall : jQuery plugin for Creating dynamic Grid layout

freewall : jQuery plugin for Creating dynamic Grid layout

Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet. Freewall is all-in-one solution help you to create many types of grid layout (flexible layout, grid layout, images layout, pinterest-like layout, etc) with nice CSS3 animation effects and call back events..

jQuery TextFill : Resizing text to fit into container

jQuery TextFill : Resizing text to fit into container

jQuery TextFill resizes text to fit into a container and makes font size as big as possible.

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

jQuery Jump To : Create a smooth jump to Sub Navigational Menu

A jQuery plugin that let you create a smooth jump to sub navigational menu in one JS call.The menu can be used to assist your navigation for pages with a lot of content.

Making HTML dropdowns not suck with CSS3 & JavaScript

Making HTML dropdowns not suck with CSS3 & JavaScript

Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border.

In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance.