|
|
Line 121: |
Line 121: |
| <a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a> | | <a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a> |
| <a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a> | | <a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a> |
- | </div>
| |
- | <div>
| |
- | <img src="images/2.jpg" alt="" />
| |
- | <h1>Animated Portfolio Gallery</h1>
| |
- | <p>Today we will create an animated portfolio gallery with jQuery.
| |
- | The gallery will contain a scroller for thumbnails and a
| |
- | content area where we will display details about the portfolio
| |
- | item. The image can be enlarged by clicking on it, making
| |
- | it appear as an overlay.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/3.jpg" alt="" />
| |
- | <h1>Annotation Overlay Effect</h1>
| |
- | <p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
| |
- | items of a web designers portfolio. We got the idea from the wonderful
| |
- | portfolio of www.rareview.com where Flash is used to create the
| |
- | effect. We will use jQuery.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/4.jpg" alt="" />
| |
- | <h1>Bubbleriffic Image Gallery</h1>
| |
- | <p>In this tutorial we will create a bubbly image gallery that
| |
- | shows your images in a unique way. The idea is to show the
| |
- | thumbnails of albums in a rounded fashion allowing the
| |
- | user to scroll them automatically by moving the mouse.
| |
- | Clicking on a thumbnail will zoom in a big circle and
| |
- | the full image which will be automatically resized to
| |
- | fit into the screen.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/5.jpg" alt="" />
| |
- | <h1>Collapsing Site Navigation</h1>
| |
- | <p>Today we will create a collapsing menu that contains vertical
| |
- | navigation bars and a slide out content area. When hovering
| |
- | over a menu item, an image slides down from the top and a
| |
- | submenu slides up from the bottom. Clicking on one of the
| |
- | submenu items will make the whole menu collapse like a card
| |
- | deck and the respective content area will slide out.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/6.jpg" alt="" />
| |
- | <h1>Custom Animation Banner</h1>
| |
- | <p>In today’s tutorial we will be creating a custom animation banner with jQuery.
| |
- | The idea is to have different elements in a banner that will
| |
- | animate step-wise in a custom way.</p>
| |
- | <p>We will be using the jQuery Easing Plugin and the jQuery 2D
| |
- | Transform Plugin to create some nifty animations.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/7.jpg" alt="" />
| |
- | <h1>Full Page Image Gallery</h1>
| |
- | <p>In this tutorial we are going to create a stunning full page
| |
- | gallery with scrollable thumbnails and a scrollable full
| |
- | screen preview. The idea is to have a thumbnails bar at
| |
- | the bottom of the page that scrolls automatically when
| |
- | the user moves the mouse. When a thumbnail is clicked,
| |
- | it moves to the center of the page and the full screen
| |
- | image is loaded in the background.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/FullPageImageGallery/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/8.jpg" alt="" />
| |
- | <h1>Hover Slide Effect</h1>
| |
- | <p>Today we will 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. The sliding effect will be random, i.e.
| |
- | the images will slide to the top or bottom, left or
| |
- | right, fading out or not. When we click on any area,
| |
- | all areas will slide their images out.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/9.jpg" alt="" />
| |
- | <h1>Merging Image Boxes</h1>
| |
- | <p>Today we will show you a nice effect for images with jQuery.
| |
- | The idea is to have a set of rotated thumbnails that,
| |
- | once clicked, animate to form the selected image.
| |
- | You can navigate through the images with previous
| |
- | and next buttons and when the big image gets clicked
| |
- | it will scatter into the little box shaped thumbnails again.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Development/MergingImageBoxes/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/10.jpg" alt="" />
| |
- | <h1>Compact News Previewer</h1>
| |
- | <p>Today we will create a news previewer that let’s you
| |
- | show your latest articles or news in a compact way.
| |
- | The news previewer will show some list of articles
| |
- | on the left side and the preview of the article with a
| |
- | longer description on the right. Once a news on the left
| |
- | is clicked, the preview will slide in.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/11.jpg" alt="" />
| |
- | <h1>Overlay Effect Menu</h1>
| |
- | <p>In this tutorial we are going to create a simple menu
| |
- | that will stand out once we hover over it by covering
| |
- | everything except the menu with a dark overlay.
| |
- | The menu will stay white and a submenu area will
| |
- | expand. We will create this effect using jQuery.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/12.jpg" alt="" />
| |
- | <h1>Polaroid Photobar Gallery</h1>
| |
- | <p>In this tutorial we are going to create an image gallery
| |
- | with a Polaroid look. We will have albums that will expand
| |
- | to sets of slightly rotated thumbnails that pop out on hover.
| |
- | The full image will slide in from the bottom once a thumbnail
| |
- | is clicked. In the full image view the user can navigate
| |
- | through the pictures or simply choose another thumbnail
| |
- | to be displayed.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/13.jpg" alt="" />
| |
- | <h1>Pull Out Content Panel</h1>
| |
- | <p>In this tutorial we will create a content panel that
| |
- | slides out at a predefined scroll position. It will
| |
- | reveal a teaser with related content and it can be
| |
- | expanded to full page size to show more. A custom
| |
- | slider allows to scroll through many items in the
| |
- | panel.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/PullOutContentPanel/" target="_blank" class="demo">Demo</a>
| |
- | </div>
| |
- | <div>
| |
- | <img src="images/14.jpg" alt="" />
| |
- | <h1>Thumbnails Navigation Gallery</h1>
| |
- | <p>In this tutorial we are going to create an extraordinary
| |
- | gallery with scrollable thumbnails that slide out from a
| |
- | navigation. We are going to use jQuery and some CSS3
| |
- | properties for the style. The main idea is to have a
| |
- | menu of albums where each item will reveal a horizontal
| |
- | bar with thumbnails when clicked.</p>
| |
- | <a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a>
| |
- | <a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" target="_blank" class="demo">Demo</a>
| |
| </div> | | </div> |
| </div> | | </div> |