Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » С помощью чего реализована анимация?

С помощью чего реализована анимация?


     24.08.2016    Общие вопросы по вёрстке, Стили (CSS), jQuery, Модули    1668

вопрос
есть на сайте dle-news счетчик строк , сайтов и прочего
С помощью чего он реализован?
там ведь просто переход от 0 до 95к+
каким образом сделана анимация?


<section class="featured highlight footer">
    <div class="container">
        <div class="row center counters">
            <div class="col-md-3">
                <strong data-to="95000" data-append="+">95000+</strong>
                <label>Созданных сайтов</label>
            </div>
            <div class="col-md-3">
                <strong data-to="11">11</strong>
                <label>Лет разработки</label>
            </div>
            <div class="col-md-3">
                <strong data-to="5470" data-append="+">5470+</strong>
                <label>часов работы</label>
            </div>
            <div class="col-md-3">
                <strong data-to="7168" data-append="+">7168+</strong>
                <label>килобайт кода</label>
            </div>
        </div>
    </div>
</section>

Ответа пока нет


5 комментариев

karnelius
Юзер

karnelius - 24 августа 2016 22:46 -

<script type="text/javascript">
animations: function() {
        $(".counters [data-to]").each(function() {
                var $this = $(this);
                $this.appear(function() {
                        $this.countTo({
                                onComplete: function() {
                                        if ($this.data("append")) {
                                                $this.html($this.html() + $this.data("append"));
                                        }
                                }
                        });
                }, {
                        accX: 0,
                        accY: -50
                });
        });
}
</script>
<div class="row center">
        <div class="col-md-12">
        <h4 class="lead tall">Результатом нашей работы стали:</h4>
        </div>
    </div>
</div>


<section class="featured highlight footer">
    <div class="container">
        <div class="row center counters">
            <div class="col-md-3">
                <strong data-to="1555555" data-append="+">0</strong>
                <label>Довольных клиентов</label>
            </div>
            <div class="col-md-3">
                <strong data-to="0" data-append="+">0</strong>
                <label>Не довольных клиентов</label>
            </div>
            <div class="col-md-3">
                <strong data-to="1" data-append="+">0</strong>
                <label>Сеансов проведено</label>
            </div>
        </div>
    </div>

не работает (

irrwisch
Юзер

irrwisch - 24 августа 2016 23:48 -

Подключите весь файл, заработает http://dle-news.ru/templates/Default/js/theme.js

irrwisch
Юзер

irrwisch - 24 августа 2016 23:49 -

***Комментарий удален***

baseroad
Юзер

baseroad - 25 августа 2016 21:32 -

Цитата: irrwisch
Подключите весь файл, заработает http://dle-news.ru/templates/Default/js/theme.js

прописать каркас и вставить подключение скрипта??? В скрипте нужно что-то править?

irrwisch
Юзер

irrwisch - 25 августа 2016 22:11 -

Цитата: baseroad
В скрипте нужно что-то править?

по хорошему да, там процентов 80-90 лишнего кода. А так, если классы менять не будешь, то ничего менять не нужно.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх