I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help
skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations
Simply added a class on hover, and removed the class on mouse off.
Related
I am trying to create two buttons that will move up when clicked. My problem is that after the animation occurs, the hover animation for the buttons no longer work. From my research I have gathered that it is something to do with animation-fill-mode: forward but I have found no solution that will allow the buttons to animate properly. Here is my relevant code
https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon
Forward animations will cause the element to retain the style values from the last keyframe when the animation ends. Simple remove the animation-fill-mode attribute and your hover animation should work.
Im gonna take a random stab. There is a severe lack of info here...
On hover, set animation-name or I guess maybe animation-fill-mode to none.
.elem:hover {
whatever: settings-you-want;
animation-name: none;
}
I just did something similar.
The animation will take priority over hover.
I have a Div with the id of center. I set the opacity of the Div to 0 in CSS file. when the window loads, I give the Div an animation:
document.getElementById('center').style.animation = "UP 1s forwards";
if the user click a button, I change the animation to:
document.getElementById('center').style.animation = "DOWN 1s forwards";
Problem: the second animation doesn't show up, the Div suddenly disappear.
A example fiddle or some more code might help. Lot of things could be wrong.
Your keyframes for the down animation might be starting with opacity 0;
You need to set some position property in CSS to use top/right/bottom/left properties. Check that.
There might be something wrong with the JS on click.
Just some things I can think of.
It feels like a toast animation by what you described. Here's a fiddle.
https://jsfiddle.net/thelessergeek/rj7a06hm/
Hopefully you were looking for that. My JS might be a little sad. Work it out as you see fit. Thanks!
When my grid of post loads, the posts load at position zero. Then translate3d/width grab their values and they go to right place: http://www.marianoshoes.com/the-journal/
How can I disable this weird javascript/css animation, using css?
Thanks!
Seems to me that it doesn't do any animation but that the sequence is just off, like the CSS is added after the items are already drawn on screen.
If you're adding the CSS classes to the elements using JS you could fix this by defaulting the display property to none, and at last change it to block (This will make it take a little longer for it to display the information, but at least it's in the correct format.
Else you can change this by making sure your CSS is going to be one of the first things to get loaded into the page, and make sure your JS is getting run only after the document is fully loaded.
You can't stop the js from moving the blocks into their right place, but you can fade in the element after your js.
Your css:
.post-grid {
opacity: 0;
transition: opacity 0.5s;
}
.post-grid.loaded {
opacity: 1;
}
Your js:
$(document).ready(function() {
var $postGrid = $('.post-grid');
.... do stuff to post grid
$postGrid.addClass('loaded')
});
The best current example I have of this problem is here: http://lukes.comyr.com/Tf2MarketThing/index.html
On Safari, when you hover over an item it activates the css hover pseudo, which is a webkit transform:
.item:hover {
-webkit-transform: scale(1.5) rotate(30deg);
}
However, if you click on the item it moves (via jQuery animate()), but it still remains in the hover animation/state even though the mouse is not over the item, and in order to get rid of the hover pseudo you have to hover over the item again where it has moved.
Is there a way to fix this problem so that the item is in the normal css state after it moves? I was wondering if any of these methods might exist:
Force browser to recalculate hover boundaries
Reset or remove the pseudo item class
Simulate a mouse move event to trigger the hover calculations
Edit: Pathetically, the link seems to be overloaded now so heres a couple of screenshots to help illustrate the problem:
This here is what the item looks like when you hover over it, notice how it's rotated compared to the other elements
This is what the item looks like after it moves, which is still rotated in the hover pseudo, even though the cursor hasn't moved from it's original position (Where the gap is in the upper right corner)
It's not full solution , but just trying to give you idea how to solve it
$('.item').click(function(){$(this).css('transform','scale(1)')})
$('.item').hover(function(){$(this).css('transform','scale(1.5)')})
$('.item').mouseout(function(){$(this).css('transform','scale(1)')})
I'm trying to animate a overlay using opacity when you hover the element, however it does not work. I can easily do it without the animation, but I would like to get a fade effect. I'm trying to achieve this with jQuery.
I want the overlay to not be visible when the image is hovered.
Take look at below jsfiddle-example:
http://jsfiddle.net/jem2M/1/
I've been looking for examples, but most of them use fadeIn and fadeOut, and I can't use that because the element should always be visible, only the opacity should change on hover.
Solved:
Forgot to enclose the selector. Working example:
http://jsfiddle.net/jem2M/4/
$('.bghover #background img') - you forgot (twice) to enclose your selector into quotes.
example fiddle : http://jsfiddle.net/jem2M/4/
I've just opened http://jsfiddle.net/jem2M/4/ (using my chrome 21) and it works fine. When you mouse over the image it animates the opacity to 1 , and when the mouse goes out the opacity is modified to 0.75