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

Animacja counters numbers

Odpowiedz Nowy wątek
2018-04-24 16:28

Rejestracja: 2 lata temu

Ostatnio: 1 dzień temu

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>
edytowany 2x, ostatnio: Ktos, 2018-05-02 14:31
To jest dział php, nie css/js/html. - mefsh 2018-04-24 18:02

Pozostało 580 znaków

2018-04-25 08:58

Rejestracja: 4 lata temu

Ostatnio: 1 rok temu

Lokalizacja: Warszawa

0

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

edytowany 1x, ostatnio: Doggye, 2018-04-25 08:59

Pozostało 580 znaków

Odpowiedz

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