Создание сайта с нуля. Урок 18 - Верстка. animateNumber + верстка секции «Основные направления услуг»

Это 18-й урок по созданию сайта с нуля под ключ на заказ. Сегодня мы научимся делать анимированные числовые значения и сверстаем секцию «Основные направления услуг».

Смотреть урок на YouTube

Файлы для прохождения урока: Скачать

jQuery.animateNumber: https://aishek.github.io/jquery-animateNumber/

jQuery Number Animation with Blur + Number Separator:

$({blurRadius: 5}).animate({blurRadius: 0}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $(".lines").css({
      "-webkit-filter": "blur("+this.blurRadius+"px)",
      "filter": "blur("+this.blurRadius+"px)"
    });
  }
});
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(' ');
$(".lines").each(function() {
  var tcount = $(this).data("count");
  $(this).animateNumber({ number: tcount,
    easing: 'easeInQuad',
    "font-size": "40px",
    numberStep: comma_separator_number_step},
    1000);
});

Waypoints Documentation: http://imakewebthings.com/waypoints/guides/jquery-zepto/

Stackoverflow SVG: https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Создание сайта с нуля. Урок 18 - Верстка. animateNumber + верстка секции «Основные направления услуг»

Премиум уроки от WebDesign Master

Другие уроки по теме «CMS/Framework»