I am a beginner in jQuery and JS and I wanted to make a simple fade in animation using the following code. Unfortunately the code is not running smooth, and despite reading up all the basics (at least I suppose so) I cannot get it to run smoothly. Can anyone point me in the correct direction on how to make a smooth fade in animation?
All my elements are visible in the beginning. I don't want to start with hidden elements as this could result in problems in my UI if there is no JS enabled.
Thank you.
$(function () {
$("#center_block").animate(
{
opacity: 0,
}, 0, function () {
$("#center_block").animate({
opacity: 1,
}, 250);
});
});
If you have a slow processor on your computer or if you are viewing javascript animations a mobile device the processor might not be able to cope with the animation. If you use CSS3 animations then the inbuilt browsers hardware acceleration is used, which is a lot more efficient.
All I am doing is using CSS3 animation to apply the fade.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity:1;
}
}
#center_block {
animation: 1s ease-out fadeIn;
}
<div id="center_block">Look at me, I'm Mr Center Block</div>
There really is no need for JavaScript at all here. CSS animations can do this more easily with better performance (because they will leverage GPU hardware acceleration):
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<span>Hello</span>
Or, if you don't want the animation to be automatic and have some sort of trigger, then just add a CSS class to the object at the right time:
document.querySelector("button").addEventListener("click", function(){
document.querySelector("span").classList.add("animate");
});
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
}
.animate {
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button>Click to Start</button>
<span>Hello</span>
I would advise using CSS animations as much as possible for the smoothest performance. A great library to get you started is animate.css. To use it, include the css library in your project and use javascript to add predefined classes to your components. In your case:
$('#center_block').addClass('animated fadeIn');
would fade in the #center_block element nicely.
If you don't want to hide the elements incase JS is disabled, then you need to hide them first using JS. Also, you're currently using 250ms, which is incredibly fast, and unlikely to be perceived by users.
$(document).on('ready', function(){
$('#center_block').hide().fadeIn(250);
});
If your elements already have opacity: 0; for the CSS, then you can add a transition to handle the animation:
#center_block{
opacity: 0;
transition: all .25s linear;
}
Then change the CSS value of opacity whenever the triggering condition is met:
$('#center_block').css('opacity','1');
Related
I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.
my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:
Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook
Now take a look at my code:
HTML
<div class="container">
<div class="letter">A</div>
</div>
CSS
*{
margin:0;
padding:0;
}
.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}
.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}
.letter:hover{
cursor:pointer;
}
.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}
Jquery
$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});
Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:
1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)
2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)
3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?
I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.
You can do this with just CSS:
Transition:
.letter {
transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
-webkit-transition: ease .25s;
}
Zoom:
.letter:hover {
transform: scale(1.5); // Alternatively, you can use percentages
-wekbit-transform: scale(1.5); // Chrome / Safari
-moz-transform: scale(1.5); // Firefox
}
Rotate:
.letter:hover {
transform: rotate(15deg);
-wekbit-transform: rotate(15deg); // Chrome / Safari
-moz-transform: rotate(15deg); // Firefox
}
I'm animating a block of html that fades in (opacity) and moves slightly from the left (margin-left)...
$('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () {
...code in here
}
.latest-stats {
position:absolute;
top:250px;
opacity:0;
margin-left:40px;
}
There is a delay and I need to perform some functions within that block of HTML after the transiiton has finished. Can this be done in css, maybe by adding a class that has the transitions upon it?
The Added CSS Class:
.transitioned {
opacity:1;
margin-left:55px;
transition:all 1s;
-ms-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
}
The jQuery: (UPDATED)
setTimeout(function(){
$('.latest-stats').addClass('transitioned');
setTimeout(function(){
//your code here
},1000);
},1000);
but I just have to ask, is there a specific reason you wanna do this? I mean what's wrong with the jQuery animate?
We rejig the JS to just add the class rather than the any styles:
setTimeout(function(){
$('.latest-stats').toggleClass('transitioned').each(function () {
// Call back functions here
});
}, 1000);
I use setTimeout() since delay() only works for animations. I use each() to add my callback function, since toggleClass() doesn't have a callback, and this way I don't need to load an extra library.
Then the CSS handles the changes to the styles, keeping all the visual aspects in one location:
.latest-stats {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position:absolute;
opacity:0;
margin-left:40px;
padding: 30px;
background:red;
margin:40px;
}
.latest-stats.transitioned {
opacity:1;
-webkit-transform:translate(55px, 0);
-moz-transform:translate(55px, 0);
transform:translate(55px, 0);
}
Note I'm using translate to shift the element rather than margin-left as the browser doesn't have to change the layout or perform a repaint on the element, which can improve the animation. However, check for browser support and provide fallbacks when necessary/appropriate.
Here's a JSFiddle.
I am creating a "scroll to top" link for my personal webpage but I have ran into some strange behavior that I cannot seem to correct.
I want the link to fade in when the user scroll to a certain amount of pixels and then fade out again if the user scrolls up above this point. Pretty standard behavior.
The markup is pretty simple:
The CSS:
#scroll-top {
position: fixed;
right:30px;
bottom:30px;
width: 30px;
height:30px;
color: #38555e;
z-index: 99;
border-radius: 50%;
border:2px solid #38555e;
text-align: center;
background:#fff;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
display:none;
}
#scroll-top:hover {
background:#38555e;
color:#fff;
border-color:#fff;
}
and the Jquery code:
$(window).scroll(function () {
if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
if ($(this).scrollTop() > 100) {
$('#scroll-top').fadeIn(2000);
} else {
$('#scroll-top').fadeOut(2000);
}
}
});
DEMO: http://jsfiddle.net/chc91n5f/4/
My problem is that when the link is faded in, it waits about 2 seconds and then fades in fast instead of starting the fading immediately and fading slowly. Also when the link fades out it waits and then fades out fast.
What am I missing here?
The fadeIn and fadeOut functions in jQuery are shorthands for animating the opacity.
jQuery animates properties as putting them inline and changing it untill it reaches a specific point. In your case it's changing the opacity to lets say 0.35677 and the browser animates this change.
In order to have a more sleek animation use CSS class (visible for instance) to modify the opacity.
body {
height:2000px;
background:red;
}
#scroll-top {
position: fixed;
right:30px;
bottom:30px;
width: 30px;
height:30px;
color: #38555e;
z-index: 99;
border-radius: 50%;
border:2px solid #38555e;
text-align: center;
background:#fff;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
opacity: 0;
}
#scroll-top:hover {
background:#38555e;
color:#fff;
border-color:#fff;
}
#scroll-top.visible {
opacity: 1;
}
And use the following code to change it:
if ($(this).scrollTop() > 100) {
$('#scroll-top').addClass('visible');
} else {
$('#scroll-top').removeClass('visible');
}
I believe the problem is in your scroll function..
In the most simple explanation.
When you scroll (1 tick with your scrollwheel) the code looks if you are past 100px. In most basic browsers and OS's the scrolling distance is 122px (correct me if i'm wrong). Problem is.. if you scroll 3 clicks with your mousewheel. you are 3 times past 100px and the animation of the fadeIn wil queue 3 times. At a certain point jQuery has enough of it and says you know what.. if you want the same long animation for a few times. i will skip a few times to spead my workload.
So much for the simple explanation.
You can disable this with a clearQueue (http://api.jquery.com/clearqueue/) and it will disable the flashing animation. edited like this
$(window).scroll(function () {
if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
if ($(this).scrollTop() > 100) {
$('#scroll-top').animate({opacity: 1},1000).clearQueue();
console.log("test");
} else {
$('#scroll-top').animate({opacity: 0},1000);
}
}
});
Demo: http://jsfiddle.net/2uox7ep7/5/
Its because it keeps on fading in/out as you scroll even when it is already fading and thus the delay. You can use a variable like visible to keep track of the visibility
http://jsfiddle.net/chc91n5f/7/
I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.
function show_user(dnid) {
/* dnid is HTML ID of a div. */
if (! $(dnid).is(':visible')) {
$(dnid).show()
}
$('html, body').animate({scrollTop: $(dnid).offset().top});
$(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}
What's strange is that this alternate animation works:
$(dnid).animate({opacity: "toggle"}, 1200);
But it's not what I want at all.
Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.
The function above is called by this link
Locate Me
Could someone help me animate the background color?
=========
Thanks everyone for the help. Lots of similar answers. Here's what I ended up with
In my header
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Then in my show_user function right after the scroll animation.
var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);
That gives a relatively quick red "pulse" that will draw the user's eyes.
Again, thanks for the help.
jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).
Source
jQuery supports animation between any numeric CSS properties, which does not include colors. However, there are other libraries that make animating colors possible. One such library is the aptly-named jQuery Color. Its readme page shows several examples of how to use it to animate between colors using the jQuery .animate() function
Use the CSS animation property and keyframes
See it in action
HTML
<div></div>
CSS
div {
background-color: red;
height: 200px; width: 200px;
-webkit-animation: pulse 1s ease-in 0 infinite normal both;
-moz-animation: pulse 1s ease-in 0 infinite normal both;
-o-animation: pulse 1s ease-in 0 infinite normal both;
animation: pulse 1s ease-in 0 infinite normal both;
}
#-webkit-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-moz-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-ms-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-o-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
you must first set the background to the from color or it wont do anything 2nd time around.
You also typoed the css property 'background-color' and put it in quotes like i didn't :)
$(dnid).css({'background-color': "#ffffff"});
$(dnid).animate({'background-color': "#db1a35"}, 1200);
Just add this below your jQuery script and you are done:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>