Анимация накручивание чисел на сайте
 | |
| В данной материале идет материал по созданию анимированного счетчика для чисел, что по умолчанию запускаться, когда пользователь открывает сайт. Также можно поставить на отдельную страницу, что при открытии нее автоматически запускается счетчик, который накручивает числа, до той цифры, что вы изначально прописали в скрипте. Это делают для многих функций, как проданный материал, или сколько осталось товара, что очень удобно и смотрится оригинально. До этого на сайте уже выставлял аналогичный материал с анимацией накрутки счетчика, который идет на несколько блоков, что основном можно наблюдать на официальных или современных ресурсах. Этот как раз изначально хотел разместить отдельно, ведь если скрипты идут на несколько счетчиков, то здесь идет один, где можно задействовать в любом информационном потоке. Который также работает, как и все, что мы заходим на сайт, это может быть на одну страницу, как портфолио. И там можно установить под нужную вам информацию. Проверено по работоспособности, где ниже есть ссылка на demo страницу.  Здесь в скрипте выставил пробег до этой цифры "var $numero = 1427;" и как понимаете, вы сами ставите, то число, которое вам нужно, что будет быстро накручивать до заданного вами численности.  Немного изменив в стилистике оттенок и получается в 3D, что оставлю по умолчанию эту настройку. Установочный процесс: Здесь нужно подключить библиотеку, у кого она еще на сайте не выставлена на странице. Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> HTML Код <div class="chislenny-sostav"></div> CSS Код .chislenny-sostav { display: table; margin: 100px auto 0; font-size: 120px; color: #efe9e9; text-shadow: 0 5px rgba(175, 169, 169, 0.8); } JS Код var $numero = 157; $(".chislenny-sostav").html($numero); $inicio_porcentagem = 0; $fim_porcentagem = $('.chislenny-sostav').html(); setInterval(function(){ $(".chislenny-sostav").html($inicio_porcentagem); if($inicio_porcentagem < $fim_porcentagem){ $inicio_porcentagem = $inicio_porcentagem + 1; } }, 10); Ведь такой вид всегда привлекает внимание, и его точно все почти заменят, а значит им станет интересно. И здесь вы поверх или внизу цифр можете разместить информационный блок, как уже писал, что осталось это количество, ведь вы самостоятельно меняете значение цифр. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
