I use this bootstrap template.
I want make carousel background images fixed, but when I add
background-attachment: fixed;
like this
<div class="carousel-item active" style="
background-image: url('http://placehold.it/1900x1080');
background-attachment: fixed;
">
I get what I what in chrome, but in firefox it works strange.
In firefox, when slide is moving, image is not fixed. After slide stops, image is fixed. I didn't find reason why is this happening.
This is a good question. It took me a while to figure out what is going on.
Bootstrap carousel uses transform: translateX(); to do its animating.
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
Transform translate will move the fixed background image left or right, regardless if the background is fixed. Unlike position or anything else, the background image stays fixed where ever the element moves. It's a bummer.
I tried to hack it for ages, by putting an extra div with an extra child div for the background, but I could not get my head round the classes. I was trying to reverse translate the background image when the slide is transitioning to give the effect of it being fixed, but then the background image on the next slide needs to not animate. Very confusing. Not sure how this can be done with a slider that uses translate to do its animating. https://www.codeply.com/go/vzVI1YkwYc
Maybe someone clever can figure this one out.
Related
I want to animate some sort of floating div.
When the div is in the status 'close' , most of it is hidden on the right of the screen, with only 20px still visible.
When I click on the visible part, the div move to the center of the screen, revealing itself.(it's what I call the status open)
My issue are:
I only know how center a div with margin:auto, which do weird stuff when I animate it
when the div is 'closed', the 'hidden' part create an overflow who add a scrolling. I don't want that
the div have a width who change a lot, depending of the case. Consequently, I cannot use a lot of hard coded value in CSS.
Any idea how to do this?
Even a partial solution would help me.
Edit : the solution (thanks to #sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}
Its too open question to be able to help with 2,3 points, its hard even to say what is the objective and without code, who knows...
Centering div like that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
you can easly animate those properties.
I am trying to center an element vertically. This is the code I use:
position: absolute;
top: 50%;
transform: translate(0, -50%);
Eventually, the element gets centered properly but, as I am using animate.css library and I am using the class="wow fadeIn, the element fades in to the top 50% of the page then after fading into that place, it jumps -50% of its size because of the translate(0,-50%) part.
How can I get rid of the additional jump??
I made a container that had the fadeInUp class name and its position is relative. Then I remove the fadeInUp from the div inside and it worked.
I've been going crazy about that and haven't found a solution yet, any content in the div gets blured for some reason if a transform is being applied.
Though this only happens in chrome.
I've tried using the Webkit style declaration : -webkit-font-smoothing but I didn't succeed.
The div CSS:
#divId {
width: 100%;
height: 100%;
-webkit-transform: translateX(-52%);
transform: translateX(-52%);
}
below are 2 images showing the difference with and without the transform,
the first is with transform and the second is without the transform. thanks
try moving the div without transform
like using { position:relative;left:-52%;}
transform usually changes the quality of a text or img ( like translate or scale ) and as far as i know there is no 100% accurate work around about this
I have an image sticking out of the bottom of the screen. I want to slide up the image using a CSS animation.
The problem is the image dimensions vary depending on the size of the window. Thus I do not know initially how much of the image is sticking out of the screen.
Simply what I want to do is move the image to bottom: 0%
So the code would look similar to this except that I don't know the starting percentage (I don't know it's -35%).
#-moz-keyframes moveUpImage
{
0% { bottom: -35% }
100% { bottom: 0% }
}
Is there a way to tell CSS that I want the animation to go from starting/current position to bottom: 0% ?
If you want to do a css animation from the current position of the element to the bottom use css transitions, doing it that way you just need to apply the bottom position and the animation will take place. (probably using position absolute).
I'm trying to translate an svg graphic in the y-axis with CSS transforms. I'm having no problem with the translate part:
transform: translate3d(0, -100px, 0);
BUT, the 100px up in the Y direction moves the svg graphic behind the parent div. I've tried putting different z-index on the various elements but can't get the svg graphic to be in front.
Here's images to show you want I mean:
And after the translate:
transform: translate3d(0, -100px, 0);
This doens't look like a z-index problem to me, but overflow. Try setting overflow: visible on .svg-container where it is currently set to hidden.
Set overflow: visible on .svg-container where it is currently set to hidden. That worked for me (inspired by Hugo Silva he deserves the correct answer). I've edited his post with the amendments
edit
Actually this is just a partial fix, this works:
transform: translateY(-100px) translateX(-3px);
but this doesn't:
transform: translateY(-100px) translateX(-3px);