Template:Team:USTC-Software/notebook

From 2012.igem.org

(Difference between revisions)
 
(16 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" />
-
        <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-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>
-
<h1 class="title">NoteBook of USTC-Software 2012</h1>
+
 +
 
 +
      <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="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="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>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>
</div>
</div>
         <div>
         <div>
-
            <span class="reference">
+
    </div>
-
                <a href="#">back to home</a>
+
 
-
+
  </div><!---the end of wrap_notebook div----->
-
            </span>
+
<div class="clr"></div>
-
</div>
+
 
         <!-- The JavaScript -->
         <!-- The JavaScript -->

Latest revision as of 01:44, 17 August 2012


Loading pages...

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