Recreating Button Behavior/animation With Jquery

Recreate behavior of “odometer” on http://opower.com/.

Behavior to be replicated:

After scrolling 100+ pixels, the button disappears from the top and reappears at the bottom by sliding into view.

Upon returning to scrollbar to the top of the page, the button disappears from the bottom and reappears at the top by sliding into view.

Behaviors that **ARE NOT** to be replicated:

The number ticker, icon, background, hover effects, or pull down effects are not to be replicated.

Button must be absolutely positioned inside of a wrapper at 960px wide and centered. Button must adhere to the right side of the wrapper.

Button must be composed of a single anchor elements.

Corresponding code:

#wrapper {
width: 960px;
position: relative;
margin: 0 auto;
}

<div id=”wrapper”>
<a id=”cta” href=”#”>Free Quote</a>
</div>

Hope I provided enough detail. Let me know your guy’s thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *