Javascript & Ajax \ Javascript

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

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

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

Javascript & Ajax \ Javascript

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

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

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

Javascript & Ajax \ Javascript

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

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

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

Javascript & Ajax \ Javascript

Эффекты наклона при наведении мыши

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

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

Javascript & Ajax \ Javascript

Повышаем производительность: как загружать изображения при помощи in-view.js

От автора: в этом уроке я покажу вам, как повысить производительность веб-страниц при помощи in-view.js. Эта JS библиотека посылает ответ, когда что-либо попадает в видимое окно браузера во время прокрутки страницы. С ее помощью мы сможем динамически загружать изображения тогда, когда они нужны.

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

Javascript & Ajax \ Javascript

Как отслеживать поведение пользователя с помощью Google Analytics Events

От автора: Если коротко: вы только что переделали дизайн вашего сайта, задействовали все известные вам лучшие практики. Сайт загружается быстро и, определенно, выглядит намного лучше с новым интерфейсом. Однако решили ли вы, как оценить новый дизайн? Как вы узнаете, повышает ли конверсию новое попап окно? Как часто это окно появляется, и как много людей закрывают его? Сколько пользователей используют выдвигающееся меню, которое вы также недавно добавили? Сколько людей просматривает слайдер изображений на домашней странице более одного слайда? Вопросов много, и все они разные. В этом уроке я покажу вам, как работать с Google Analytics Event Tracking API (какое длинное название!) и найти ответы на все вопросы.

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

Javascript & Ajax \ Javascript

Создаем генератор случайных цитат с помощью JSON

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

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

Верстка \ CSS 3

Легкий параллакс эффект с помощью JavaScript и CSS трансформаций

От автора: в последнее время ряд сайтов, в том числе рекламная страница Bioware игры Mass Effect Andromeda и работа агентства Active Theory Under Armour получили параллакс эффект, когда движение мыши связано с движением элемента на странице в противоположном направлении. Я захотел воссоздать этот эффект на чистом JavaScript и современных свойствах CSS. Пример моих стараний можно увидеть ниже.

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