Javascript & Ajax \ Javascript

Создаем эффект плавного появления слов с помощью Web Animation API

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

Продолжить чтение

Javascript & Ajax \ Javascript

Готовим с Webpack часть 2 – понятие и использование webpack загрузчиков

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

Продолжить чтение

Javascript & Ajax \ Javascript

Готовим с Webpack часть 1: введение и базовая реализация

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

Продолжить чтение

Javascript & Ajax \ Javascript

WebGL тур по солнечной системе: Марс, часть 1

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

Продолжить чтение

Javascript & Ajax \ Javascript

Знакомство с WebGL

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

Продолжить чтение

Javascript & Ajax \ Javascript

Пререндер по наведению курсора?

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

Продолжить чтение

Javascript & Ajax \ Javascript

Ленивая загрузка комментариев Disqus

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

Продолжить чтение

Javascript & Ajax \ Javascript

Свободновращающийся элемент в 3D пространстве с помощью CSS переменных

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

Продолжить чтение