Wątek przeniesiony 2018-05-02 12:31 z PHP przez Ktos.

Animacja counters numbers

0

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>
0

Kod też możesz formatować na forum.
Co do problemu wydajności to polecam poczytać np. ten LINK

1 użytkowników online, w tym zalogowanych: 0, gości: 1