Search the Community
Showing results for tags 'scroll position'.
Found 2 results
-
Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much
- 2 replies
-
- 1
-
-
- animation label
- scrub
- (and 2 more)
-
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); } });
