Witam. Odwzorowuje strone http://energia-eko.com/ i mam problem z animacja na stronie głównej. Chciałbym aby te koła liczbowe wjeżdżały płynnie na zdjęcie. Mi się udało zrobić żeby ta animacja tych kół "wjeżdżała" na zdjęcie lecz nie jest to płynna animacja. Tu podsyłam kawałek kodu
<style>
#shiva
{
width: 150px;
height: 150px;
background:rgba(255,255,255,0.3);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
float:left;
margin:5px;
margin-left: 150px;
border:4px solid #fff;
text-shadow: 0 0 2px gray;
box-shadow: 0 0 2px gray;
color:#fff;
position: relative;
-webkit-animation: mymove 3s;
-webkit-animation-fill-mode: forwards;
animation: mymove 3s;
animation-fill-mode: forwards;
}
.count
{
line-height: 120px;
color:white;
margin-left:30px;
font-size:25px;
font-size: 50px;
text-align: center;
}
.text {
margin-left: 100px;
font-size: 25px;
font-family: 'Oswald', sans-serif;
color: #fff;
}
.text_2 {
font-size: 25px;
font-family: 'Oswald', sans-serif;
margin-left: 10px;
color: #fff;
}
.text_3 {
margin-left: 160px;
font-family: 'Oswald', sans-serif;
font-size: 25px;
color: #fff;
}
@-webkit-keyframes mymove {
from {top: 0px;}
to {bottom: 320px; }
}
@keyframes mymove {
from {top: 0px;}
to {bottom: 320px;}
}
</style>
<div id="shiva"><span class="count">5</span><span class="text">lata</span><span class="text_2">pracy</span><span class="text_3"><br />na rynku</span></div>
<div id="shiva"><span class="count">403</span></div>
<div id="shiva"><span class="count">72</span></div>
<div id="shiva"><span class="count">212</span></div>
<div style="clear:both"></div>
<script>
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
var $sliderEl = $('#my-slider');
var sliderObj;
</script>