Template:Team:USTC-Software/notebook
From 2012.igem.org
(Difference between revisions)
(18 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | {{Team:USTC-Software/hidden}} | + | |
- | + | {{Template:Team:USTC-Software/hidden}} | |
<html> | <html> | ||
<head> | <head> | ||
+ | |||
+ | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | ||
+ | <meta name="description" content="Moleskine Notebook with jQuery Booklet" /> | ||
+ | <meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/> | ||
+ | <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> | ||
+ | |||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> | ||
<script src="https://2012.igem.org/Team:USTC-Software/notebook-easing.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2012.igem.org/Team:USTC-Software/notebook-easing.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
<script src="https://2012.igem.org/Team:USTC-Software/notebook-booklet.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2012.igem.org/Team:USTC-Software/notebook-booklet.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | |||
<link href="https://2012.igem.org/Team:USTC-Software/notebook.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" /> | <link href="https://2012.igem.org/Team:USTC-Software/notebook.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" /> | ||
- | + | <link href="https://2012.igem.org/Team:USTC-Software/notebook-sty?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" /> | |
- | + | ||
+ | |||
+ | |||
+ | |||
+ | <script src="https://2012.igem.org/Team:USTC-Software/notebook-fon.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | |||
+ | <script src="https://2012.igem.org/Team:USTC-Software/notebook-font2.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | Cufon.replace('h1,p,.b-counter'); | ||
+ | Cufon.replace('.book_wrapper a', {hover:true}); | ||
+ | Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'}); | ||
+ | Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'}); | ||
+ | Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'}); | ||
+ | </script> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | #wrap_notebook{ | ||
+ | position:relative; | ||
+ | width:980px; | ||
+ | height:580px; | ||
+ | margin:0px auto; | ||
+ | /*border:green solid 1px;*/ | ||
+ | margin-top:-80px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
- | |||
</head> | </head> | ||
<body> | <body> | ||
- | + | ||
+ | |||
+ | <div class="clr"></div> | ||
+ | <div id="wrap_notebook"> | ||
+ | |||
<div class="book_wrapper"> | <div class="book_wrapper"> | ||
<a id="next_page_button"></a> | <a id="next_page_button"></a> | ||
Line 22: | Line 59: | ||
<div class="b-load"> | <div class="b-load"> | ||
<div> | <div> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt=""/> |
<h1>Slider Gallery</h1> | <h1>Slider Gallery</h1> | ||
<p>This tutorial is about creating a creative gallery with a | <p>This tutorial is about creating a creative gallery with a | ||
Line 34: | Line 71: | ||
</div> | </div> | ||
<div> | <div> | ||
- | <img src=" | + | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="" /> |
<h1>Animated Portfolio Gallery</h1> | <h1>Animated Portfolio Gallery</h1> | ||
<p>Today we will create an animated portfolio gallery with jQuery. | <p>Today we will create an animated portfolio gallery with jQuery. | ||
Line 44: | Line 81: | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Annotation Overlay Effect</h1> | <h1>Annotation Overlay Effect</h1> | ||
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio | <p>Today we will create a simple overlay effect to display annotations in e.g. portfolio | ||
Line 50: | Line 87: | ||
portfolio of www.rareview.com where Flash is used to create the | portfolio of www.rareview.com where Flash is used to create the | ||
effect. We will use jQuery.</p> | effect. We will use jQuery.</p> | ||
- | + | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Bubbleriffic Image Gallery</h1> | <h1>Bubbleriffic Image Gallery</h1> | ||
<p>In this tutorial we will create a bubbly image gallery that | <p>In this tutorial we will create a bubbly image gallery that | ||
Line 65: | Line 102: | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Collapsing Site Navigation</h1> | <h1>Collapsing Site Navigation</h1> | ||
<p>Today we will create a collapsing menu that contains vertical | <p>Today we will create a collapsing menu that contains vertical | ||
Line 73: | Line 110: | ||
submenu items will make the whole menu collapse like a card | submenu items will make the whole menu collapse like a card | ||
deck and the respective content area will slide out.</p> | deck and the respective content area will slide out.</p> | ||
- | + | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Custom Animation Banner</h1> | <h1>Custom Animation Banner</h1> | ||
<p>In today’s tutorial we will be creating a custom animation banner with jQuery. | <p>In today’s tutorial we will be creating a custom animation banner with jQuery. | ||
Line 83: | Line 120: | ||
<p>We will be using the jQuery Easing Plugin and the jQuery 2D | <p>We will be using the jQuery Easing Plugin and the jQuery 2D | ||
Transform Plugin to create some nifty animations.</p> | Transform Plugin to create some nifty animations.</p> | ||
- | + | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Full Page Image Gallery</h1> | <h1>Full Page Image Gallery</h1> | ||
<p>In this tutorial we are going to create a stunning full page | <p>In this tutorial we are going to create a stunning full page | ||
Line 95: | Line 132: | ||
it moves to the center of the page and the full screen | it moves to the center of the page and the full screen | ||
image is loaded in the background.</p> | image is loaded in the background.</p> | ||
- | + | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Hover Slide Effect</h1> | <h1>Hover Slide Effect</h1> | ||
<p>Today we will create a neat effect with some images using | <p>Today we will create a neat effect with some images using | ||
Line 107: | Line 144: | ||
right, fading out or not. When we click on any area, | right, fading out or not. When we click on any area, | ||
all areas will slide their images out.</p> | all areas will slide their images out.</p> | ||
- | + | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Merging Image Boxes</h1> | <h1>Merging Image Boxes</h1> | ||
<p>Today we will show you a nice effect for images with jQuery. | <p>Today we will show you a nice effect for images with jQuery. | ||
Line 121: | Line 158: | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | ||
<h1>Compact News Previewer</h1> | <h1>Compact News Previewer</h1> | ||
<p>Today we will create a news previewer that let’s you | <p>Today we will create a news previewer that let’s you | ||
Line 129: | Line 166: | ||
longer description on the right. Once a news on the left | longer description on the right. Once a news on the left | ||
is clicked, the preview will slide in.</p> | is clicked, the preview will slide in.</p> | ||
- | + | ||
</div> | </div> | ||
+ | <div> | ||
+ | <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> | ||
+ | |||
+ | </div> | ||
<div> | <div> | ||
- | + | ||
- | <h1> | + | <h1>Polaroid Photobar Gallery</h1> |
- | <p>In this tutorial we are going to create an | + | <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> | ||
</div> | </div> | ||
+ | <div> | ||
+ | |||
+ | <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> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div> | <div> | ||
- | + | </div> | |
- | + | ||
- | + | </div><!---the end of wrap_notebook div-----> | |
- | + | <div class="clr"></div> | |
- | + | ||
<!-- The JavaScript --> | <!-- The JavaScript --> |
Latest revision as of 01:44, 17 August 2012