So I've got this modal that I've designed to be opened via a checkbox input, but the problem with that was that I have my divs and section arranged in such a manner that #yt-modal-cont can't be in the same container as my input due to z-index issues. So I used javascript:
if(modalToggle.checked === true) {
oLay.style.display = 'block';}
Simple enough fix, however, that's not my issue. For the animation, the route I chose was:
#yt-modal-cont {
animation: fade-before 0.3s ease-out 0s 2 alternate-reverse;
}
#keyframes fade-before {
0%{opacity:1;}
100%{opacity:0;}
}
<script>
var oLay = document.getElementById('yt-modal-cont');
var modalToggle = document.getElementById('vids');
function fadein(){
oLay.style['animation-play-state'] = 'paused';
}
function isOpen(){
if(modalToggle.checked === true) {
oLay.style.display = 'block';}
oLay.addEventListener('animationiteration', fadein);
}
}
modalToggle.addEventListener('click', isOpen);
</script>
and then for the closing function I have it setting animation-play-state=running to play through to the end, but that's not relevant. My issue is that javascript seems to be catching the end of the first iteration--and thusly adding the style--too late, as when the modal opens it's opacity is faded slightly. What's weirder, is that it's only sometimes; I open it once and it's kinda faded, I open it again and it's full opacity, then again and it's really faded... I tried adding oLay.style.opacity = 1 to the fadein function to try and override the CSS but it's still hit-or-miss. After looking at
Lag in animated image array
I feel that requestAnimationframe might be the answer, but my js newb-iness makes it so that I don't really understand what that's all about... Is that the right track or is there a different solution?
Related
Im a total noob and need some help on a function which I would think for most of you would be quite simple. I am trying to do this with pure Javascript and not JQuery. I have been trying for hours and I cant get it.
What I am trying to achieve is to have a function repeat every time I click on a link.
To be more specific I currently have text that fades in when clicking a link and I would like it to always perform the fade in when I click on it (as if you were to refresh the page).
Basically: Click link (x) -- Text Fades in -- click link (x) -- same text disappears and then fades in from beginning of transition/animation (no fade out) -- repeat
I have come across something very similar on W3 schools which shows a function starting from the beginning every time you click the button: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar
I thought that modifying this was the answer but because I am trying to change the opacity, I have seen that I have to add a parseFloat to the function because it is a string but I am having no success. The example is:
else { i.style.opacity = parseFloat(i.style.opacity) + .1; }
To throw another spanner in the works, I am using the opacity value from the color:rgba(0,0,0,0) to change the opacity. I thought this may be easier to find since the above example would (in my mind) bypass the parseFloat thing as you would be using i.style.color but I could not find anything.
Below is my code based on a variation of the W3 schools tutorial. I'm pretty sure that clearInterval in JS has a big part to play in what I need. Very much appreciate any help for this and please let me know if you need more clarity :)
<!DOCTYPE html>
<html>
<style>
#about {
color: rgba(10,10,10,0);
transition: color 1s linear 1s;
}
#about:target {
color: rgba(10,10,10,1);
transition: color 1s linear 1s;
}
</style>
<body>
About
<div id="div">
<p id='about'> Please help me figure this out. I really appreciate it</p>
</div>
</body>
<script>
function fadeIn() {
var elem = document.getElementById("about");
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
if (begin == 100) {
clearInterval(id);
} else {
begin++;
elem.style.color = begin + '1';
}
}
}
</script>
</html>
There is a solution, which I am not going to present you, because the JS "hack" will take longer, compared to the CSS-trick: (looking for appropriate reference)
You wrap your stuff, which you want to fade in and out into a container (just making sure) and add a checkbox above it:
<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>
then you style your stuff:
Hide the checkbox (the label is clickable)
make two configs for your #about_container
first: in the off mode, second in the on mode (you can comment them out for debugging purpose)
#about + #about_container
then you add the input id with pseudo-selector before the second:
#about:checked + #about_container
on your on mode, and leave the other one, like it is.
MUCH BETTER AND FASTER SOLUTION!
You should also change your question into something like:
How do I make html element appear and disappear on mouse-click or other user-interaction.
You can use transitions and then set opacity 0.5 and after some ms change it in 1 to let it fade on click and return in the older look
Edit:
Just put fadeIn() inside another function, and before the fadeIn() executon set the opacity to 0
Edit:
JS
doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}
HTML
About
I have just integrated this animate.css(http://daneden.me/animate/) into my website, but the animation happens when I load the page, therefore no animation can be seen if the element is down the bottom.
But I have found this http://www.crivosthemes.com/theme/porto/index-2.html, I'm pretty sure that they used the same animate.css but the animation happens when I scroll to the element.
I just want to ask, how did they do that? Is there any jquery thing or just css?
Please provide instructions.
Thanks
maybe they implement
window.onscroll = function(){
//codes
if(window.scrollTop == 100){
//do something
}
}
you can use javascript to trigger animation on that element....example
window.onscroll = function(){
element.style.animation = "myanimation 2s infinite";
}
I'm fairly new to Javascript, so let me know if I'm doing something a little silly, but here's the gist:
I'm working with integrating a new feature into a very rigidly constructed template (I basically only get a single plaintext link). My workaround for this was to just add some jQuery that would add an onclick method that would replace the link with the element that I actually wanted to have.
$(document).ready(function(){
$("li a:contains('Search')").bind("click", replaceWithSearch);
});
function replaceWithSearch(){
var searchWrapper = constructSearchBox("");
this.parentNode.replaceChild(searchWrapper, this);
}
That all works, but I've been talking with UI people over here and they want animations for this replacement. Of course their goto is to use CSS animations, but I'm not really sure how to add a smooth fade or slide animation to the replaceChild operation. Am I thinking about this the right way? If so how exactly would I add that animation?
Using CSS animations, you'd do something like the following:
.your-selector {
animation: fadeIn 400ms ease-in-out;
}
#keyframes fadeIn {
from { opacity: 0; }
}
Here's a fiddle showing this: http://jsfiddle.net/zt3QB/. That will make it start from 0 opacity when it is injected into the DOM, and go to the default, which is 1.
If you want to use jQuery:
function replaceWithSearch(){
var searchWrapper = constructSearchBox("").css('opacity', 0);
this.parentNode.replaceChild(searchWrapper, this);
// Using setTimeout because sometimes the DOM is too fast...
setTimeout(function() {
searchWrapper.fadeTo(400, 1);
}, 0);
}
I haven't tested the jQuery one, but I've done similar things. Just finished a project using the CSS version.
I was wondering if it is possible to generate a webkit animation with javascript. Basically all I need is that if i click element A, element B should be animated with a random parameter every time(this is why I cant use a pre-fixed CSS). I'm testing if I can actually generate all this through javascript and Ive gotten pretty far. My code does not do anything random yet but it is really easy to make it random once I get it to work right with javasript. So right now I just want to animate element B every time I click element A. My code looks like this:
$("#elementA").live('touchstart mousedown',function() {
$("head style").remove();
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('#-webkit-keyframes random_spin {'+
'from { -webkit-transform: rotate(0deg); }'+
'to { -webkit-transform: rotate(1440deg); }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
$("#elementB").removeClass("random_spin");
$("#elementB").css({'-webkit-animation-name': ''});
$("#elementB").css({'-webkit-animation-name': 'random_spin'});
$("#elementB").addClass("random_spin");
});
There I just added the animation to the header and I applied it to elementB.
My "random_spin" class is a CSS I already predefined :
.random_spin {
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
}
My intention with this is that I should be able to make my elementB spin every time I click on elementA. Unfortunately it only does it once and no matter how much I click on it or how many times I reset the animation name it still only does it once. What am I doing wrong?
To restart a CSS3 animation you cannot just remove and add a class without putting a small delay between the commands. This allows the browsers time to actually remove the class before adding the new one. You can do this with a simple setTimeout
setTimeout(function(){
$("#elementB").addClass("random_spin");
}, 100);
More information and examples can be found below.
http://css-tricks.com/restart-css-animation/
I've been trying to animate a Dashboard Widget's div disappearance, but it just brutally goes "poof" (as in, disappears as expected, only instantly).
function removeElement(elementId)
{
duration = 9000; // The length of the animation
interval = 13; // How often the animation should change
start = 1.0; // The starting value
finish = 0.0; // The finishing value
handler = function(animation, current, start, finish) {
// Called every interval; provides a current value between start and finish
document.getElementById(elementId).style.opacity = current;
};
new AppleAnimator(duration, interval, start, finish, handler).start();
interval = 1;
start= "visible";
finish = "hidden";
duration = 9001;
handler = function(animation, current, start, finish) {
document.getElementById(elementId).style.visibility="hidden";
};
new AppleAnimator(duration, interval, start, finish, handler).start();
}
I expected this to "disappear" the div a millisecond after its opacity reaches zero, but for a not so obvious reason (to me), it just disappears immediately. If I comment out the second animation code, the div fades out (but it's still active, which I don't want).
All solutions I've yet seen rely on using JQuery and wait for the event at the end of the animation, is there another way to do that, other than JQuery?
If you are looking for a pure javascript solution it probably needs a good understanding of how javascript event work and basically about javascript language. As reference you should check this question on CodeReview
But as I think the best solution for you and not to rely on jQuery is to checkout CSS3 animations. Even if they are not supported by all browsers you could use Modernizer to fill polyfills for animations.
My favorite CSS3 Animation library is Animate.css. It's pretty neat and gives you a variety of demos in the page.
You'll first have to choose an animation and add it to your css stylesheets. Then have another custom class that contain everything about the animation.
.disappear{
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
}
Then you could use javascript events to toggle in classes to your Elements. Below is how you add a class to an element.
var animationObject = document.getElementById("poof");
animationObject.className = animationObject.className + " disappear";
If you need more help regarding javascript of how this should be done check out this answer.
Hope this helps...
I found it: AppleAnimator possesses animator.oncomplete: A handler called when the timer is complete.
In my case:
var anim = new AppleAnimator(duration, interval, start, finish, handler);
anim.oncomplete= function(){
document.getElementById(elementId).style.visibility="hidden";
};
anim.start();
The Apple documentation actually calls "Callback" the animation code itself, and "handler" the callback, which makes it a bit hard to realize at first.
Thanks frenchie though, the "YourCallbackFunction" made me realize I was missing something related to callbacks :D