For a new webdesign I'm trying to control two 50% width layers with CSS transitions and z-index, but there seems te be a conflict: the z-index seems to be too slow. As you can see in the fiddle, the white box is hidden behind the right slider div on hover, until the transition is complete. Is there an alternative that works faster? Or is there another way to do it? Any help would be much appreciated!
This is my CSS:
body {
background:black;
}
div {
-webkit-transition:opacity 0.6s ease, width 0.6s ease;
transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
position:absolute;
top:0;
bottom:0;
width:50%;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-ms-transform:skew(-15deg);
-o-transform:skew(-15deg);
transform:skew(-15deg);
z-index:2;
}
.slide:hover {
width:60%;
z-index:3;
}
.slide#left {
left:0;
}
.slide#right {
right:0;
}
.wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.inner {
width:100%;
height:100%;
-webkit-transform:skew(15deg) scale(1.5);
transform:skew(15deg) scale(1.5);
opacity:0.5;
position:absolute;
}
.inner:hover {
opacity:1;
}
.inner#left {
background:url(//savado.nl/new/key.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.inner#right {
background:url(//savado.nl/new/code2.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.slide .logo {
position:absolute;
z-index:99;
top:50%;
height:20%;
padding-left:20%;
background:white;
}
.logo#left {
right:0;
-webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(50%) translateY(-50%) skew(15deg);
-o-transform:translateX(50%) translateY(-50%) skew(15deg);
transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
left:0;
-webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
-o-transform:translateX(-50%) translateY(-50%) skew(15deg);
transform:translateX(-50%) translateY(-50%) skew(15deg);
}
And here's the fiddle!
PS: I'm new to posting questions of my own on this forum, so I'm sorry if I disobey any of the rules. Besides that, my English is not the best, since it's not my native language (I'm Dutch). But please help me out!
Looks Like the problem was only in Chrome but not in FF. What you need to do is set a smaller z-index on the wrapper container like this
.wrap {
z-index:1;
}
That should fix it and here is the updated JSFIDDLE
Add z-index in your transition declaration. This should stop the z-index from executing before the transition
-webkit-transition:opacity 0.6s ease, width 0.6s ease,z-index 0.6s;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s;
Related
I'm trying to mimic sites like: http://shiz.co/ and http://www.maison-vignaux.com/work
The way the images show up, it's like they're not moving, but more of it gets shown in an interval. I want this type of animation. Right now, my image moves rather than having more of it show up like the sites above.
I have no idea how to accomplish this.
Here's my fiddle: https://jsfiddle.net/z7ukk6kb/ (disregard the name of the animation)
EDIT: problem was the background position on the div. now it does what I want.
<div class="parallax-elem">
<div class="img"></div>
</div>
$('.img').addClass('slide-top');
My CSS:
.slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
Try removing background-position from .img.
Since you have set background-position: center center, as the width of the div increases during the animation, the background image keeps adjusting to stay centered. That's the reason it keeps moving.
$('.img').addClass('slide-top');
.slide-top {
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both infinite;
}
#keyframes slide-top {
0% {
width:0;
}
100% {
width:100%;
}
}
body {
max-width:800px;
margin:0 auto;
position:relative;
}
.parallax-elem {
overflow:hidden;
position: absolute;
height:600px;
width:100%;
}
.parallax-elem:after {
content:"";
background-color:#eee;
width:100%;
height:100%;
top:0;
left:0;
right:0;
position: absolute;
z-index:10;
}
.img {
background:url('http://media.nj.com/entertainment_impact_dining/photo/coffee-stock-photo-0e8b300f42157b6f.jpg') no-repeat;
background-size: cover;
position: relative;
height: 100%;
z-index:11;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax-elem">
<div class="img"></div>
</div>
The reason this happens is because you use background-position center. And that is exactly what is is doing, it is aligning you image in the center. If you'd change is to background-position: left center, the problem is fixed, as you can see in this fiddle.
You could also remove the background-position entirely, but then you will also loose you vertical alignment, you might not want that.
Also, you can make your animation a whole lot easier, you don't need keyframes:
.img{
width: 0%;
background-position: left center;
animation: width 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.img.slide-top{
width: 100%;
}
I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.
I just don't find a way to get the line backface-visibility: hidden; working.
My goal is:
Front:
Back:
The result with the code below is (in rotation-state):
There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.
I used a great template to work on (designmodo.com) and trimmed it down to this:
HTML
<body>
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
</body>
CSS
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin:-156px 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform:translateZ(10px);
backface-visibility:hidden;
}
.layer-2 {
transform:rotateY(180deg);
}
Please see my pen: https://codepen.io/herrbraun/pen/JKroYa
(the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)
If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?
First of all, you have a syntax error:
.layer-1, layer-2 {
should be
.layer-1, .layer-2 {
Also, for this setup to work, you need to set
.poster {
transform-style: preserve-3D;
}
because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.
Your snippet corrected
body {
transform-style:preserve-3d;
transform:perspective(1500px);
}
#keyframes rotating {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
.poster {
animation: rotating 10s linear infinite;
}
.poster {
width:510px;
height:310px;
position:absolute;
top:50%;
left:50%;
margin: 0 0 0 -256px;
border-radius:4px;
box-shadow:0 45px 100px rgba(0,0,0,0.4);
transform-style: preserve-3D; /* new */
}
.poster .shine {
position:absolute;
top:0;
left:0;
background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
z-index:100;
}
.layer-1, .layer-2 {
position:absolute;
top:0;
left:0;
transform: translateZ(10px);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .1s;
transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
background-color: red;
transform:rotateY(180deg);
}
<div class="poster">
<div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
<div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>
Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s
I have a div with an inner span with text. This inside span should be centered vertically and horizontally all the time:
http://jsfiddle.net/QW4Wk/
<div>
<span>Text aligned center</span>
</div>
The div has a transition when the mouse is over, which changes its width and height.
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}
However in Chrome (at least) the text looks choppy while the transition is running. I guess this is because the transition goes 1 by 1px and therefor the "center style" has to go back and forward 1px.
Is there someway to fix this to look smoother, something like subpixel?
Thanks.
try this for absolute centering the text..
span {
margin: auto;
color:white;
text-align:center;
height:10px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
and of course lessen your transition speed.
Apply a different change to the span. a transform can be subpixel
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
top:75px;
left:50px;
width: 100px;
transition: -webkit-transform 10s;
-webkit-transform: translate(0px, 0px);
}
div:hover{
width:250px;
height:250px;
}
div:hover span {
-webkit-transform: perspective(999px) translate(25px, 25px);
}
fiddle
I'm learning about CSS3 transitions and struggling with the vendor prefixes. This is just for fun but I'd like to know why the circle expands on hover in Firefox as it's meant to but shrinks in Safari and Chrome. Webkit seems to be ignoring the width and height but border and opacity are fine. The animation in the normal state seems fine too.
I tried changing the .disc:hover width, and tried changing the transition to width instead of all (which seems to work).. it's just all that seems to not be working.
A link to the page:
http://ambigraph.com/sketchbook/expando/
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
<div class="disc">
</div>
</body>
</html>
The CSS:
#keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
#-webkit-keyframes expando {
0% {
width:50px;
height:50px;
color:#009;
}
100% {
width:30px;
height:30px;
color:black;
}
}
body {
margin: 0 auto;
}
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
It looks like it may be an animation bug since the expando animation is still applied to the element even while hovered. Each browser deals with it differently.
Clearing the animation seems to fix it.
CSS
.disc:hover {
/* ... */
-webkit-animation:none;
animation:none;
}
Firstly you have to differentiate between transition and animation.
The keyframe animation defines the activity that is going on regardless of your input (hover or whatever).
The transition defines what happens when you do something.
To examine the differences between the two states to see what is being transitioned. Remove the duplicates.
.disc {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius:300px;
width:50px;
height:50px;
border:50px double;
opacity:1;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation:expando .5s ease infinite alternate;
animation:expando .5s ease infinite alternate;
}
.disc:hover {
cursor:pointer;
border:2px double;
opacity:0;
width:300px;
height:300px;
}
Essentially, the hover makes the element transparent while increasing the size and changing the border. Since it's transparent, the border really doesn't matter.
I have this snippet implemented:
CSS
div
{
position:absolute;
-webkit-transition: all 0.3s ease-out;
}
.block
{
background:#fc0; /* YELLOW */
top:50px;
left:50px;
width:80px;
height:40px;
-webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg);
}
.block .part
{
background:#444; /* GREY */
width:inherit;
height:inherit;
-webkit-transform: translate3d(0,0,50px);
}
.block:hover .part
{
-webkit-transform: translate3d(10px,10px,20px); /* ONLY TRANSFORMS X & Y */
}
HTML
<div class="block">
<div class="part"></div>
</div>
Check out this Fiddle for the live example.
As you can see, the translation on :hover only affects the .part on the x- and y-axis.
It won't translate in the z-direction.
Anyone who knows what I'm doing wrong?
Got it. Forgot to add -webkit-transform-style: preserve-3d;