stoler42
stoler42's Achievements
0
Reputation
-
Idea clue how to trigger an audio clip as an animation completes?
-
alright!!! now were cooking with gas, so now all I need is to figure out the syntax for when I scroll backwards, the animation animates backwards. This is so cool Rodrigo!!!!
-
hey scratch that last post, I got something to move!!!! HAHAHAHAHA BUT i didn't control the movement. I'm sending you a zip copy of what I have so far. It's not much BUT i feel like I'm close. With a little bit more help, I know this can work. Thanks for all the help Rod, I appreciate it. http://cadieuxdesigns.com/scroll_comic/
-
What the heck am I doing wrong? I've copy and pasted and added in elements and I can't get the thing to even move. I know I'm being a pain in the ass but I can't get one thing to work <!DOCTYPE html> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="commic_style.css"> <script type="text/javascript" src="js/dragscroll.js"></script> <script type="text/javascript" src="minified/TweenMax.min.js"></script> <!--tweenMax Library --> <script type="text/javascript" src="js/jquery.jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.scrollorama.js"></script> <script type="text/javascript" src="js/greensock/TimelineMax.min.js"></script> </head> <style type="text/css"> #jeff{ width:400px; height:400px; background-image:url(images/character-designs.png); background-repeat:no-repeat; } </style> <body> <script> // element that can be used with jQuery $(document).ready(function(){ //set the name of the superscrollorama elemenet var controller = $.superscrollorama({ isVertical: false }); //then you add the tweens var jeff = $("#jeff"); controller.addTween (jeff, TweenMax.to(jeff, 1, {left:600, width:700}) ); }); </script> <div id="navigation_container"> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">HOME</a></li> <li><a href="#">HOME</a></li> </ul> </nav> </div> <section id="comic_board"> <div class="cell"> <section id="jeff"></section> </div> </section><!--closes comic board --> </body> </html> (css) @charset "utf-8"; /* CSS Document */ *{ padding:0px; margin:0px; cursor:url(images/cursor.png); } body{ background-color:#CCC; width:18000px; position:absolute; top:0px; left:0px; bottom:0px; overflow:hidden; } #navigation_container{ height:100px; width:100%; background-color:#666; position:fixed; } nav { height: 40px; background-color: #6BB2D2; z-index: 2000; position: fixed; top: 25px; width: 100%; margin-bottom:70px; } nav ul{ margin:0px 0px 0px 20px } nav ul li{ list-style:none; display:inline; } nav ul li a{ color:#FFF; padding:0px 7px; line-height:40px; text-decoration:none; } #comic_board{ height:100%; width:100%; background-color:#999; margin-top:70px; } .cell{ width:600px; height:600px; margin:auto 40px; border:solid 4px #000; background-color:#FFF; float:left; } }
-
Again, thanks so much for your help. I'm trying to strip scrolorama to work how I need it to. Although I've put isVerical False and I can't get the darn thing to scroll. I'm confused about how the plugin understands when an item is to be tweened which makes it hard to code what I need. I'm just kind of lost at the moment. I'm really trying here to wrap my head around it but I'm having a really hard time.
-
Hey everyone, I've new to greensock.js so please be patient. I'm building an interactive comic book. When the uses drags the screen right, panels of art appear and begin to animate. My issue is, I don't know how to control the tweens. The site i'd like to emulate is here:http://disneydigitalbooks.go.com/tron/ I really want to uses to be able to scroll back and fourth like scrubbing to control the tweens. Any suggestions??? Thanks everyone.