Submit your widget
HomeSlideshow & ScrollerCool jQuery animate-on-scroll tooltips effect

Cool jQuery animate-on-scroll tooltips effect

Created 12 years ago   Views 29019   downloads 4228    Author pehaa
Cool jQuery animate-on-scroll tooltips effect
View DemoDownload
89
Share |

In this exampole we try to recreate the intriguing scrolling effect.

We’ll start with the html structure :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My herb garden</title>
</head>
<body>
<div id="wrap_out">
  <div id='wrap'>
    <header>
      <h1>My <em>herb</em> garden</h1>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.</p>
    </header>
    <div id="separation">
      <div>Scroll <em>down</em></div>
      <img src="images/herbes.jpg" width="592" height="350" alt="Herbes"> </div>
    <section>
      <div  id="coriander" class="element">
        <div>coriander</div>
        <img src="images/coriander1.jpg" width="286" height="232" alt="Coriander">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
      </div>
      <div  id="rosemary" class="element">...</div>
      <div  id="lemonbalm" class="element">...</div>
      <div  id="chives" class="element">...</div>
      <div  id="basil" class="element">...</div>
    </section>
  </div>
</div>
</body>
</html>

The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap.
The stylesheet begins with a simple css reset and the @font-face declaration

body, div, h1, h2, form, fieldset, input, textarea, footer, p, img {
	margin: 0; padding: 0; border: 0; outline: none;
}
a { text-decoration:none; color: #fff;}

 @font-face {
 font-family: 'DeibiRegular';
 src: url('deibi-webfont.eot');
 src: url('deibi-webfont.eot?#iefix') format('embedded-opentype'),  url('deibi-webfont.woff') format('woff'),  url('deibi-webfont.ttf') format('truetype'),  url('deibi-webfont.svg#DeibiRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Read more:http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

You might also like