I have a scenario where I need to animate a div that has a children acting as background helpers. The children need to stay behind the div's background at all time. Without animation adding
z-index: -1 keeps them behind the tranparent background. However they do not stay behind the background when animating.
I have prepared a jsFiddle to show this:
-->https://jsfiddle.net/Jonathan002/gmv70wz7/6/
I know I can fix this by adding an extra div tag to be the background instead. I want to avoid this and direct the question on why the animation will alter my z-index values. Is there another property change happening when the div is animating?
How can I get the div to animate-in naturally (with no changes to dom) while retaining the z-index values?
Elements with transform and opacity don't obey regular z-index order.
That's because browsers create a separate layer to accelerate animations with transform, and per spec the opacity property requires special handling for compositing.
Related
I am attempting to work out how Invision's blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.
I would have thought this would be a CSS animation, but it doesn't appear in Chrome DevTools 'Animations' tab.
How does this animation work, and why doesn't it appear in the 'Animations' tab?
I had a quick look and here is what I came up with:
Let's start at the element .post-hero: this acts as a wrapper and has position: fixed to make the image more or less stay in place as we scroll.
Inside this there is the .hero-bg element which contains the background image itself. Note that this element has inline styles setting its background to none, but it has a data-bg attribute pointing to the background image itself. My guess is that on page load, some JavaScript is used to take this attribute and add the actual image.
The actual image is set as an <img> element, inside the .backstretch element inside .hero-bg. Now, the .backstretch element is where the animation itself happens: the opacity on this element changes as we scroll (to change the amount of shading), and there's a transform with 3D translation and scaling on the element changing as well. I guess this is done using JavaScript and a scroll event listener on the page.
Following .hero-bg, there is .hero-overlay which has a background color of #252b33 and an opacity of 0.35 to provide the shading effect on the image, together with the opacity of the actual image changing as the page is scrolled.
Edit: if you right click the .backstretch element and select "break on attribute modifications", then scroll, you'll find that the attributes of the element are modified in a file called CSSPlugin.min.js. Googling this seems to point to CSSPlugin being a plugin for the GSAP animation library... I don't have experience with it myself but I know it's popular, others can probably confirm whether or not this is what's used to do the animation. My guess is that the animation is done using GSAP CSSPlugin.
I read that some CSS transform properties do not trigger layout:
scale, rotate, position, opacity
This might be an obvious question, but does that mean they will always be applied independently regardless of other contents on the page?
For example, when I change a position property with translate(x,y) to move down a box, will it not push the contents below? I made a fiddle myself, and it seems that changing position is completely out of the dom flow.
Yes you're right, transform will not cause other elements to flow around it. This is why the div on top will not push the div on bottom down with it.
Check this link for more description.
still busy to learn HTML5 and CSS for my school project. But got a question and i'm stumped.
The image and links i have in my nav bar, the face with text, gets transparent. Even though it's not in the same div, nor class as the header itself, which has an opacity value.
the post is, the image AND links should be completely visible, and on TOP of that background opacity.
In advance, sorry for the probably shoddy coding and naming of classes.
Here's the links:
actual site
html/css
your header div has opacity set to 0.7 so that results in everything inside it being semi transparent.
if you want only your header background to be transparent, you can either add the transparency directly to your header background-image. or you could use an rgba background color, if your header background should be a semi transparent specific color. (http://css-tricks.com/rgba-browser-support/)
if all of that doesn't suit your needs, you could always get fancy with something like shown in here: http://css-tricks.com/snippets/css/transparent-background-images/
I agree that the essential problem is that you have one div nested inside another.
Although your .flub class has its opacity set to 1.0, the only div it applies to is inside a .header div, with an opacity of 0.7. So your .flub div is displaying with 100% of the available capacity, which is only 70% due to it being nested within your .header div (which is set to 70% opacity). Consider setting the opacity of the other elements separately, rather than setting the opacity of the entire .header div.
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.
I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/