Menu
I have made this: jsfiddle.net/BWncv/ I have a cup of tea with steam. I want to animate this steam. But this animation is not going well.
The steam must be animated up and up and up. Like steam from the top of a cup of tea. You can see it in the link.
How can I fix it so that the smoke is well animated?
You can change the code on js fiddle and update it.
891
Try this (demo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
</style>
</head>
<body>
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
<script type="text/javascript">
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns);
});
}());
</script>
</body>
</html>
A little extra demo here http://jsfiddle.net/nRas9/1/ which fully randomizes the elements.
My final code, a little complicated though:
http://jsfiddle.net/Fbtug/32/ (updated thanks to Luke Stanley)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#viewport {
position: relative;
width: 1000px;
height: 600px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
background: transparent url("http://www.mikevierwind.nl/images/bg-selection.jpg") no-repeat 0px -29px;
}
#viewport .smoke {
position: absolute;
width: 215px;
height: 410px;
bottom: 230px;
left: 90px;
}
.smoke1 {
background: transparent url("http://www.mikevierwind.nl/images/stoom1.png");
}
.smoke2 {
background: transparent url("http://www.mikevierwind.nl/images/stoom2.png");
}
.smoke3 {
background: transparent url("http://www.mikevierwind.nl/images/stoom3.png");
}
</style>
</head>
<body>
<div id="viewport">
<img
src="http://www.mikevierwind.nl/images/bg-selection-carousel.png"
width="2610"
height="600"
alt=""
class="carousel-image"
/>
</div>
<script type="text/javascript">
(function () {
"use strict";
var i = 0;
for (; i < 3; i += 1) {
setTimeout((function (idx) {
return function addSmoke () {
var
time = 7500,
smoke = $('<div />', {
class: 'smoke smoke' + (idx + 1),
css: {
opacity: 0
}
});
// add to viewport
$(smoke).appendTo('#viewport');
// animate
$.when(
// animate to 100% opacity in some part of the total time (fade in)
$(smoke).animate({
opacity: 1
}, {
duration: time * 0.2,
easing: 'linear',
queue: false,
// animate to 0% opacity in the remaining time (fade out)
complete: function () {
$(smoke).animate({
opacity: 0
}, {
duration: time * 0.8,
easing: 'linear',
queue: false
});
}
}),
// animate movement
$(smoke).animate({
bottom: $('#viewport').height()
}, {
duration: time,
easing: 'linear',
queue: false
})
// when all done, remove and add new random smoke
).then(function () {
$(smoke).remove();
addSmoke();
});
};
}(i % 3)), i * 2500);
}
}());
</script>
</body>
</html>
Some awesome answers and here a sample too using animate to alter the top and the opacity: (Demo)
smoke1.animate({
top: -500,
opacity: 0.5,
}, 7000, function(){
smoke1.css({'top':300,'opacity':1})
smoke1Animate();
});
Of course stretching out the top so the opacity fades in view.
Kicking off the animations at different times as to make them fade in gradually:
smoke1Animate();
setTimeout(function(){ smoke2Animate(); },2000);
setTimeout(function(){smoke3Animate(); },4000);
And then of course calling themselves when they are finished.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
