Template:Team:USTC-Software/notebook

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Team:USTC-Software/hidden}}
{{Team:USTC-Software/hidden}}
 +
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
-
        <link rel="stylesheet" href="https://2012.igem.org/Team:USTC-Software/notebook-style.css?action=raw&ctype=text/css" type="text/css" 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-font1.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>
-
 
     </head>
     </head>
     <body>
     <body>
-
<h1 class="title">NoteBook of USTC-Software 2012</h1>
+
<h1 class="title">Notebook of USTC-Software 2012</h1>
<div class="book_wrapper">
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="next_page_button"></a>
Line 22: Line 39:
<div class="b-load">
<div class="b-load">
<div>
<div>
-
+
<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 51:
</div>
</div>
<div>
<div>
-
+
<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 61:
</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
-
items of a web designers portfolio. We got the idea from the wonderful
+
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
+
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 82:
</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 90:
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 100:
<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 112:
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 124:
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 138:
</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 146:
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>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>
-
<h1>Thumbnails Navigation Gallery</h1>
+
</div>
-
<p>In this tutorial we are going to create an extraordinary
+
<div>
-
gallery with scrollable thumbnails that slide out from a
+
-
navigation. We are going to use jQuery and some CSS3
+
<h1>Pull Out Content Panel</h1>
-
properties for the style. The main idea is to have a
+
<p>In this tutorial we will create a content panel that
-
menu of albums where each item will reveal a horizontal
+
slides out at a predefined scroll position. It will
-
bar with thumbnails when clicked.</p>
+
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>

Revision as of 15:44, 16 August 2012

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Notebook of USTC-Software 2012

Loading pages...
back to home

Retrieved from "http://2012.igem.org/Template:Team:USTC-Software/notebook"