I am quite new to js and jQuery and wanted to achieve a simple animation that has been discussed many times here: a bouncing ball. However, I did not find the answer to my specific question as topics discussed already were much more sophisticated.
I want a quite simple animation: five bounces and stay on the ground with the sixth. That one I have achieved so far. But for the five bounces I want to decrease the distance of bounce by 20% of the initial distance. Say the distance is 100, it should bounce to 80 first then to 60... to 20 to 0.
You can see my attempts here.
Or just the js code here:
$(function() {
var time = 500;
var bounces = 5;
function bounceDown(){
$(".ball").animate({top: 200}, time, function(){
bounceUp();
});
};
function bounceUp() {
$(".ball").animate({top: 100}, time);
};
function shadowUp(){
$(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time,
function(){
shadowDown();
});
};
function shadowDown() {
$(".shadow").animate({width: 0, height: 0, left: 130, top: 225, opacity: 0}, time);
};
function finalDown(){
$(".ball").animate({top: 200}, time);
};
function finalShadow(){
$(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time);
};
$(".button").on("click", function(){
for (var i = 0; i < bounces; i++){
setTimeout(function(){
bounceDown();
shadowUp();
}, time*2*i);
setTimeout(function(){
finalDown();
finalShadow();
}, 5000);
};
});
});
You can declare your initial top_bounce value:
var top_bounce = 100;
And then change your bounceUp function to:
function bounceUp() {
$(".ball").animate({top: top_bounce}, time);
top_bounce = top_bounce + 20;
};
Like you can see here: http://jsfiddle.net/darkajax/5wASf/
And about the "bonus question" mentioned in your comment, it'd be something similar, declare a variable like: var shadow_size = 0; and then your function like:
function shadowDown() {
console.log(shadow_size);
$(".shadow").animate({width: shadow_size*100, height: shadow_size*10, left: 110, top: 225, opacity: 0}, time);
shadow_size += 0.2;
};
You can see the fiddle updated, also you'd just have to do something similar with left to make it look centered
Related
I am looking to animate this progress bars, but I'm having a different behavior using jQuery animate() method. I want to animate the progress bars one by one with a 0.1s delay. I will need help with choosing the right animation, because now my animation is behaving downwards. I'd like to do it in the simplest way possible.
Here is what I have so far:
$('.vertical-bars .progress-fill span').each(function() {
var percent = $(this).html();
var pTop = 100 - (percent.slice(0, percent.length - 1)) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
$(this).parent().animate({
height: "toggle"
}, {
duration: 900,
specialEasing: {
height: "swing"
}
});
});
I have prepared a JSFiddle with my progress bars HERE.
The right behavior is to fill the progress-bars upwards, like in THIS example.
You need to animate both the height and top of your bars, or you need to construct them such that they are pinned to the horizontal axis when you change the height. The second takes a little more thought, but the first, although not as elegant, is straight forward.
To animate top you can't use toggle (as it is animating to 100% and back, not to 0), so you will need to animate both the shrink and grow separately using done to trigger a second animation. Taking the same style as you used above:
$('.vertical-bars .progress-fill span').each(function () {
var percent = $(this).html();
var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
var self=this;
$(this).parent().animate({
height: 0,
top: "100%"
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
},
done:function(){
$(self).parent().animate({
height: percent,
top: pTop
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
}
})
}
});
});
Of course you can also achieve the same thing using css animation. If I have time to figure it out I'll post an edit.
I don't know what height: "toggle" does but you basically want to set 0 height and 100% offset from top and then start animation that adjusts both styles.
The 100ms between animations is done simply by using setTimeout and incrementing the timeout.
https://jsfiddle.net/kss1su0b/1/
var elm = $(this).parent();
elm.css({
'top': '100%',
'height': 0
});
setTimeout(function() {
elm.animate({
'height': percent,
'top': pTop
}, {
duration: 900,
specialEasing: {
height: "swing"
},
});
}, animOffset);
animOffset += 100;
The simplest and most performing way to invert the animation direction is to align the bars at the bottom with css:
vertical-bars .progress-fill {
position: absolute;
bottom: 0;
}
Then you don't need to set the top any more with jQuery and set a delay:
$('.vertical-bars .progress-fill').each(function (index) {
var percentage = $(this).find('.percentage').html();
$(this).delay(index * 100).animate(
{
height: percentage
}, {
duration: 900,
done: function () {
$(this).find('span').show("normal");
}
}
);
});
jsfiddle
I have never used GreenSock before. The background image changes fine, it switches and scales in and out however the issues I am facing are as follows:
The first background image on the sprite to show does not scale in and out but all the others do, how can I fix this?
It seems to change the background then scale in and out. So there is a small delay between the changing of the background image and the start of scale animation. Is there anyway to tighten this up so it scales as its changed to make it a more smoother transition?
JavaScript:
// Avatar animations
var avatarInterval;
var fadePulse = true; // true: will fade avatar images and pulse in and out once changed
// false: will slide the avatars in and out
var avatarCount = 11; // set the amount of avatars in the sprite image
var avatarSpeed = 1000; // set the avatar transition speed
var avatarHeight = 250; // set the height of a single avatar image
var avatarTotalHeight = 2750; // set the total height of the avatar sprite image
function startAvatarAnimation() {
var i = 0;
$(".avatars").show();
// Loop through avatar background images on sprite
avatarInterval = setInterval(function(){
i++;
if(i > avatarCount){
i = 0;
}
// Let's change the background
$(".avatars").css({'background-position' : '0 -' + (i*avatarHeight) + 'px' });
// avatar fading / pulse effect
if (fadePulse == true) {
// Now some scaling effects!
TweenMax.to(avatars, 0.1, {
css: {
// 'background-position': '0 -' + (i*avatarHeight) + 'px',
scaleX: 1.1,
scaleY: 1.1,
transformOrigin: "center center"
},
onComplete: scaleOut,
onCompleteParams: [avatars],
delay: 0.1,
ease: Power3.easeInOut
});
// Bring the scale back to normal
function scaleOut(el) {
TweenMax.to(el, 0.1, {
css: {
scaleX: 1.0,
scaleY: 1.0,
transformOrigin: "center center",
autoAlpha: 1,
},
ease: Power2.easeOut
});
}
} else {
// avatar sliding effect
}
}, avatarSpeed);
return false;
}
Take a look at this result.
Snippet:
var avatarCount = 6;
var avatarHeight = 250;
var avatarTotalHeight = 1500;
var avatars = $(".avatars");
var animDuration = 0.1;
var i = 0;
var timeline = new TimelineMax({ paused: true, repeat: -1 });
timeline.to(avatars, animDuration, {
scaleX: 1.1,
scaleY: 1.1,
ease: Power3.easeIn,
onComplete: onCompleteScaleIn
});
timeline.to(avatars, animDuration, {
scaleX: 1.0,
scaleY: 1.0,
ease: Power3.easeOut
});
function onCompleteScaleIn() {
i++;
i = i >= avatarCount ? 0 : i;
TweenMax.set(avatars, {
backgroundPosition: '0 -' + (i * avatarHeight) + 'px'
});
}
timeline.play();
#container {} #container,
.section {
overflow: hidden;
position: relative;
}
.section {
position: absolute;
}
#container .logo_o2 {
bottom: 10px;
right: 20px;
}
.section {
position: relative;
height: 250px;
width: 300px;
display: block;
}
.section .abs {
position: absolute;
}
.section h1,
.section h2,
.section h3,
.section h4 {
font-size: 21px;
width: 100%;
text-align: center;
letter-spacing: 0;
}
.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {} .avatars {
background-image: url(http://s1.postimg.org/dwt9yu9b3/test_bg_sprite.png);
background-repeat: no-repeat;
background-size: cover;
display: block;
height: 250px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="section section3">
<div class="abs clouds"></div>
<div id="avatars" class="abs avatars"></div>
</div>
Details:
First off, this result could have been achieved in a number of ways, more efficiently. Even within TweenMax there could have been a number of possible solutions. So, this attempt is in no way supposed to be the best.
Because you are already using GSAP; I have used TimelineMax, TweenMax's powerful cousin that makes sequencing of animations very easy.
So we have a timeline variable which carries an instance of TimelineMax object with default settings of: 1. initially paused and 2. indeterminate loops.
We then populate this timeline by using the method .to() which basically will start animation from wherever the object currently is. There are a plethora of methods and properties available for the GSAP platform, you should explore.
On the first line of .to() call, we have an onComplete callback pointing to a function.
This callback adjusts the backgroundPosition as per the current iteration.
Finally, there is another .to() call which does the same i.e. start the animation from whatever attributes avatars object currently possesses (in our case, scaleX & scaleY would be at 1.1 because of the first .to() call).
Note: by default, any new .to() (or .from() or .fromTo()) call is appended at the end of a timeline. Read more about the position parameter here.
Let me know if you have any questions.
Update: Here is another version using TweenMax only. Much leaner I guess.
I'm working on a simple game with Javascript, involving changes to an HTML5 canvas. Have a number (10+) of objects entered in an array:
var boxes = [];
boxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
boxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
The entire array is then run through an update function, which changes the x value depending on the player's position:
for (var i = 0; i < boxes.length; i++) {
if (boxes[1].x > -3000 + canvas.width) {
boxes[i].x -= robot.speed * modifier;
robot.x = canvas.width - 300;
};
};
When the player dies a reset function is run:
var reset = function () {
robot.x = 0;
robot.y = 500;
++deaths;
};
I'm looking for a way to reset all the values of the boxes array to the original values when this function runs, essentially resetting the map, without having to enter each one manually, ie boxes[1].x = 300
https://jsfiddle.net/to31b612/
Simply initialize from a single function:
var boxes;
initBoxes();
function initBoxes() {
boxes = [];
boxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
boxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
}
Then just recall initBoxes() every time you need to initialize it.
You could just initialize boxes inside the reset() function, and make sure to call call reset() before the first run of the game, too.
var deaths = -1;
var boxes = [];
function reset() {
robot.x = 0;
robot.y = 500;
boxes = [{
x: 0,
y:canvas.height - 370,
width: 400,
height: 20
}, {
x: 300,
y:canvas.height - 100,
width: 150,
height: 90
}];
++deaths;
}
It sounds like you want to use the Memento Pattern
just use 2 variables
var initBoxes = [];
initBoxes.push({
x: 0,
y:canvas.height - 370,
width: 400,
height: 20});
initBoxes.push({
x: 300,
y:canvas.height - 100,
width: 150,
height: 90});
var boxes = initBoxes;
Then when ever you need to reset boxes just
boxes = initBoxes;
I have got a menu on my homepage and on hover I would like them to enlarge. This is exactly what I have achieved, except there is one flaw:
When I move off before the animation ends, the option stops the animation and subtracts 30 from the width that left off from the previous animation. So it always intersects with the other animation and causes false results.
Example:
I move quickly to menu option 1, it only expands little - let's say by 10px - while I am on it, and as I move off the width decreases by 30px, which is more than the previously moved 10px, which results in a smaller button overall.
I would like to somehow capture how much it has moved during the mouseover animation and only decrease the width in the leaving function by that amount. Or, of course some other easy solution, if there is one...
Here's the code:
$('.menu_option').hover(
function() {
var w = $(this).width()+30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
}, function() {
var w = $(this).width()-30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
});
What you can do is make another variable which is the origin width then when you put it back go back to the origin:
js:
var o = $('.menu_option').width();
$('.menu_option').hover(function () {
var w = $(this).width() + 30 + "";
$(this).stop().animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
$(this).stop().animate({
width: o
}, 150, 'easeOutQuad');
});
http://jsfiddle.net/Hive7/qBLPa/6/
You need to complete the previous animation before the width is calculated
$('.menu_option').hover(function () {
var $this = $(this).stop(true, true);
var w = $this.width() + 30;
$this.animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
var $this = $(this).stop(true, true);
var w = $this.width() - 30 + "";
$this.animate({
width: w
}, 150, 'easeOutQuad');
});
Demo: Fiddle
Is there anyway to make a div box shake on page load? Like maybe just once or twice?
Update: At this URL I have it still not working on page load, what am I doing wrong?
http://tinyurl.com/79azbav
I think I'm stuck at the onpage load; that failure can be seen here:
Get onpage to work correctly
I've also tried initiating the animation with my already implemented body onLoad:
<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" >
But still failing like a champ.
Try something like this:
EDIT:
Changed Shake() to shake() for consistency with jQuery conventions.
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({ "position": "relative" });
for (var x = 1; x <= 3; x++) {
$(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
}
});
return this;
}
EDIT:
In my example the left position is set to 25, but you can reduce this for a more subtle effect or increase it for a more pronounced effect.
Using the shake function:
$("#div").shake();
Here's a jsFiddle that demonstrates it: http://jsfiddle.net/JppPG/3/
Slight variation on #James-Johnson's excellent answer for ~shaking~ elements that are absolute positioned. This function grabs the current left position of the element and shakes it relative to this point. I've gone for a less violent shake, gas mark 10.
jQuery.fn.shake = function () {
this.each(function (i) {
var currentLeft = parseInt($(this).css("left"));
for (var x = 1; x <= 8; x++) {
$(this).animate({ left: (currentLeft - 10) }, 10).animate({ left: currentLeft }, 50).animate({ left: (currentLeft + 10) }, 10).animate({ left: currentLeft }, 50);
}
});
return this;
}