gredesign
-
Posts
5 -
Joined
-
Last visited
gredesign's Achievements
Newbie (1/14)
0
Reputation
-
Thanks Zach, That is a good idea. I appreciate the direction given. As we speak I'm seeing if I can work it out that way (I hate the Math. Lol.) Alternatively, I also may look into performing some sort of hit test if possible with divs to eliminate having to do the math if I run into the frustration wall.
-
Thanks, I ended up not going with the drag and scroll. It became too involved, I have a short deadline, and I'm not a super hardcore coder (though I am learning). I did complete a scrolling version, but I know that the calculations in the "if" statements could have been done with less lines. Do you have any recommendations that Greensock already has in their API that will make the lines shorter, or logic that would make more sense? http://codepen.io/gredesign/pen/BjRrZx
-
Beautiful example. Thanks. When I drag now, the foreground updates to create the parallax effect. But one last thing is missing. When I switch from dragging to scrolling, the original calculations from the drag remain, and the parallax is not updated. How can I set "the scroll" calculations the same as the drag. Currently, I have this: onDrag:function(){ TweenLite.set('#fg',{x:-this.x*.5,y:-this.y*.5}) } Is there an event for the scroll when I'm using Draggable.create, etc?
-
Hello Zach and sorry for the confusion. The reference you supplied is based on mouse move (thanks though). I am wanting to have a parallax effect between the foreground and background when the viewport is either scrolled or dragged.
-
Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
