3d Portfolio Layout Design Jquery

Best jQuery Portfolio Plugins & Tutorials with Demo

Spotlight : Lightweight Image Gallery Plugin

Spotlight is a web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

Spotlight runs out of the box:

No additional Javascript coding
No additional HTML snippets
No additional CSS resources
No additional images/assets
No additional handling of dynamic content and event listener

Animated Image Columns with TweenMax

An experimental web layout where several image columns get animated out when a menu item is clicked.The idea is based on the current trend of a grid layout where the columns are animated. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.

Grid Reveal Effects with Anime.js

Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

Recently, a new version ofanime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

Fullscreen Hover Loop Effect with CSS & TweenMax

Today we'd like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer's website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.

Grid Layout with Scrollable Content View

Today we'd like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered byTweenMax.

DoFilter : jQuery Bootstrap Multipurpose Filtering & Shorting

DoFilter is a Full Responsive Bootstrap Multipurpose Filtering and Shorting plugin built on Latest Version of Bootstrap Framework (v3.3.7), HTML5, CSS3 and jQuery. Its wonderful features can be used to Filtering and Shorting your website content as like Portfolio, Service, Team, Blog, Products, Pricing, FAQ etc. Also you can customize it for Filtering and Shorting any your website content.

19 Different Style Isotope Filtering
Grid and Masonry Filtering and Shorting
Lightbox Image Gallery
Image Hover Effect
W3C Valid HTML Code
HTML5 ,CSS3 & jQuery
100% Responsive & Mobile-Friendly Layout

Simple Gallery Plugin with jQuery & Bootstrap

A simple gallery built using JavaScript, jQuery and Bootstrap. To make gallery working you need make it run on other than file URI scheme

Muuri : Filterable & Draggable Grid Layouts with JavaScript

Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that's a lot of features in one library, but we have tried to make it as tiny as possible. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.

sdFilterMe : jQuery Portfolio & Gallery Filter Plugin

sdFilterMe is a simple light-weight jQuery plugin to easily filter and order portfolio, articles, gallery, etc.

3D Portfolio Template in CSS & jQuery

A portfolio template, with a filter that triggers the rotation of 3D sections.

CSS 3D Transforms can be used in plenty of creative ways, particularly if combined with CSS Transitions! Today's nugget is a good example of how to use CSS to create a parallelepiped, whose faces are different projects. A filter on top of the page triggers the 3D rotations that reveal new projects.