Hi Slider : jQuery eye-catching 2D/3D realistic Slider

Hi Slider : jQuery eye-catching 2D/3D realistic Slider

Hi Slider makes it easy for anyone to create awesome eye-catching 2D/3D realistic jQuery Slider without any programming skills. Creating an image gallery slider and making a customized WordPress slider plugin have never been so easy and intelligent, even non-coders can design gorgeous jQuery photo slideshow. You just need to “Click to Select”! You can publish a gorgeous slider for your website within minutes!

jQuery ReSmenu – Select based Responsive menu

jQuery ReSmenu - Select based Responsive menu

jQuery ReSmenu is a very simple and lightweight (~1Kb) jQuery plugin that collapse ul menus into selects on responsive layouts.

jQuery Repeat : jQuery plugin for filling out mock-ups

jQuery Repeat : jQuery plugin for filling out mock-ups

Repeat is for filling out mock-ups, making it easy to duplicate blocks of sample content.The main use is duplicating sample content in templates, examples, prototypes and demo pages but without needing a server or maintaining a mess of copy-pasted HTML.

Other uses include mocking UI actions that add content, such as dummying pagination or faking infinite loading content.

Matter.js : 2D Rigid body physics Engine for the web

Matter.js : 2D Rigid body physics Engine for the web

Matter.js is a 2D rigid body physics engine for the web written in JavaScript (yes, another).

Features:

  • Physical properties (mass, area, density etc.)
  • Rigid bodies of any convex polygon
  • Stable stacking and resting
  • Restitution (elastic and inelastic collisions)
  • Conservation of momentum
  • Friction and resistance
  • Constraints
  • Gravity
  • Composite bodies
  • Sleeping and static bodies
  • Original JavaScript physics implementation (not a port)
  • HTML5 canvas renderer (optional)
  • Mobile-compatible (touch, scaleable)
  • Cross-browser (chrome, firefox, IE8+)
  • World state serialisation (requires resurrect.js)
  • Built in GUI for testing (requires dat.gui.js)
  • Time scaling (slow-mo, speed-up)
  • Broad-phase, mid-phase and narrow-phase collisions
  • Events (edge)
  • Sprite texture rendering (edge)

Tilted Content Slideshow with CSS3 Transform & Animation

Tilted Content Slideshow with CSS3 Transform & Animation

A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.

The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation.

InfinitySlider – jQuery Slider with CSS3 Animations

InfinitySlider - jQuery Slider with CSS3 Animations

Modern, Customizable, Clean, Fluid and Responsive. Responsive effects by default and fully compatible with Desktop, Notebook, Tablet, Smarphone, Firefox, Chrome, Opera, Safari and Internet Explorer.Image Autofit is an awesome feature that allows you to responsive your images automatically by cutting its edges and resizing its sizes, to preserve a high definition on every device and create an awesome slider for desktop and mobile.

Features:

  • Super-Fluid CSS3 Effects & Transitions on Desktop & Mobile
  • You can select your IN/OUT/BACK Times for each element
  • HTML & CSS Content supported, you can add texts, images, videos, canvas, pricing tables, and all you want.
  • Fully Support of Video Embedding as Fullscreen or Boxed
  • Youtube & Vimeo API that stops the video if you change the slide
  • Image Autofit that allows you to select the subject position on the images
  • Cinematic Effect that allows you to make an animation-movement of the images
  • Blur Effect that allows you to make an automatic blur image from a normal one
  • Fully Cross-Browser Compatibility
  • Bootstrap 3 Integrated so you can use all the Bootstrap Elements inside the slide
  • Easy to integrate with other Frameworks
  • Font Awesome 4 Integrated
  • Fully Responsive
  • Play & Stop with the slide loader
  • Autoplay, you can active it to start your slide when the page is opened
  • Keyboard Navigation

 

CSS Button Hover Effects

CSS Button Hover Effects

Today I’d like to share with you a bunch of pretty neat CSS only buttons I’ve put together. I’m also going to go over their creation, and using them in design.

Button design can actually be quite fun so here are a bunch of ideas I put together to share with you which you are totally entitled to use on your site or project. The idea was to use CSS in a way to make buttons more fun, or interesting at least, and I accomplished this in a few ways.

Wrangle : jQuery Touch-friendly plugin to wrangle up your Images

Wrangle : jQuery Touch-friendly plugin to wrangle up your Images

Wrangle is an experimental plugin that will have you rustling up your herd of photos like a real cowpoke. Our tool gives your app a new way to perform multiple selections — using your mouse … or even your fingers! So grab your lassos. This tool’s your huckleberry.

Wrangle is a responsive, touch-friendly selection plugin for jQuery or Zepto. Wrangle offers a unique method of multiple selection: by drawing a line through items to select them. The plugin is lightweight and designed to be exstensible and adaptable. It’s also highly experimental, due in no small part to the diversity of touch implementations in various devices and browsers.

jQuery editTable Plugin

jQuery editTable Plugin

jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables. jQuery editTable can be used both in ajax and/or HTTP POST contest and let you preset the title and number of columns or just let complete freedom to the user. You can even append custom behaviors to single column cells (ex. jQuery UI Datepicker).

Hopscotch : jQuery Product Tour Plugin

Hopscotch : jQuery Product Tour Plugin

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Features:

  • Callbacks for tour events (e.g. onStart, onEnd, onShow, onNext, onPrev, onClose)
  • Multi-page persistence using HTML5 sessionStorage using cookies as a fallback
  • I18N support
  • Lightweight single callouts