Share Posted March 23, 2018 Hi, Can the animated background be created differently? The animation loop is not smooth. After a while, it resets with a shake. I want to make the sky fixed in its position and scroll only the floating parachutes with Micky. Suppose there will be about 100 Micky mouse. Can't able to make the clouds fixed. Thanks in advance! See the Pen jzwxzM by debrajr (@debrajr) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 23, 2018 I read it couple of times, but not sure what you are trying to do. Check the discussion in following similar thread, Animating 100 elements will be overkill, you will probably be better using canvas. 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 23, 2018 Thanks for the reply. I am looking for this: See the Pen bvRPrm by debrajr (@debrajr) on CodePen The background is limited to the div. When the content is long, it doesn't show up. I want to make the background fixed and the loop will keep going on and text can be scrollable. Just like a CSS background-attachment: fixed; do but with animated background. Link to comment Share on other sites More sharing options...
Share Posted March 23, 2018 5 hours ago, deb said: I want to make the sky fixed in its position and scroll only the floating parachutes Are you sure you are accurately describing what you want, you say the sky is meant to be fixed which I interpret as unmoving yet your codpen seems to explicitly intend to move it. I suspect you actually mean an infinite scrolling sky? Link to comment Share on other sites More sharing options...
Author Share Posted March 24, 2018 Hi, Sorry if my description is not clear. I want a moving sky which is positioned fixed. The contents of it can be scroll down, but the infinite moving sky should remain in the same position. Imagine like texts moving on a video. So the video playing in background and texts over it can move independently. Hope that helps. Link to comment Share on other sites More sharing options...
Share Posted March 24, 2018 You can use an element with fixed position as background, it will scroll along the page. 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 25, 2018 It's not working that way. I have tried. You can see here: See the Pen jzwxzM by debrajr (@debrajr) on CodePen The background is not showing up when you scroll through the contents. Link to comment Share on other sites More sharing options...
Share Posted March 25, 2018 Is this what you are trying to do? I changed how you were creating your tweens because you can use staggerTo tween to do same thing instead. See the Pen MVEWNW?editors=1010 by Sahil89 (@Sahil89) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 25, 2018 Yes! That's it See the Pen WzZbpV by debrajr (@debrajr) on CodePen What changes did you make? Link to comment Share on other sites More sharing options...
Share Posted March 25, 2018 Just made your sky container's position fixed. Changed easing on mickys to Power1.easeInOut because you are animating elements for long time to short distance so it was looking stuttering. With easeInOut animation will be fast at start and end so you won't notice stuttering a lot. Changed your tweens to staggerTo tween. And commented out anything that wasn't important. And added new div tag for content. 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 25, 2018 Awesome! Thanks! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now