Как сделать эффект параллакса в афтер эффект
Добавил пользователь Skiper Обновлено: 04.10.2024
Справедливо было бы сначала показать сам эффект Световые блики, чтобы было понятно как он выглядит.
13 Free 4K Light Leaks
Добавляем световые блики
Общий алгоритм действий таков – просто перетаскиваем нужный видеоматериал на видеодорожку используемого нелинейного редактора видео и устанавливаем режим смешивания Screen или Add. Процедура немного отличается одна от другой в зависимости от рабочей среды. Добавим конкретики.
Premiere Pro: Разместите кадры со световыми бликами в нужном месте на временной шкале, перейдите на вкладку Элементы управления эффектами (Shift + 5). Кликните на стрелку рядом с Непрозрачностью. В открывшемся меню кликните на стрелку рядом с Режимом смешивания и выберите Экран – яркость пересекающихся цветов на кадрах увеличится вдвое. Можно изменить и значение непрозрачности.
Pinnacle Studio: В этом редакторе можно отрегулировать в небольших пределах только прозрачность накладываемой видеодорожки со световыми бликами. Режим же наложения останется обычным. Т.е. яркость фонового видео в местах наложения будет изменена.
Но если всё же хочется подмешать солнечных пятен, то разместите кадры над основной видеодорожкой и дважды кликните – откроется окно редактора эффектов. Выбираем Эффекты > Генераторы > Прозрачность и ползунок регулятора – примерно на 95%. Жмём ОК и наблюдаем эффект.
Настройки
В зависимости от ваших пожеланий, можно настроить оттенок, насыщенность размытость и продолжительность использования эффекта Световые блики. Всё это, конечно же, зависит от платформы редактирования. Разумеется, эффекта не должно быть много, применяйте без фанатизма и не бойтесь экспериментировать.
Автор: Алексей Касьянов.
Дополнительные материалы
Перевод терминов и названий эффектов.
Adobe After Effects.
Аудио – Audio
ВЧ и НЧ – Bass & Treble
Параметрическая коррекция – Parametric EQ
Стерео микшер – Stereo Mixer
Фильтр НЧ и ВЧ – High-Low Pass
Фланджер и хор – Flange & Chorus
Время – Time
Время пастеризации – Posturize Time
Искажение времени – Time warp
Размытие пикселей в движении – Pixel Motion Blur
Разница во времени – Time Difference
Смещение по времени – Time Displacement
Уровень размытия в движении – CC Force Motion Blur
Имитация – Simulation
Каустические кривые – Caustics
Мир волн – Wave World
Площадка для частиц – Particle Playground
Танец карт – Card Dance
Шарики – CC Ball Action
Пузыри – CC Bubbles
Изморось – CC Drizzle
Волосы – CC Hair
Система частиц – CC Particle Systems II
Мир частиц – CC Particle World
Дождь – CC Rainfall
Разбрасывание – CC Scatterize
Снег – CC Snowfall
Звездный взрыв – CC Star Burst
Искажение – Distort
Вихревое смещение – Turbulent Displace
Волнообразная деформация – Wave Warp
Деформация по Безье – Bezier Warp
Деформация сетки – Mesh Warp
Изменить форму – Reshape
Карта смещения – Displacement Map
Компенсация оптики – Optics Compensation
Полярные координаты – Polar Coordinates
Привязка по углам – Corner Pin
Стабилизатор деформации VFX – Warp Stabilizer VFX
Увеличение с сохранением уровня детализации – Detail-preserving Upscale
Устранение эффекта плавающего затвора – Rolling Shutter Repair
Смешивание – CC Bend It
Пятна – CC Bender
Движение – CC Flo Motion
Перевернуть страницу – CC Page Turn
Мощность – CC Power Pin
Пульсация – CC Ripple Pulse
Наклонять – CC Slant
Намазать – CC Smear
Разбиение – CC Split
Разбиение – CC Split 2
Плитки – CC Tiler
Канал – Channel
Задать каналы – Set Channels
Комбинирование каналов – Channel Combiner
Настроить подложку – Set Matte
Сдвинуть каналы – Shift Channels
Сложный арифметический – Compound Arithmetic
Сплошной совмещенный – Solid Composite
Удалить обработку краев цветом – Remove Color Matting
Композинг – CC Composite
Канал 3D – 3D Channel
3D туман – Fog 3D
Глубина поля – Depth of Field
Извлечение канала 3D – 3D Channel Extract
Подложка глубины – Depth Matte
Подложка идентификатора – ID Matte
Коррекция цвета – Color Correction
Авто контраст – Auto Contrast
Авто уровни – Auto Levels
Авто цвет – Auto Color
Выборочная коррекция цвета – Selective Color
Заменить на цвет – Change to Color
Изменить цвет – Change Color
Микширование каналов – Channel Mixer
Оставить цвет – Leave Color
Привязка цвета – Color Link
Произвольная карта PS – PS Arbitrary Map
Стабилизатор цвета – Color Stabilizer
Уровни (отдельные элементы управления) – Levels (Individual Controls)
Фото фильтр – Photo Filter
Цвета телетрансляции – Broadcast Colors
Цветовой баланс – Color Balance
Цветовой баланс (HLS) – Color Balance (HLS)
Цветовой тон/Насыщенность – Hue/Saturation
Черное и белое – Black & White
Яркость и контрастность – Brightness & Contrast
Нейтрализатор цвета – CC Color Neutralizer
Смещение цвета – CC Color Offset
Стержень – CC Kernel
Тонировка – CC Toner
Цветовая рама – Colorama
Устаревший – Obsolete
Базовый 3D – Basic 3D
Ключ яркости – Luma Key
Основной текст – Basic Text
Подавление разлития – Spill Suppressor
Текст по контуру – Path Text
Цветовой ключ – Color Key
Текст – Text
Перспектива – Perspective
3D-очки – 3D Glasses
Радиальная тень – Radial Shadow
Скос альфа-канала – Bevel Alpha
Скошенные края – Bevel Edges
Тень – Drop Shadow
Функция 3D Camera Tracker – 3D Camera Tracker
Цилиндр – CC Cylinder
Пространство – CC Environment
Сфера – CC Sphere
Прожектор – CC Spotlight
Подложка – Matte
Подавление подложки – Matte Choker
Упрощенное подавление – Simple Choker
Уточнить жесткую подложку – Refine Hard Matte
Уточнить мягкую подложку – Refine Soft Matte
Прозрачное наложение – Keying
Внутренний/внешний ключ – Inner/Outer Key
Ключ разности цвета – Color Difference Key
Ключевая очистка – Key Cleaner
Линейный цветовой ключ – Linear Color Key
Подложка разницы – Difference Matte
Расширенное подавление пропуска цвета – Advanced Spill Suppressor
Цветовой диапазон – Color Range
Ключ яркости – Key light (1.2)
Размытие и резкость – Blur & Sharpen
Быстрое размытие – Fast Blur
Двухстороннее размытие – Bilateral Blur
Контурная резкость – Unsharp Mask
Направленное размытие – Directional Blur
Радиальное размытие – Radial Blur
Размытие каналов – Channel Blur
Размытие по Гауссу – Gaussian Blur
Размытие по рамке – Box Blur
Размытие при малой глубине резкости камеры – Camera Lens Blur
Сложное размытие – Compound Blur
Увеличить четкость – Sharpen
Уменьшить мерцание в чересстрочной развертке – Reduce Interlace Flicker
Умное размытие – Smart Blur
Размытие крестом – CC Cross Blur
Размытие радиальное – CC Radial Blur
Быстрое радиальное размытие – CC Radial Fast Blur
Векторное размытие – CC Vector Blur
Создать – Generate
4-цветный градиент – 4-Color Gradient
Блики – Lens Flare
Заливка – Paint Bucket
Заливка пипеткой – Eyedropper Fill
Мозаичная текстура – Cell Pattern
Радиоволны – Radio Waves
Расширенное освещение – Advanced Lightning
Спектр аудио – Audio Spectrum
Форма звуковой волны – Audio Waveform
Цветовая шкала градиента – Gradient Ramp
Шахматная доска – Checkerboard
Клеевой пистолет – CC Glue Gun
Взрыв света – CC Light Burst 2.5
Лучи света – CC Light Rays
Световая развертка – CC Light Sweep
Нити – CC Threads
Стилизация – Stylize
Выделение краев – Find Edges
Мазки кисти – Brush Strokes
Мозаика движения – Motion Tile
Пороговое значение – Threshold
Проблесковый свет – Strobe Light
Цветовое тиснение – Color Emboss
Шероховатые края – Roughen Edges
Нагрузка блоком – CC Block Load
Сжигание пленки – CC Burn Film
Стекло – CC Glass
Коктейль – CC Mr. Smoothie
Пластик – CC Plastic
Плитка – CC RepeTile
Порог – CC Threshold
Порог RGB – CC Threshold RGB
Шум и зерно – Noise & Grain
Автошум HLS – Noise HLS Auto
Альфа-канал шума – Noise Alpha
Добавить зернистость – Add Grain
Пыль и царапины – Dust & Scratches
Соответствие зернистости – Match Grain
Турбулентный шум – Turbulent Noise
Удалить зернистость – Remove Grain
Фрактальный шум – Fractal Noise
Шум HLS – Noise HLS
Элементы управления выражения – Expression Controls
Элемент управления 3D-точки – 3D Point Control
Элемент управления слоя – Layer Control
Элемент управления точкой – Point Control
Элемент управления угла – Angle Control
Элемент управления цветом – Color Control
Переход – Transition
Вытеснение диафрагмы – Iris Wipe
Вытеснение карт – Card Wipe
Градиентное вытеснение – Gradient Wipe
Жалюзи – Venetian Blinds
Линейное стирание – Linear Wipe
Радиальное вытеснение – Radial Wipe
Растворение блоков – Block Dissolve
Очистка стекла – CC Glass Wipe
Очистка сетки – CC Grid Wipe
Очистка изображения – CC Image Wipe
Челюсти – CC Jaws
Очистка света – CC Light Wipe
Развертка линий – CC Line Sweep
Радиальная очистка – CC Radial Scale Wipe
Очистка увеличения – CC Scale Wipe
Смерчь – CC Twister
Программа – Utility
Конвертер профиля цвета – Color Profile Converter
Конвертер Cineon – Cineon Converter
Нарастить границы – Grow Bounds
Применить цвета LUT – Apply Color LUT
Расширитель HDR – HDR Commanders
Сжатие подсветки HDR – HDR Highlight Compression
Этот документ содержит полноценный сборник уроков по самым разным эффектам в After Effects.
Эффекты на русском (автор: OneS >
Эффект с мотогонщиком, стилизация видео, красивая космическая сцена, эффект slow mo дождя, атомсферная нуар-сцена.
Эффекты на русском (автор: Артур Крутилин)
Замена неба, крутые переходы, эффект голограммы, огненный текст.
Эффект из клипа Colplay «Up & Up (автор: Артур Крутилин)
Эффект дополненной реальности, AR glitch effect (автор: Эдуард Михайлов)
Подборка уроков по самым различным эффектам (автор:
Nuvaproductions)
3D фото с Displacement Map, анимация 3D линий, резанный текст или логотип с помощью масок, эффект Magnify, эффект параллакса,Venetian Blinds, эффект ночного видения, заставка с Glitch эффектом, эффект liquid анимации, переход через вращение.
Эффекты в After Effects имеют практически безграничные возможности для творчества. На сегодняшний день для этой программы существует колоссальное множество эффектов и это несомненно является её самой сильной стороной.
Многие делают выбор в пользу After Effects только благодаря её широким возможностям – ведь программа позволяет использовать не только стандартные эффекты, разработанные компанией Adobe, но также и многие потрясающе красивые эффекты от сторонних разработчиков.
Конечно наличие такого количества эффектов подразумевает и наличие навыков работы с ними, ведь каждый эффект имеет от одного до нескольких десятков параметров с настройками и каждый такой параметр можно еще и анимировать отдельно.
На описание работы их всех понадобиться очень много времени, поэтому в рамках данной статьи и видеоурока (в конце статьи) мы ознакомимся лишь с основными способами применения эффектов и работы с ними.
1. Поиск и выбор эффектов в After Effects
Все эффекты в Adobe After Effects разделены на группы, это существенно облегчает их поиск. Найти нужный эффект можно в меню Effect или при помощи строки поиска в панели Effects & Presets, написав в ней первые буквы или всё название эффекта целиком.
2. Добавление эффекта
Чтобы добавить эффект к слою, необходимо выделить слой и кликнуть два раза по нужному эффекту в панели Effects & Presets или выбрать эффект в основном меню Effect.
Эффект можно также просто перетащить мышкой из панели Effects & Presets на нужный слой в панель Effect Controls (1), в нижнюю панель на нужный вам слой (3) или на необходимый элемент в окне просмотра (2).
3. Включение и отключение эффекта
После добавления эффекта к слою, параметры эффекта появляются в панели Effect Controls (рядом с панелью Project). Отключить эффект можно в этой панели, убрав флажок fx в квадратном окошке рядом с названием эффекта.
Кстати, если к слою добавлено несколько эффектов, то они располагаются друг под другом в этом списке и в таком же порядке и применяются.
4. Доступ к параметрам эффекта в After Effects
Рядом с каждым эффектом в панели Effect Controls есть стрелочка для сворачивания и разворачивания параметров эффекта, а также в свойствах каждого слоя в вкладке Effects есть все те же параметры.
5. Настройка параметров эффекта
Настройка параметров эффекта в After Effects осуществляется вручную, вбиванием цифр с клавиатуры, либо зажатием правой кнопкой мышки на числовом значении параметра эффекта и перемещением мышки в какую-либо сторону, либо с помощью ползунка настройки параметра эффекта, который доступен только в панели Effect Controls.
6. Удаление эффекта в After Effects
Чтобы удалить эффект нужно выделить его название в панели Effect Controls или в настройках слоя в панели слоёв и нажать клавишу Delete на клавиатуре.
Таким образом осуществляется работа с эффектами в After Effects. И это только самые-самые базовые функции программы.
В настоящее время уже существует множество уроков по применению тех или иных эффектов в After Effects. Смотрите их, изучайте, и не бойтесь пробовать делать по-своему, потому как возможностей применения эффектов и их комбинаций – огромное множество.
Вполне возможно у вас получится нечто своё – уникальное, и вы запишете об этом свой видеоурок, выбрав качественный конденсаторный микрофон, о которых вы можете прочитать в этой статье.
На этом всё. Смотрите мои видео, благодарите лайками, пишите комментарии, отзывы и ваши вопросы здесь и на YouTube-канале, делитесь с друзьями ссылками на мои материалы в социальных сетях.
Я уже показывал как сделать 3D фото стиле пленочной камеры Nimslo 3D. В этом уроке я тоже буду говорить о 3Д, о том .
В этом уроке учимся, как сделать эффект параллакса в After Effects , который активно используется в популярных вирусных .
Показываю как просто сделать параллакс эффект в After Effects как в клипе ASAP Ferg - Floor Seats при помощи Фотошопа.
Почти любую фотографию можно оживить анимацией и придать сцене ощущение глубины, за счет создания для нее .
Хотели когда-нибудь оживить ваши фотографии? Разбираем по полочкам эффект параллакса с помощью Adobe .
Параллакс эффект в After Effects. Параллакс эффект в фотошопе. Как легко сделать крутой параллакс эффект? Parallax .
Смотрите вводный эпизод занятия №9, посвященного эффекту параллакса в коммерческих видео, гибридного курса .
Буду рад если свой результат выложите в инстаграмм сторис отметив меня @videostep 🖥️🖱️гайд по фрилансу: .
В этом видео показано, как сделать ваше фото живым и трехмерным в After Effects. Эффект параллакса Ссылочка на .
В этом видео я рассказываю как я создаю эффект параллакс при создании постов в Instagram. Сразу предупреждаю, это не .
Как сделать слайд-шоу в After Effects? Parallax Slideshow After Effects. Parallax SlideShow. Сегодня я расскажу как сделать .
Всем привет дорогие подписчики и гости моего канала, в этом видео мы научимся имитировать 3d пространство, сделаем .
В этом видеоуроке мы создадимParallax слайдшоу. Parallax Slideshow in After Effects (Full Tutorial) ▻ Подписывайтесь: .
В данном туториале разберем 3D просторанство AE, научимся пользоваться 3D камерой и сделаем крутой ролик из .
Бесплатный мини-курс по основам эффектов в After Effects 2020 Базовый After Effects для начинающих Курс по Adobe After .
Сегодня мы разберем очень простой, но крутой 3D parallax эффект, который будем применять в Adobe Premiere Pro CC .
В этом видео мы с вами сделаем анимацию картинки. Так называемый параллакс. Используя Photoshop и After effects ну и .
В этом уроке мы возьмём обычную картинку из интернета и превратим её в анимированный арт в программе After Effects.
Бесплатный мини-курс по основам эффектов в After Effects 2020 Базовый After Effects для начинающих Курс по Adobe After .
Easy Parallax Effect Tutorial in Adobe After Effects In this tutorial, Ian gives the rundown on how to create a parallax effect in After .
Как освоить After Effects с нуля новичку? After Effects для начинающих. After Effects для чайников. Народ, всем привет!
В этом уроке я покажу как используя всего лишь фотография, сделать динамику и иллюзию 3D в программе After effects.
Сейчас мы разберем, как сделать достаточно популярный эффект появления на бумаге слоя с изображением или видео .
В данном видео разберём способ создания псевдо 3D фото из обычного изображения в After Effects, без использования .
Здорова, киноделы! В этот раз мы приготовили для вас убойный материал! ТОП-40 эффектов в After Effects: анимация, .
От автора: На прошлой неделе мы с вами говорили о ZorroSVG, инструменте, с помощью которого можно конвертировать тяжелые прозрачные PNG-32 в легкие и гибкие файлы SVG. И это заставило меня задуматься. Парой недель ранее я рассказывал об эффекте Ken Burns в кинематографе и телевидении.
Рисунок 1: Параллакс эффект Ken Burns
Классический трюк видеооператоров. Все уроки на YouTube, которые вы сможете найти, будут относиться к пользователям Adobe After Effects.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
А что если бы мы смогли сымитировать данный эффект полностью в независимой SVG графике? Такой был план. Метод работал слегка не так, но, я думаю, очень полезно поделиться тем, что у меня получилось. Будем честными: данный подход скорее отправная точка, нежели готовый продукт. И я знаю, что он не работает в Opera 3.
Я не буду включать в статью весь код, но чтобы понять принцип работы, вам придется просмотреть его на CodePen. Я планировал…
Разбить фотографию на три наложенных друг на друга слоя – передний, средний и задний.
Конвертировать слои в SVG с помощью ZorroSVG.
Вручную пересобрать эти слои в один многослойный SVG.
Анимировать SVG при помощи CSS анимации для создания эффекта Parallax-Burns.
Первый подход. Фотограф
Рисунок 2: архивное фото Вудро Вильсона
Первая задача была найти хорошее фото. И я нашел замечательную бесплатную фотографию Вудро Вильсона на сайте Flickr. У фото хороший эффект глубины.
Я открыл фотографию в Photoshop и устранил повреждения в нижней половине, а затем разрезал его на три отдельных слоя (все в PNG-32).
Так как мы собираемся двигать эти слои относительно друг друга, необходимо создать дополнительное изображение для заполнения пустых областей. Чтобы клонировать новое изображение за забором и самим Вильсоном с его компанией я использовал заливку с учетом содержимого в Photoshop. Довольно грубый подход, но ничего страшного.
У нас есть раскадровка наших компонентов изображения.
SVG разметка
На CodePen можно писать SVG разметку прямо во вкладке HTML. Тут можно поиграться с SVG и придумать что-нибудь. Рассмотрим мой первый тест:
В демо видно, что слой с заграждением двигается быстрее среднего слоя, так как он располагается ближе к нам. В этом заключается ключевая особенность параллакс эффекта. В SVG есть два способа вставить в файл пиксельные изображения, и они совсем не отличаются от HTML.
Метод 1: Закодировать и вставить пиксельное изображение
Рисунок 3: Превью закодированного изображения
На рисунке видно, что изображение закодировано при помощи base-64 кодировки. Алгоритм превращает пиксельное изображение в строку цифр и символов, которые можно просто вставить в SVG через любой текстовый редактор. ZorroSVG делает то же самое – если открыть ZorroSVG файл в текстовом редакторе, вы увидите что-то похожее на рисунок 3.
С закодированным изображением немного неудобно работать, но сама возможность инкапсулировать все в один файл стоит того. Ничего не сломается, если вы загрузите файл, переместите в другую папку, или у вас попадет интернет соединение.
Метод 2: Указать изображение через URL
Как и в HTML, в SVG также можно ссылаться на сторонние изображения:
В самом верху SVG в теге STYLE написаны две простейшие анимации масштабирования — parallax-front и parallax-mid.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Свойство transform-origin со значением 50% 50% означает увеличение слоя точно в центр изображения. Значение 50% 100% создаст эффект того, что мы движемся на Вильсона и немного под него. А значение 50% 0 создаст эффект, будто мы делаем зум над его головой.
Просто как тест, данный метод довольно неплох. Появляется ощущение времени и пространства, чего нет на обычном фото. Но с другой стороны SVG полностью зависит от внешних файлов, которые не всегда могут быть доступны. Будет намного надежнее, если мы совместим все в один независимый файл.
Второй подход
Рисунок 4: Превью закодированного изображения
Если пропустить наши три файла PNG через ZorroSVG, на выходе мы получим три новых SVG файла, которые можно открыть через любой редактор. Я открыл одно изображение в Adobe Brackets и навел на его код курсор, результат виден на рисунке 4.
Вы заметите, что ZorroSVG помещает изображение в верхнюю половину, а в нижней половине кодирует альфа канал (маску). Тег filter чуть выше автоматически применяет маску.
Если пропустить все PNG файлы через Zorro, то фильтр вверху будет точно такой же. И… если мы вручную отредактируем эти три закодированных тега image в один SVG файл, то слои должны стать как по маслу, так ведь?
И так оно и есть! SVG изображение с тремя наложенными друг на друга слоями будет того же размера, что и оригинальный плоский PNG.
Затем можно добавить те же самые CSS классы и анимацию в файл и все! У нас должен получиться эффект Parallax Burns в независимом SVG файле.
Рисунок 5: Олимпийские игры в Лондоне – 1948 – футбол
Так оно и выходит, но с некоторыми оговорками… Но все же метод работает. На рисунке 5 представлен SVG файл, который можно загрузить на локальный компьютер или на сайт, переслать по электронной почте.
Проблемы?
Если открыть файл выше в Chrome или Safari, анимация будет дергаться и прыгать, а не плавно скользить, как в демо с PNG файлами на сайте CodePen.
С другой стороны если открыть файл в Firefox (я вам советую), вы увидите очень плавную анимацию. Когда дело касается манипуляций с SVG, Firefox нет равных.
Честно говоря, SVG пример выше намного большего разрешения, чем мне требовалось, но я хотел поднапрячь браузеры. Firefox даже не вспотел. Так как это альфа, я не тестировал демо в IE11. Но буду рад, если люди испытают его в этом браузере.
В общем, SVG может интерпретировать большинство CSS стилей, но есть небольшие сомнения, что он работает со стилями не так хорошо, как HTML в браузерах. К примеру:
SVG не умеет обрабатывать 3D анимацию CSS (превращает ее в 2D)
CSS анимация в SVG не такая плавная и надежная (за исключением Firefox). С простыми задачами SVG вполне справляется, но не искушайте судьбу.
Заключительные мысли
Может быть, проблему с плавностью анимации можно просто пофиксить.
Может, стоит поиграться с разрешением изображения?
Можно воспользоваться встроенным синтаксисом SVG анимации SMIL.
Может быть, лучше использовать SVG clip-path как маску, а не фильтр альфа канала, как мы.
Я поискал различные варианты всего пару дней, так что есть еще много неисследованных возможностей, с которыми необходимо экспериментировать.
Тем не менее, я думаю, что данный эффект займет достойное место в веб-дизайне, если мы сможем решить техническую сторону вопроса. Я видел как данная техника была удачно применена на слайдере изображений – каждое изображение медленно масштабируется до тех пор, пока не исчезнет с экрана.
В любом случае, стоит поэкспериментировать с демо и дайте мне знать, если вы придумаете какие-нибудь улучшения.
Обновление от 11 марта 2016
Рисунок 6: Parallax Burns эффект с clip-path в качестве маски
В данной статье я говорил, что SVG clip-path может быть более эффективным и производительным способом, чем фильтр альфа канала, который мы использовали в примерах. Рад вам сообщить, что я быстро провел тесты, и все работает.
На рисунке 6 вы видите независимый SVG файл размеров 245Кб. Натуральный размер 965px х 664px, а его анимация намного плавнее, чем в оригинальной версии.
Векторная маска на JPEG файлах получается более четкой и меньшего качества, но это не помеха (Я могу более точно вырезать маску). Также я применил фильтр размытия к заграждению после маски clip-path, так что его края расфокусировались.
Читайте также: