I designed some clouds and now I need to create an infinite CSS horizontal scroll animation (left to right) on them. I tried some solutions but I never found the result I was looking for. Each time there is some breaks in the animation. I really need an infinite effect, non-stop scrolling.
Here is the Fiddle
<div class="magic-clds blue-cld"></div>
Related
so I have a list of tiles and each of those tiles is able to expand a box underneath itself. When you expand this box, all the other tiles beneath should be pushed down and when you close the expandable, move back up. I am achieving this effect by animating the height of the expandable. With the last 10 or sth tiles it works really smooth, but when toggling the very top ones, the animation is not smooth at all, how can I fix this? I am using React and their CSSTransitionGroup.
I haven't seen your code but maybe you should consider toggling className with React and make transition of height with CSS, this would be an elegant way to do that.
I have been facing a very irritating error with firefox over the last day.
I have replicated the bug here: http://jsfiddle.net/kmz9tv77/1/
There is one container div, with two children, bgpanel a red background div with the text background, and fgpanel a purple background div with the text foreground, and an opacity of 0.5.
The container div has a perspective value of 1px, the bgpanel is translateZ(-1px) and then scaled by 2, to keep the perceived size the same.
The fgpanel is as it is.
The idea is to generate a parallax effect while scrolling. The bgpanel div will move slower, while fgpanel will move at the same speed.
On chrome this works perfectly. On Safari too. On firefox, halfway down the scroll the layer farther away, bgpanel, suddenly decides to vanish. If I force firefox to repaint by going to the element inspector and switching the top property on and off on bgpanel, things work again for a while, but again bgpanel goes off if you scroll down beyond a point.
What's happening?! Am I missing something fundamental here? Help!
I've started playing around with transitions and have come up against quite a big problem. I have a set of divs that transition from 0 to 1 opacity when the user hovers over them, the problem is that when the fixed div that contains my site's navigation is on top of them they overlap it - meaning the user cant click on the navigation, as shown on the right of the image below:
When the transition finishes it goes back to its normal state (like on the left of that image) but as soon as the mouse moves the whole thing starts again so its impossible to click on the navigation. Is there any solution to this? Or would a jQuery alternative be the answer?
I can post the code Im using if it's of any use.
Set your header z-index. That should solve the problem.
header{
z-index:999;
}
I'm trying to use CSS3 animations to scale up a div. However, I want to keep the top side of the div where it's at. So I only want the bottom part of the div to scale up. How do I do this?
You must use -transform-origin , by default at 50% 50%
More info : https://developer.mozilla.org/en/CSS/transform-origin
This needs to be compatible with all modern browsers and IE7 and IE8.
What I'm trying to do is have a repeated background image for the page with a linear fade that makes the bottom darker. http://i.imgur.com/rrzyw.jpg
Here's my example code: http://jsfiddle.net/hxk2d/2/
As you can see, I have two floated divs in the example above. The body linear gradients do not show up for some reason. I figured out it was because of the left div being floated.
As soon as I delete the float for the left div, you start to see a gradient but it only appears within the container.
Obviously, I'd prefer this to work whether there's a floated div or not. My test browsers were both Chrome and Firefox, both of which performed the same behavior.
What am I missing?
Please look at my example, I'm not 100% sure but I think the parent div of your two floats didn't had a height calculating as a result of the 2 floating div's, the parent tag of that div is the body that doesn't have any height because nothing inside has, as a quick fix i added some the clearfix class to the parent of the floating div's
Here is the example link:
http://jsfiddle.net/sHXf2/
I modified your gradients to make them more visible, Hope this helped