От автора: в этом уроке мы продолжим знакомство с методами в библиотеке moment js.

Читать далее →

От автора: в этом уроке мы познакомимся с очень удобной библиотекой moment.js и рассмотрим работу с форматами в рамках данного инструмента.

Читать далее →

От автора: во второй части мы подробно изучим загрузчики, их возможности, принцип работы, а также узнаем, как их настроить. В первой части мы познакомились с webpack, узнали, что это такое, а также изучили некоторые его возможности. Мы написали скрипт, подключили модуль к нему и создали пакет с помощью webpack. Самое важное из всего этого было то, что мы запаковали несколько модулей. Теперь пора понять, что модуль может ссылаться не только на JS файлы. По умолчанию в webpack поддерживаются только JS модули. Но что делать, если нам нужно запаковать в выходной файл CSS? Что если нам нужно взять HTML шаблоны из файлов верстки и использовать их в скрипте? Знакомьтесь с загрузчиками.

Читать далее →

От автора: в первой части мы познакомимся с webpack, его командной строкой, файлом настроек, а также создадим наш первый пакет. Начну я эту статью так же, как большинство авторов, пишущих по этой теме, с простого, незаурядного и слегка спутанного описания webpack.

Читать далее →

От автора: в предыдущей статье я познакомил вас с WebGL. Также я объяснил, почему для создания нативного 3D контента на страницах буду использовать фреймворк threeJS для демонстрации возможностей WebGL. В этой статье я покажу вам, как сделать 3D камеру и кнопки для взаимодействия между WebGL контентом и HTML страницей.

Читать далее →

От автора: предпринималось множество попыток по созданию по-настоящему интерактивных 3D элементов, в том числе были VRML и Flash. Однако стандарт появился только в 2013 году, и это стал WebGL на основе OpenGL ES 2.0. С появлением данной технологии стала возможна интеграция нативного 3D прямо в веб-страницы без каких-либо плагинов и расширений для браузеров.

Читать далее →

От автора: InstantClick – довольно популярная JS библиотека (4,344 звезды пока я пишу эту статью). Суть: «Перед кликом по ссылке пользователи наводят на нее курсор мыши. Между этими событиями проходит в среднем от 200 до 300 мс (проверьте сами). InstantClick использует это время для предварительной загрузки страницы, чтобы при клике на ссылку она уже была готова.»

Читать далее →

От автора: в продуманных макетах комментарии, как правило, играют второстепенную роль. Во множестве случаев посетители так и не долистывают страницу до комментариев. Но я вам открою глаза, по умолчанию комментарии загружаются на сайт, что может вызвать проблемы на плохом соединении.

Читать далее →

От автора: недавно один из моих учеников спросил меня, можно ли создать элемент на экране, который можно вращать в любую сторону при помощи мыши или касаний. На первом семестре я рассказываю только о HTML5 и CSS, поэтому ответ был «нет, без JavaScript нельзя». Но в этом решении всего пара строк JS, и в нем очень интересно используются CSS переменные.

Читать далее →

От автора: сегодня мы поделимся с вами экспериментальными эффектами. Мы вдохновлялись эффектом hover, который увидели на сайте Kikk 2015, созданным студией Dogstudio. Нам нужно анимировать изображение (это может быть ссылка или просто элемент сетки) с эффектом наклона отдельных частей. На одном элементе у нас будет несколько наклоняемых частей (рычагов), с помощью которых можно создать множество интересных эффектов. Для создания эффекта нам понадобится изображение, слой с бликом, полупрозрачный слой с цветным градиентом, рамка и подпись. В примерах ниже показано, как их можно анимировать. Надеемся, вам понравится.

Читать далее →