I'm building a simple blinking div, it blinks every 3s:
.timer { opacity: 1; animation: blink 3s alternate infinite; }
#keyframes blink { to {opacity: .25;} }
and it's text content is updated every 3s as well, counting down from 50 to 0:
var number = 50;
window.setInterval(function countdown(){ $('.timer').text(number--); }, 3000);
However for some reason my animation and JQ slowly become out of sync, you'll notice it after a few animations have run through. I'm wondering how I could go about assuring that they keep in time with each other.
JS Fiddle:
https://jsfiddle.net/rourkemclaren/61ry4s1j/3/
Thanks in advance.
The issue is related to the CSS alternate flag. If you remove it the effect becomes more streamlined.
Note that you can also listen to the CSS animation events using JavaScript instead of using the setInterval:
$('.timer').on('animationiteration', function() {
$(this).text(--number);
});
Related
Using Unveil (https://luis-almeida.github.io/unveil/) a lightweight js lazy load plugin.
The site features an example of a callback. I am using it just fine, but would like to add an additional animation to the opacity.
I am not a coder (front end designer) so all that I've tried is basically just a hack and slash attempt at adding another 'this.style' line.
The current script is as follows:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
});
});
I am hoping someone can show me how to add another call to load another CSS effect to the above script yet keep the opacity as well. I would like to add the following CSS animation alongside the opacity that's currently being used.
img {
animation: 1s ease-out 0s 1 slideIn;
}
#keyframes slideIn {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(0);
}
}
To add a new CSS effect, you don't need to add a new callback. You can add all CSS effects right after the other. All the effects that you give will run one by one in a sequential manner.
You could do something like this:
$("img").unveil(200, function() {
$(this).on("load", function() {
this.style.opacity = 1;
this.style.animation = "1s ease-out 0s 1 slideIn"
});
});
I'm building a carousel (slideshow) effect for my website and I have little issue. At every image change I want to make fade effect. So I've added a class with animation for it. And here the problem comes.
This function is firing every 3 sec (setInterval)
let sliderInterval = setInterval(nextImg, 3000);
function nextImg() {
imgChange(sliderNum + 1);
}
const heroImg = document.querySelector('.hero__image');
function imgChange(x) {
heroImg.classList.remove("fade");
sliderNum = (x + imgLocations.length) % imgLocations.length;
heroImg.src = imgLocations[sliderNum];
heroImg.classList.add("fade");
}
Fade effect:
.fade {
animation: fade 1.5s ease-in-out;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="hero">
<img class="hero__image" src="photo1">
</div>
It works only for first image switch. Altough at the start of function it shall remove the class fade I see in function that it stays there in element and won't gone. It doesn't matter if I try to put this effect on hero section or img within it.
The problem is that css animations with keyframes will by default only run once. It is possible to alter the amount of times they run, but that will run them constantly in a loop which is undesirable.
Instead, what needs to happen is the animation needs to be reset. In order to do this, the element needs to have its animation name removed (fade in this case). This can be done with animation-name: none;, however, the rule needs to be placed on the element when fade is removed. Note the change to the selector to make the fade animation name take precedence when applied.
On top of this, it is important to note that if you remove and add the same class in a function, due to the way that browsers work, nothing will happen. In order for the browser to recognize any changes made, a page repaint must occur (here is a list of what makes that happen). In order to force the page to repaint, I chose to use offsetHeight, which is why you see heroImg.offsetHeight used in the code (note that it only needs to be read, it doesn't have to be used or assigned).
I mocked your image with a div for convenience.
let sliderInterval = setInterval(imgChange, 3000);
const heroImg = document.querySelector('.imgMock');
function imgChange() {
heroImg.classList.remove("fade");
heroImg.offsetHeight; // force repaint to recognize `animation-name: none;`
heroImg.classList.add("fade");
}
.imgMock.fade {
animation: fade 1.5s ease-in;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.imgMock {
height:50px;
width:50px;
background-color:black;
animation-name: none;
}
<div class="hero">
<div class="imgMock"></div>
</div>
I got a Section named "login" and a Section named "register".
When the opacity of them changes, I want to have a linear transition that take 0.3 seconds.
CSS:
#login{
opacity: 0;
transition:opacity 0.3s linear;}
#register{
opacity: 0;
display: none;
transition:opacity 0.3s linear;}
When you go on the Homepage HERE and click on "Query",
the opacity of #login changes to 1. That works fine with the transition!
When you click "oder registriere dich neu" below the Login-Form,
the Login-Section gets opacity: 0 again - then get display: none.
That also works perfect with a transition.
BUT than the REGISTER-Section is put to display: block and then opacity: 1 (after a setTimeout of 500 Milli-seconds.)
This don't have a transition! why?
When i click "Hast du schon einen Account?" again (to get back to the login),
the register Block will fade out with a transition perfecty again, and the login-form comes up without a transition again?
Here's the Javascript code for setting the opacities:
function changeSection(IDOut, IDIn)
{
var IDOut = "#" + IDOut;
var IDIn = "#" + IDIn;
hideSection(IDOut);
showSection(IDIn);
}
function hideSection(IDOut)
{
$(IDOut).css({opacity: "0"});
setTimeout(function(){
$(IDOut).css({display: "none"});
},500);
}
function showSection(IDIn)
{
setTimeout(function(){
$(IDIn).css({display: "block"});
$(IDIn).css({opacity: "1"});
},500);
}
IDOut is the Section, I want to Fade out (witch works perfect for login and register).
IDIn is the Section, I want to Fade in (witch DON'T WOKR for login and register)!
Why does the transition not work for IDIn?
Any Ideas?
You are using jQuery, you can do this alot simpler and let the jQuery handle it for you.
instead of your code for showSection and hideSection, use:
$('#yourselector').fadeIn(300);
to fade an element in with a time of 300 miliseconds, and:
$('#yourselector').fadeOut(300);
to hide it.
The transition does not work according to your code.
The IDIn originally has the display property as none and opacity as 0.
According to the function showSection, you first wait for 500ms, and then set the display and opacity property simultaneously to what you want. Concurrency is the problem, because display and opacity are changed in one animation frame at the same time, but the browser has to choose one property to transit. And it choose display.
More technically, transition only works on elements that are visible and have dimension. The width and height must not be zero. So display:none; cancels out your transition.
So the solution is easy, just put display outside of your setTimeout. Make display changed first.
The benefit over native jQuery method fadeIn is that it utilizes css transition, which is more efficient than jQuery's underlying animation.
function showSection(IDIn)
{
$(IDIn).css({display: "block"});
setTimeout(function(){
$(IDIn).css({opacity: "1"});
},500);
}
Hi i am trying to get a piece of text to fade in and out automatically without a click or hover method.
i'm not sure i can use an on page load function either because the text i want to fade in and out only appears after a user clicks to open another div on the page.? (I may be wrong?)
I am using this script but the text is static and not doing anything. Can anyone advise me where i'm going wrong? Thanks
<script>
function cycle() {
$('#morebutton-pics').fadeOut(1000, function() {
$('#morebutton-pics').fadeIn(1000);
cycle();
});
}
$(document).click(function(){
cycle();
});
</script>
This sounds like it would be better as a CSS animation:
#morebutton-pics {
animation: pulse 1s alternate infinite;
-webkit-animation: pulse 1s alternate infinite;
}
#keyframes pulse {
from {opacity:1}
to {opacity:0}
}
#-webkit-keyframes pulse {
from {opacity:1}
to {opacity:0}
}
This will work in Firefox, Chrome and IE10. Since this is more eye-candy than a required feature, that seems acceptable to me.
Notwithstanding that CSS is probably the better answer, your code doesn't work because it repeatedly calls cycle() without ever waiting for the second animation to finish.
function cycle() {
var $el = $('#morebutton-pics');
$el.fadeOut(1000, function() {
$el.fadeIn(1000, cycle); // loop in the second callback
});
}
replace
$(document).click(function(){
cycle();
});
with
$(document).ready(function() {cycle(); });
if the div is hidden it does not matters
If you go to google.com, you notice the menu on top slowly appears once you have mouse over the page. I was wondering what does Google use to control the fading effect?
[edit] since I don't use jQuery, I don't want to include it just to use this feature
There are two ways.
Javascript
Works in most browsers.
Gradually change the CSS opacity attribute of an element using Javascript. That's easiest with a good framework like jQuery, but is quite simple to do yourself.
function fadeIn() {
var element = document.getElementById("someID");
var newOpacity = element.style.opacity + 0.05;
element.style.opacity = newOpacity;
if (newOpacity < 1) {
window.setTimeout(fadeIn, 50);
}
}
Pure CSS
Only supported in Webkit at the moment.
#someID {
opacity:0;
-webkit-transition: opacity 1s linear;
}
#someID:hover {
opacity:1;
}
For an example have a look at the Surfin' Safari blog.
You could use jQuery and add an onmousemove callback on the tag that fades a hidden div with id "mymenu" in, something like:
$("html").one("mousemove", function() {
$("#mymenu").fadeIn("slow")
});
Warning: this was typed here, so I dunno if it compiles ootb.
I've never looked at it, but it's only logical to assume that there's a timer that gets started at load time for the page, and that adjusts either the alpha for the specified element or the opacity of another element that overlays it, in that element's CSS. Every timer tick, the numbers get turned up/down a little and the text becomes a bit more legible. When full visibility is reached, the timer is turned off.
JQuery is a finished, ready to use implementation of this in a cross-platform compatible package. You just add it, stir it up and it's done.
If you choose not to take the advice of the other answers, you'll have to research and implement the strategy from my top paragraph on your own. Good luck!
This is actually a rather complex thing to do because of the cross browser differences. The basics are something like the following:
Get the current opactity of the element as float.
Determine the ending opacity as float.
Determine your rate speed - i dont know what this should be in raw terms - somthing like .01/ms maybe?
Use a setInterval to fire a function that increases the opacity by your rate where: setInterval(function(){myElement.style.opacity = parseFloat(myElement.style.opacity)+0.01;}, 1); Somewhere in ther though you need to check if youve reached the endpoint of your animation and shutdown your interval.
I would think that they set the initial opacity of the elements other than the search box to zero. When the mouseover event is fired, the elements' opacity is gradually increased to 1.
Edit: In code it would look something like this:
var hiddenStuff = document.getElementByClassName("hiddenStuff");
var interval=document.setInterval(function() {
for (var i=0; i<hiddenStuff.length;i++){
hiddenStuff[i].style.opacity+=0.1
}
if (hiddenStuff[1].style.opacity===1){
window.clearInterval(interval);
}
}, 100);
You may need to tweak the parameters to get a smooth animation.
#Georg, that example works on Firefox 3.5 too. :-)
Demo: PURE CSS http://jsfiddle.net/6QS2a/1/
</div>
css:
.item {
height:150px;
width:150px;
border-radius:100%;
background:skyblue;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0.2;
}
.item:hover {
opacity: 1;
}