В последнее время стали популярны сайты в виде одностраничников. На них веб мастера обычно размещают яркие слайдеры, галереи работ, отзывы и всевозможные блоки с преимуществами и почему с этой компанией выгодно работать.
На одном из таких сайтов меня попросили сделать красивый скрипт, который позволяет плавно менять графики от одного значения к другому. Сначала было решено сделать все в виде плавно меняющихся цифр, но нашел в сети бесценный код на обычном css3, который красиво показывает анимированный рост графиков без использования java script-а.
Немного разобрав пример, я понял, что он использует анимацию и картинку для фона. Более того данный код имеет адаптацию под мобильные устройства, что очень радует. В скачанном примере, в самом низу вы найдете верстку 3 графиков.
Чтобы задать до какого процента должен расти график меняйте параметр data-percent (не забудьте выставить тоже значение в теге .progress_fill). Параметр data-wow-delay позволяет вам задать время старта анимации. По умолчанию эта опция отключена. Чтобы она заработала вы можете подключить wow библиотеку. Она также пригодится в том случае, если графики находятся где-нибудь в конце сайта, то с этой библиотекой пользователь увидит анимацию только тогда, кода промотает страницу до графиков.
(Пока оценок нет)
Загрузка...