Метка «parallax»

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

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

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

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

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

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

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

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

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

У моего давнего британского партнёра (именно для него два года назад писалось «Распознавание почтовых адресов») появилась новая идея по оптимизации бизнес-процессов: коробки по складу должны возить роботы, а грузчики — только перекладывать товары с робота на полку и обратно. Смысл, естественно, не в том, чтобы за каждым роботом по пятам шёл грузчик, и принимался за погрузку-разгрузку, как только робот остановится — а чтобы роботов было намного больше, чем грузчиков, и чтобы роботы большую часть времени стояли в конечной точке своего маршрута, ожидая погрузки. Тогда грузчик будет лишь переходить от одного робота к следующему, нагружая каждый, и не будет тратить рабочее время на переноску товаров.

Предыстория

Проект «робот грузчик»: определение собственного местоположенияВ прошлом году мы экспериментировали с платформой самоходного пылесоса Roomba. Новенький пылесос обошёлся нам около £300 (подержанный можно найти за £100 и даже дешевле), и в его состав входят два электропривода на колёса, два датчика касания спереди, инфракрасный датчик снизу (для обнаружения ступенек) и сверху (для поиска зарадной станции). Точный перечень датчиков зависит от модели: в протоколе предусмотрено до четырёх инфракрасных датчиков снизу, каждый из которых возвращает один бит («пол виден/не виден»). В любом случае, никаких дальномеров: все имеющиеся датчики однобитные. Кроме того, никаких «программируемых ардуин» в Roomba нет, и чтобы им управлять, нужно установить сверху лаптоп (или ардуину), общающуюся с роботом по RS-232. Поигравшись с пылесосом вдоволь, мы так и оставили его пылиться на одной из полок склада.

Проект «робот грузчик»: определение собственного местоположенияВ этом году мы решили попробовать Microsoft Robotics Development Studio (MRDS), для продвижения которого Microsoft сформулировала спецификацию «MRDS Reference Platform» — набор оборудования и протокол управления «стандартным» роботом. Эта спецификация позволила бы роботолюбам создавать совместимых роботов и переносить между ними программы. По сравнению с аппаратным оснащением пылесоса, Reference Platform намного сложнее и мощнее: в спецификацию включён Kinect, три ИК-дальномера и два ультразвуковых, а также датчики вращения колёс (encoders). Реализацию MRDS RP пока что предлагает только фирма Parallax под названием Eddie (порядка £1000, не включая Kinect). Необычайное сходство Eddie с фотографиями робота-прототипа в спецификации MRDS RP наводит на мысли, что спецификация создавалась в тесном сотрудничестве с Parallax, иначе говоря — Parallax удалось добиться, что Microsoft приняли их платформу за эталонную.

Кроме разнообразия датчиков, Eddie обладает механически впечатляющей платформой (заявленная грузоподъёмность 20кг, а мощности моторов достаточно, чтобы толкать впереди себя складской погрузчик) и программируемым контроллером Parallax Propeller, т.е. критические куски кода можно зашить непосредственно в робота, а не только командовать им с компа.
Читать полностью »

Микроконтроллер фирмы Parallax под названием Propeller, в сравнении с «классикой» жанра типа PIC или AVR занимает несколько странную нишу. Про первые два можно сказать, что это архитектуры общего назначения. Создатели же Пропеллера подошли к вопросу «с фланга».
Читать полностью »

Сегодня на днях я сделал Parallax эффект на HTML5 Canvas. К сожелению я не смог сделать живой пример, поскольку программа Github (Windows) не подчиняется мне, даже не хочет заливать в gh-pages (пришлось на master). Я с трудом уговорил залить JNG пример.

Вот собственно сам пример (точнее ее исходники): github.com/Alexei03a/html5-parallax
Мне нечем было снимать видео, поэтому этот топик останется без самого интересного.

Это сцена зеленого круга с падающей тенью и фоном в стиле паттерн. Самое интересное — никакого WebGL.
Правда сделал на скорую руку. Кроме того, нету Motion Blur, высококачественной тени, более хорошего parallax (как в WebGL).
Читать полностью »

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

Читать полностью »


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