popflys
popflys's Achievements
0
Reputation
-
Okay, I cleaned it up thanks to your response and it's moving but it's a bit jittery. It almost does what I want it to do (which is to move from it's position at the bottom of the viewport and animate to the middle of the page while scrolling down, but become fixed (scroll block? or pinned?) when it reaches the middle of the page). Here's the JS <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script src="js/jquery.lettering-0.6.1.min.js"></script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { $('body').css('visibility','visible'); $('#wrapper').css('display','block'); var controller = $.superscrollorama(); controller.addTween('.scale', TweenMax.fromTo($('.scale'), 3.25, {css:{top:'430', position: 'absolute'}}, {css:{top: '340', position: 'fixed'}}), 0, 200); }); </script> Any help with this?
-
Thank you for the responses. I'll be sure to clean this up and continue learning. A little learning is a dangerous thing. Thanks again.
-
I'm going to start off by saying that I'm a JavaScript idiot, I can get my way around things but this is my first time attempting to create a real animation on scroll position and I'm totally lost. I'm using the superscrollorama plugin and I want to make an image, that is relatively positioned near the bottom of the page, "pin" when it meets the middle of the page. Here is my code, and thank you anyone who can move me forward. I'm lost. HTML: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Withings - En savoir plus - balance Withings</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script> <script src="js/jquery.lettering-0.6.1.min.js"></script> <script src="js/jquery.superscrollorama.js"></script> </head> <body> <header> </header> <div class="main"> <div id="wrapper"> <div class="scale"> </div> </div> </div> </body> </html> CSS: html { min-height: 100%; } body { min-height: 100%; } a { color: rgb(6,139,183); text-decoration: none; font-family: MyriadPro-Regular; -webkit-transition: color linear 0.2s; -moz-transition: color linear 0.2s; -ms-transition: color linear 0.2s; -o-transition: color linear 0.2s; transition: color linear 0.2s; } a:hover { color: rgb(50,139,255); } header { height: 140px; background-image: url(images/header.jpg); background-repeat: no-repeat; background-position: top center; width: 100%; z-index: 1; position: fixed; } article { } .main { overflow: hidden; padding-top: 150px; position: relative; } #wrapper { margin: 0 auto; display: block; position: relative; width: 980px; height: 2000px; } .scale { width:980px; height:977px; position: relative; background: url('images/scale_screen-off.jpg') no-repeat scroll; top: 420px; } JavaScript: $(document).ready(function() { $('body').css('visibility','visible'); function initScrollAnimations() { $('#wrapper').css('display','block'); var controller = $.superscrollorama(); controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}, 0,200); } });$(document).ready(function() { $('body').css('visibility','visible'); function initScrollAnimations() { $('#wrapper').css('display','block'); var controller = $.superscrollorama(); controller.addTween('.scale', TweenLite.from( $('.scale'), 3.25, {css:{position:'fixed'}, 0,200); } });