Slider: https://codepen.io/Hyperplexed/full/MWXBRBp
When i slide this slider in Safari the pictures on the side i slide it to get cut off in the animation. It feels like it the children of the transform animation div lag behind. It works fine on Chrome and FF.
Does anybody know why this happens and how to prevent it?
The solutions i found said i should put the following on the div with the transform but it didn't work:
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
overflow: hidden;
Related
I have set up some scroll animations on many elements of a site I'm building.
I'm using these CSS rules:
.hiddenLeft {
opacity: 0;
filter: blur(5px);
transform: translateX(-090%);
transition: all 1s;
}
.hiddenRight {
opacity: 0;
filter: blur(5px);
transform: translateX(90%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
The hiddenLeft and hiddenRight classes are in the elements by default, and then when they are intersected during vertical scroll the show classes are added.
It all works fine, except it has created horizontal scroll to the right out of the width of the site into blank space.
I would like to keep the animations as they are but without the horizontal scroll.
A picture of me scrolling out to the side into the blank space for reference:
enter image description here
I made a very basic replication here:
https://codepen.io/acodeaday/pen/NWMYWNL
I can see that the offending line is
transform: translateX(90%);
But that makes the animation very aesthetically pleasing. So I'm hoping there is a way to solve it while keeping that.
Try using
max-width: 100%!important; height: auto; overflow: hidden!important;
this code whatever you put all of your animation inside. That can be a div. Hope this help~
I apply this class to a div to get a isometric look, and when I resize the window The div slightly moves, what does cause it, how can I prevent it.
.isometric {
perspective: 5000;
transform-style: preserve-3d;
transform: translateX(100px) rotateX(60deg) rotateZ(45deg);
}
It doesn't happen on codepen: https://codepen.io/eguneys/pen/GNxeYN
I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.
Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}
It seems that jquery hover (and presumably the underlying browser events) cannot be reliably used to keep track of which element the mouse is over when animations are involved, since the events do not fire if an element moves under or away from the mouse (rather than the mouse moving into the element).
See this fiddle for an example of the issue I'm having. If you hover over the div, the state according to the hover tracking events always disagree with reality, at least by the end of the animation.
I haven't tested this outside chrome, but I'm assuming the same behaviour across browsers.
HTML:
<div>hover me</div>
<p>state</p>
CSS:
div {
-ms-transition: -ms-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
div:hover {
position: relative;
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
JavaScript:
$('div').hover(function() {
$('p').text('over');
}, function() {
$('p').text('out');
});
While the fiddle isn't a realistic example, I'm experiencing this issue in a webpage with animations. The question I have is how do I ensure that my javascript correctly knows the hover state after animations? I'd like to do this without having a global mousemove event to follow the mouse (i.e. so that I can look for the element under the last coordinate at the end of each animation).
I'm currently playing around with CSS animations and I'm looking to take a flat hand and have the hand move down the page i.e have a blank page and have a hand move down the page. As such I have been unsuccessful.
Here is my HTML code:
<div id ="splash" data-role="page">
<center>
<img id='Hand' style="position:absolute;top:-30%;" src="css/images/hand.gif">
</center>
</div>
Now I've been following a tutorial and have been using the following CSS:
.handmove{
transform: translate(0,1000px);
-webkit-transform: translate(0,1000px); /** Safari & Chrome **/
-o-transform: translate(0,1000px); /** Opera **/
-moz-transform: translate(0,1000px); /** Firefox **/
}
.objecttransition{
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
From what I understand is .handmove is used to move the images position from -30% to 1000px down the screen. But the objecttransition class is to allow this movement to animate from point -30% to 1000px down. Correct me if I'm wrong?
Now what I look to do is as the page loads I want to add these classes to the hand using jQuery:
$(document).on('pagebeforeshow','#splash',
function()
{
$("#hand").addClass("objecttransition");
$("#hand").addClass("handmove");
});
I've also used the .ready() event but that also doesn't seem to work. I'm not to sure why the animation isn't working? Any ideas?
I would guess, the problem is the spelling,
id='Hand'
vs
$("#hand")
Use the same capitalization in both places.
Sigh... Silly Error!! With the .addClass() I used hand instead of Hand.Change .addClass('hand') to .addClass('Hand'). I then used the .ready() instead of on('pagebeforeshow','#splash',. Thus we have:
$(document).ready(
function()
{
$("#Hand").addClass("objecttransition");
$("#Hand").addClass("handmove");
});