Description:
The page consists of three main boxes: header at the top, menu at the right and content area.
Header and menu have to be with property position: fixed
Initially menu is hidden on the page. It appears when user clicks e.g. on a specific button.
When it's appearing it's sliding from the right to the left. At the same time header and content pushed to the left.
Solution based on:
Using CSS3 properties transform with translate3d values and transition: transform 0.5s linear
The problem
During animation between menu and content with header boxes we can see blinking white area. Playing with backface-visibility didn't help.
JSFiddle
Here is an example online: http://jsfiddle.net/milax/5uc7or6r/6/
Browser
Chrome 39
What might be caused that? What's done wrong... Thanks in advance.
Add the below:
.site-wrapper div {
transition: transform 0.5s linear;
backface-visibility: hidden;
outline: 1px solid transparent; /* <--- fixes horrible anti-aliasing */
}
Demo Fiddle
Fixed.
The problem was in using percents instead of pixels for the property translate3d. So,
transform: translate3d(100%, 0, 0);
must be changed to
transform: translate3d(200px, 0, 0);
Of course, if you know a width of menu exactly.
Related
I am currently using Elementor Pro in Wordpress and is trying to make the sticky header reactive when scrolling. With the piece of code below, I have managed to make the header smaller and a bit transparent when I scroll down. However, to get the header to be non-transparent again, I need to scroll all the way to the top of the page again. What I would like to have happen is that the header becomes non-transparent after scrolling up no matter where on the page I am. Is this possible?
selector.elementor-sticky--effects{
background-color: #1c4d5d !important
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height 0.5s ease !important;
}
And please excuse my, potentially, super obvious problem to fix - I am new to this whole world :-)
I try to make a mobile menu: http://animesector.budi.upperyard.de/
You can see at the top Header Bar 2 Menu Buttons.
The right one give the Content area transform(translateX(-200px));
The left one give the Content area transform: translateX(200px);
The Negative (-) value dont create a Scrollbar horizontal Scrollbar...
But the Positive one does. have anyone any solution for this problem?
I tried to give the div around a overflow: hidden; but this didn't work for me.
You can prevent the horizontal scrollbar with overflow-x: hidden in the body element. Tried it right in the browser with dev tools and worked perfectly.
I had exactly the same issue. In the end I avoided the menu getting scrolled off the screen using translateX - I used the scale transform instead.
Your site is not visible anymore, but probably this is what you did to make the menu visible by transitioning:
translateX(-200px) -> translateX(0)
I used the scale to achieve somewhat similar transform:
scale(0,1) -> scale(1,1)
.menu {
transition: transform 150ms ease-in-out;
transform-origin: top right;
transform: scale(0,1);
}
.menu.open {
transform: scale(1,1);
}
Yes, there is a difference in the animation but it's probably not even recognised by most users if it happens fast.
No overflow manipulation needed.
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
I am trying to delay a CSS transition, but it seems not to be working. Here is what I want to happen:
Start the video
Move the mouse pointer out of the video
The control bar shrinks, but the play-progress gets larger.
Move mouse pointer back in video, the control bar returns to normal.
As you can see in the CodePen pen, the play-progress bar gets larger before I want it to: http://codepen.io/mboles/pen/mJeJOO
Here is the CSS I am currently using:
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-progress-control {
-webkit-transform: translateY(-25px);
}
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress {
-transition-delay: height 3s;
height: 10px;
}
I have tried to change the order of the transition delay and height, but that did not solve the issue.
Many thanks-
Matt
It turns out with transition-delay you cannot put the property with the delay, it must be explicitly stated using transition-property. So the solution is:
#myPlayerID.vjs-has-started.vjs-user-inactive .vjs-play-progress {
height: 10px;
transition-property: height;
-transition-delay: 3s;
-webkit-transition-delay: 3s;
}
Is there any way I can use CSS3 to fade in and out a solid white background of a <div>?
the content should remain visible so just the background should fade.
Any ideas using css3 transitions/transforms?
thank you for your help.
Sure, you can use the transition property directly on the background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Here's an example of a red background fading out on :hover.
You may find this useful for examples of image and background color fades: -
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
However using CSS 3 to do the transition will limit the effect to browsers that don't support it.
You could have two divs in one container div. The first div contains the white background, the second one gets the content.
Then, use a CSS3 transform to animate the opacity of the first div to zero.