Search the Community
Showing results for tags 'parallax'.
-
Hi all, I have created an infinite scrolling background with 4 layers. For giving the wrapping effect on each layer, I am using 2 copies of the same image and during the loop i am shifting the x positions. Now i want to use BlitMask for this, and i have sccuessfully implemented it too. I just want to have one doubt cleared : - there are 4 sprites for each layer updating in an update loop - these 4 layers are a child of BGScreen sprite should I use the BlitMask for just the BGScreen sprite or should I create 4 instances for each layer so that i can use the wrapping feature and then blit them each. And finally blit the whole BGScreen sprite too ?? any other suggestions are also welcome thanks I am attaching the two as files... just for your reference -
Hello greensockers, This is a "how's that done?" post rather than a plea for help solving something. I'm curious if anyone has any experience achieving a parallax effect on elements in a page. An impressive example - and incredible site overall, can be seen on the welcome page here: http://axel-aubert.fr/#accueil Most of my queries with Uncle Google have come up with solutions similar to Scrollorama, which is different. I did find Plax (http://cameronmcefee.com/plax/) but the demo isn't very smooth... wasn't able to find much beyond that. I realize this isn't completely related to greensock but as it revolves around web effects, it seems to be in the same universe. Plus, you guys are always very helpful So, any thoughts on how I might approach this? JS libraries? If it's greensock-able, I'd love to know! I'm guessing this experience degrades down to a static image or wonky version of parallax in non-modern browsers but it's just too fun not to try. thanks in advance for any insight! azuki
-
Hi all, I am currently working on a onepage parallax wordpress site for a client, he spotted a site that had a load of cool effects and wants them adding to his site. That led me to superscrollorama which led me here. I am trying to recreate some of the effects from the superscrollarama demo site on the the clients site. I want to be able to use the same effect on numerous classes and have them trigger when they scroll into view and reverse when scrolling out of view (as they do on the demo site). Unfortunately ALL of them trigger at the same time (when the first class comes into view) and they dont reverse out again. Below is the code from the superscrollarama demo site // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); I am completely new to this, and am at a loss. Any help/advice would be much appriciated.
-
Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff says other thing. Since i started with this tutorial i found a lot of things about parallax and because of that i will make a second tutorial which i haven't started yet, but as soon as my schedule allows me to i will write it. I hope you enjoy it, Cheers, Rodrigo.
