I'm building a simple navigation menu with four links. The menu has a greyscaled background image sliced into four parts that when hovered over will fade in a colored section of the background image, basically creating a saturation/desaturation effect on mouse over. The code im using works but only for one of the four slices. I need to figure out how to get each item to fade in separately. While messing with the code, ive been able to get either, one or all to fade in on hover, but can't figure out how to "break" them up.
$(document).ready(function () {
$('div.menu').hover(function() {
var fade = $('.one', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(250);
}
}, function () {
var fade = $('.one', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(500, 0);
} else {
fade.fadeOut(500);
}
});
});
below are pics of whats happening
http://i.imgur.com/KZBlHxo.jpg
http://i.imgur.com/20iW8UM.jpg
Couldnt you do this using CSS? Here is a sample with transitions
.menu-item{
opacity:1;
transition: opacity .2s linear;
}
.menu-item:hover {
opacity:0;
}
Here is another with CSS animation
.menu-item:hover{
animation: fade;
-webkit-animation: fade;
}
#keyframes fade{
from{opacity:1;}
to {opacity:0;}
}
#-webkit-keyframes fade{
from{opacity:1;}
to {opacity:0;}
}
You can add delay parameters, timing, iteration count, etc.
http://www.w3schools.com/css/css3_animations.asp
Related
I'm currently trying to implement or test a new feature on my locally hosted page which plays video with subtitles on. The subtitle format being VTT.
I've been trying to find how to actually be able to edit the VTT itself as I am trying to give a fading out effect for the subtitle.
This probably won't be helpful but I just tried implementing it via the style.css part of my project but sadly it only affects the texts of the page and I am not sure how to make it work for the texts from the VTT file itself.
Down below is the part I've tried to work out on the style.css
.fade-in {
animation: fadeIn 2s;
}
.fade-out {
animation: fadeOut 3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
There is a ::cue selector to modify the subtitle text on a video.
But not all css properties are allowed.
You can change the color or opacity but you can not set the animation property.
Anyway, what you could do is to use css variable to set the opacity and the css variable could change with an animation
:root {
--opacity-value: 1
}
::cue {
opacity: var(--opacity-value);
}
#keyframes flickerAnimation {
0% { --opacity-value: 1; }
50% { --opacity-value: 0; }
100% { --opacity-value: 1; }
}
video{
animation: flickerAnimation 1s infinite;
}
An working example could be found here.
I'm using jQuery to toggle between my light theme and dark theme:
$(".theme__switch").on("click", () => {
$("body").toggleClass("light__theme dark__theme");
});
My goal is to attach a fade-in animation to both these classes.
It works for light__theme on load, and when I toggle back from dark__theme, but when I try to add the fade-in animation to my dark__theme, the animation doesn't work for either themes
I start with: <body class="light__theme">
.light__theme {
animation: fadein 2s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
which works fine, but when I try to attach the animation to my
dark__theme class like so:
.dark__theme {
--background: #121212;
--text: #f2f3f4;
background: var(--background);
// adding the animation in
animation: fadein 2s;
}
I don't get the fade-in animation, and it also removes the animation from my light theme.
The classes are being toggled correctly, I can see that when inspecting the <body> in dev tools, but I'm not sure whats causing my issue. Perhaps the way I'm calling the animation in my css?
I'd really appreciate any help on this one.. thanks for looking!
You need to add reverse to the animation for dark__theme:
.dark__theme {
--background: #121212;
--text: #f2f3f4;
background: var(--background);
// adding the animation in
animation: fadein 2s reverse;
}
Animation MDN
We have two CSS animation keyframes that will be added or removed to the element using Javascript:
One for hiding the element by animating it from top to bottom:
upperGuideText.classList.add("upperGuideAnimeHide"); // Hide CSS KeyFrames
And another for showning the element by animating it from bottom to top:
upperGuideText.classList.add("upperGuideAnimeShow"); // Show CSS KeyFrames
Simply we add and remove them via classes to the element.
Then we create a function to handle these show and hide animations named guideReveal.
Each time we invoke guideReveal and pass a text to the function there will be two steps:
First, we hide the last text (animate it from top to bottom)
Then we add and animate the new text that is just passed to the function (animate it from bottom to top).
The code is simple, please have a look at it:
function guideReveal(text){
// Hide the `upperGuideText` on each guideReveal function execution
upperGuideText.classList.add("upperGuideAnimeHide"); // Hide CSS KeyFrames
upperGuideText.classList.remove("upperGuideAnimeShow"); // Show CSS KeyFrames
// After a delay show another `upperGuideText`
setTimeout(function(){
upperGuideText.innerHTML = `${text}`;
upperGuideText.classList.add("upperGuideAnimeShow"); // Show CSS KeyFrames
upperGuideText.classList.remove("upperGuideAnimeHide"); // Hide CSS KeyFrames
//Track end of only `upperGuideAnimeShow` animation! It's not working right now
upperGuideText.addEventListener("webkitAnimationEnd", function(){
console.log('Animation of guide ended..!')
});
}, 1000);
}
So far when the text shows up and when the text hides down we can track the end of the animation using webkitAnimationEnd but, I don't want to track the end of hide animation...
How can we Track the end of only upperGuideAnimeShow animation!
You could look for a specific animationName property of the animationend event, e.g.
let d = document.querySelector('div')
d.addEventListener('animationend', function(ev) {
if (ev.animationName === 'fade') {
alert('end')
}
})
div {
margin: 100px;
width: 100px;
height: 100px;
background: yellowgreen;
animation: fade 5s linear 0s 1,
resize 2s linear 0s forwards;
}
#keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#keyframes resize {
from { transform: scaleX(1) }
to { transform: scaleX(2) }
}
<div></div>
in this example I've set two dfferent animations, but in the event handler I checked for the fade animation.
I am using the materialize framework and smoothState.js, and have noticed two glaring problems.
When I shrink down to mobile view and (And a mobile device for that matter), when clicking the hamburger icon It fires but it doesn't work as expected. e.g. clicking to different pages doesn't work.
SS appears to meddle with the image slider library too, suddenly my navigation disappears.
Smoothstate seems to work in desktop mode however I am still getting the problems with my slider for my images. And there seems to be a lag, when it fires, like it's revving up before firing.
I made a fiddle but I can't figure out how to make the separate pages link within one fiddle. Sorry. Maybe someone can show me!
As a preview, below is my css && js.
https://jsfiddle.net/718BkQns/L1rd0gLc/
css:
.m-scene .scene_element {
animation-duration: 0.25s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.m-scene .scene_element--fadein {
animation-name: fadeIn;
}
.m-scene.is-exiting .scene_element {
animation-direction: alternate-reverse;
}
/*
* Keyframes
*/
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
js:
;(function ($) {
'use strict';
var $body = $('html, body'), // Define jQuery collection
content = $('#main').smoothState({
onStart : {
duration: 250,
render: function () {
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({ 'scrollTop': 0 });
}
}
}).data('smoothState');
})(jQuery);
Thanks, in advance!
There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/