Team:TU-Delft/Team/General

From 2011.igem.org

(Difference between revisions)
Line 36: Line 36:
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
</div>
</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>
</div>

Revision as of 10:42, 16 June 2011



TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2

Loading pages...

Back to iGEM.org

Retrieved from "http://2011.igem.org/Team:TU-Delft/Team/General"