Рубрика «parallax»

Book Stacks Unlimited: история первого в мире книжного интернет-магазина - 1
Когда речь заходит о первом в истории интернет-магазине, специализировавшемся на продаже книг, на ум сразу же приходит детище Джеффа Безоса. Однако Amazon нельзя назвать пионером электронной торговли: еще за три года до него на рынок e-commerce вышел книжный интернет-магазин Book Stacks Unlimited. Собственно, этот электронный магазин начал работать еще до появления WWW. Все указывало на то, что инновационный для своего времени стартап должен стать флагманом индустрии… но этого не случилось. Как говорится, истории провалов порой могут научить большему, чем тысяча историй успехов. Так что же стало причиной неудачи Book Stacks Unlimited?
Читать полностью »

Здравствуй! Меня зовут Никита, я работаю над мобильными SDK в компании ABBYY и в том числе занимаюсь UI-компонентом для сканирования и удобного просмотра многостраничных документов на смартфоне. Этот компонент сокращает время на разработку приложений на базе технологии ABBYY Mobile Capture и состоит из нескольких частей. Во-первых, камера для сканирования документов; во-вторых, экран редактора с результатами захвата (то есть автоматически сделанными фотографиями) и экран исправления границ документа.

Разработчику достаточно вызвать пару методов – и вот в его приложении уже доступна камера, которая автоматически сканирует документы. Но, помимо настроенных камер, нужно предоставить клиентам удобный доступ к результатам сканирования, т.е. автоматически сделанным фотографиям. А если клиент сканирует договор или устав, то таких фотографий может быть очень много.

В этом посте я расскажу о трудностях, которые возникли в процессе реализации экрана редактора с результатами захвата документов. Сам экран представляет из себя две UICollectionView, я их буду называть большой и маленькой. Возможности ручной корректировки границ документа и другой работы с документом я опущу, а фокус сделаю на анимациях и особенностях layout-а во время скролла. Ниже на GIF можно посмотреть, что получилось в итоге. Ссылка на репозиторий будет в конце статьи.

Понимаем UICollectionViewLayout на примере Photos App - 1

В качестве референсов я часто обращаю внимание на системные приложения Apple. Когда внимательно смотришь на анимации и другие интерфейсные решения их приложений, то начинаешь восхищаться их внимательным отношением к разного рода мелочам. Сейчас мы в качестве референса будем смотреть на приложение Photos (iOS 12). Я обращу ваше внимание на конкретные фичи этого приложения, а дальше мы попробуем их реализовать.
Читать полностью »

image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski
Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).
Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.
Финальное демо
Читать полностью »

Приветствую!
С приходом material дизайна приходят и новые элементы. Например, появился RecyclerView, который многим уже известен. Про него на хабре писали не раз: тыц, туц.

Вроде как пользоваться им — понятно, но ведь хочется большего. Обычно при переходе на новые альтернативы чего-то не хватает. Вот и мне не хватило того, что есть. Понадобилось мне сделать parallax эффект, как в Google Play на странице конкретного приложения. Реализации для ListView и ScrollView имеются. Поискал я в великом и могучем, и все, что нашел — этот репозиторий. Решение вроде рабочее, да и народ пользуется. Однако мне не понравилось его юзабилити. И как водится, решил написать свое.
Читать полностью »

В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?
Читать полностью »

Некоторое время назад я публиковал статью «Эффект слайдов на сайте. Через грабли на собственном велосипеде»
Статья справедливо набрала множество замечаний, в основном касающихся отсутствия практической части и кодов.
Вашему вниманию переработанная статься снабженная живыми примерами.
Читать полностью »

Работая над одним из сайтов столкнулись с необходимостью реализовать эффект слайдов.
А именно — при вертикальном скроллинге страницы она должна перемещаться не как единое целое, а как складываемая пачка отдельных листов.
Не хотелось бы утруждать никого программным кодом (при необходимости в следующей статье), поэтому расскажу какое решение мы использовали и как к нему шли, используя вкрапления псевдокода только для уточнения некоторых моментов.
Читать полностью »

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Кстати, сегодня исполняется ровно год с момента поста нашего первого дайджеста на Хабре. Вам спасибо, что до сих пор нас читате, нам спасибо, что все еще продолжаем это дело :)

Дайджест интересных новостей и материалов из мира айти за последнюю неделю №52 (6 — 12 апреля 2013)
Читать полностью »

Здравствуйте!

Я — Фёдор furikuretsu Ананьев, веб-разработчик студии Hot Dot, и сегодня я дам несколько простых советов для тех, кто хочет сделать своё JS-параллакс-приложение очень и очень быстрым.
Читать полностью »

Прочитав пост о псевдо 3D эффекте, стало интересно реализовать некий аналог для использования в веб приложениях. За результатом прошу под кат
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js