In this tutorial you are going to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes also some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.
There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial you ll learn how to displaying portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.
Here you will make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.
In this tutorial, you are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.
When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.
A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.
Here you ll be building a cool Animated navigation list complete with a sliding hover effect.
Here you ll learn how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width.
The gallery will have a view switch that allows to view it with the thumbnail carousel or without.
Here you ll learn how to create a neat effect with some images using jQuery.
The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name.
BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a "page flip" navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.