Javascript & Ajax \ Javascript

Как создать «прилипающее» во время прокрутки страницы видео

От автора: если вы заходили последнее время на медиа сайты (сервисы стрминига, новостные сайты, Facebook и т.д.), то могли заметить один тренд, связанный с плеерами. Если прокрутить страницу вниз, плеер уменьшается в размере и прилипает к вьюпорту, а не скрывается.

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

Javascript & Ajax \ Javascript

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

От автора: сегодня мы хотим поделиться с вами небольшой подборкой hover эффектов. Концепция взята с сайта Merci-Michel. Из-за «текучести» эффект смотрится очень красиво. Основная идея – показывать стек слоев за основным превью. Слои должны принимать главный цвет на изображении. После этого все быстро анимируется. Мы для анимации воспользуемся библиотекой anime.js.

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

Javascript & Ajax \ Javascript

Панели инструментов, клавиатуры и вьюпорты

От автора: во всех мобильных браузерах есть два вьюпорта. Вьюпорт макета ограничивается вашими стилями (width: 100% означает 100% вьюпорта макета), а визуальный вьюпорт описывает только видимую область страницы. В качестве напоминалки можно использовать эту визуализацию. В сегодняшней статье мы узнаем, что случается, когда эти вьюпорты меняют размер. Также мы изучим событие resize.

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

Javascript & Ajax \ Javascript

Тестирование производительности с помощью User Timing API

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

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

Javascript & Ajax \ Javascript

Создание своего прогрессивного загрузчика изображений

От автора: вы могли видеть прогрессивные изображения на Facebook и Medium. Замыленные изображения низкого качества заменяются на полноразмерные версии, когда элемент попадает в поле зрения.

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

Javascript & Ajax \ Javascript

Улучшаем ссылки для печати веб-страниц с помощью JavaScript

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

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

Javascript & Ajax \ Javascript

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

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

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

Javascript & Ajax \ Javascript

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

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

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

Javascript & Ajax \ Javascript

Window, Window: измерение размеров экрана с помощью JavaScript

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

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

Javascript & Ajax \ Javascript

По максимуму: использование Math.min и .max

От автора: поиск минимума и максимума в наборе чисел – обычная задача в программировании. В JavaScript для этого вполне можно использовать математические операторы или даже серию условий if, однако функция Math.max (и противоположная ей Math.min) намного эффективнее и точнее.

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