Jump to content
Search Community

Sphinx

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Sphinx

  1. Sorry you guys for the confusion. The codepen I linked didn't automatically save the changes I made to my fork of the last codepen I used (so I didn't have to find all the links again). I've updated the codepen with what I am referring to. I'm trying to make a parallax effect, so I have a background that moves "left" off the screen. But instead of the picture just 'ending' I want it to loop back around if this makes sense. I apologize, I thought the codepen saved it, and didn't realize when I exited that it hadn't (at least since it auto-updated). The pixelated image is just a dummy image but yes! So to simulate how a background image repeats, or in essence to create a horizontal parallax 2D side scroller effect, I would have to take many images cut up to make it repeat across. I have Overflow-X disabled so that I don't have to use the horizontal sidebar, is there a way to have it all loop around on the "Y" axis. Sorry not sure if I am verbalizing correctly, hopefully the updated codepen shows what I mean. I'm trying to create a horizontal parallax effect/carousel effect, with different backgrounds moving, but not sure how to do that with greensock. http://codepen.io/eternal_wanderer/pen/RGaRQK ^ Here where the left image moves off the screen, I was trying to figure out how to have it come behind it. To do that I would have to follow it up with the same image (and any extra images) right behind it? Similar to the codepen linked above?
  2. I don't know how to correctly articulate this question. http://codepen.io/eternal_wanderer/pen/RGaRQK In GSAP when I move the image 'left' it goes off the screen, when I repeat, it jumps back to the initial position. Is there a way to make it so it 'repeats' in a kind of carousel effect/loop? / like repeat-background x, where the background is touching when there is no more space. Or will I need to use a larger picture or more than one picture. Somehow I think stagger might be able to be applied here but I'm not yet sure how to apply it to get the effect that I want. I also thought about a globe or a sphere and having that bigger than the canvas and rotate but it just seems much simpler than that. (I articulated that the best I can but will try again), so when Left moves off the screen, instead of jumping backwards, it starts directly behind it, so that it looks like it is never ending?
  3. Thanks Jonathan! I think if it's just a matter of HTML/CSS I can play around with it! That is a great tip and something I can definitely do!
  4. YES that's the one! It did solve the problem ! But created a new problem that prevented me from scrolling past that first div. I put overflow-x and that fixed the problem: http://codepen.io/eternal_wanderer/pen/kkPEJd but now the rotation scale overflows into the next div, is there a way to stop it from overflowing into the next div as well. I'm writing two different versions of the code, and one of my versions is rotation and the other is scale. The one I linked I think is the scale version so sometimes I mix the two up when writing here, but have the same problem in either version. Will overflow-x prevent me from using horizontal parallax?
  5. Thanks Jonathan, I have a codepen. I was just hoping it was a common problem with a simple solution to avoid compiling all the links into codepen :D , but . I quickly put this together on codepen: http://codepen.io/eternal_wanderer/pen/kkPEJd , hopefully that can help ^^
  6. I am sure this question has been asked before but I don't know exactly how to phrase my issue. A problem I am having right now is that when I rotate an image around 360 degrees, or when I scale it up, it sometimes goes beyond my viewport or current screen width. When that happens the horizontal bar stretches before rebounding back to the start of the animation (when it's on repeat) or disappearing when I scroll. How can I stop that from happening. I like the scaling effect, but would like it to scale within the current viewport or div.
×
×
  • Create New...