CODEPENS 100 “Список с более делом 2020” отсутствует, а как обычно состоит из очень захватывающих конструкций и анимаций, Вы можете увидеть весь список здесь Все ручной работы с разнообразными навыками. Таким образом, в этом посте я выбрал топ-5 и для каждого, я дам вам проблеск того, что находится под капотом, и указывает на то, что навыки используются для достижения таких удивительных творений. Я также дам некоторые ресурсы для вас, чтобы посмотреть и исследовать дальше.
1 карта надувательства взаимодействия
Райан Муллиган Это творение заняло верхнее место, он содержит три карты с живописными фонами и некоторыми текстовыми контентом. Наблюдение за картами производит очень гладкую анимацию различных элементов, эта техника называется шахматной анимацией.
Вы можете проверить ядро анимации перехода CSS, обращаясь к блоку кода в CSS из строк 171-204
@media (hover: hover) and (min-width: $bp-md) { .card:after { transform: translateY(0); } .content { transform: translateY(calc(100% - 4.5rem)); > *:not(.title) { opacity: 0; transform: translateY(1rem); transition: transform var(--d) var(--e), opacity var(--d) var(--e); } } .card:hover, .card:focus-within { align-items: center; &:before { transform: translateY(-4%); } &:after { transform: translateY(-50%); } .content { transform: translateY(0); > *:not(.title) { opacity: 1; transform: translateY(0); transition-delay: calc(var(--d) / 8); } } }
Да, это немного сложный, чтобы объяснить, потому что его написано в SASS, а также использует переменные, его в основном используя анимацию в пошагов CSS-переходов. Вы можете узнать больше об этом здесь: https://css-tricks.com/stagled-css-transions/
Нужен навыки
PUG – это используется для генерации HTML Sass – Это используется для генерации CSS CSS – преобразование анимации, адаптивные CSS Grid, CSS переменные Ресурсы https://css-tricks.com/staggered-css-transitions/
2 самолета
Стив Гарднер В этой гладкой анимации прокрутка используется как способ контролировать анимацию самолета. Когда вы прокрутите самолет летают в 3D, и текстовое содержимое прокручивает противоположный путь.
Эта анимация использует две разные библиотеки анимации. Он использует Three.js, чтобы иметь дело с 3D-аспектами модели самолета, затем использует Greensocks Scrolltrigger и плагины Drawsvg, чтобы сделать большую часть анимации. Если вы хотите знать, как эти вещи работают, потом читайте больше об этом здесь: Scrolltrigger: https://greensock.com/scrolltrigger/ DrawsVG: https://greensock.com/drawsvg/ Three.js: https://threejs.org/
Нужен навыки
HTML Sass – Это используется для генерации CSS Ключевые техники CSS – путь клип, несколько фоновых изображений СВГ JavaScript – использование трехместных моделей для создания трехмерных моделей, используйте библиотеки анимации GreenSocks, особенно Scrolltrigger. Ресурсы GSAP: https://greensock.com/get-started/ прокрутчик: https://greensock.com/scrolltrigger/ DrawsVG: https://greensock.com/drawsvg/ Three.js: https://threejs.org/
3 CSS GRID: газета
Оливия Нг
Это умная прецизионная инженерная макет для моделирования старомодного макета газеты, который также отзывчивый. Это хороший пример того, как настроить комплексную конструкцию, чтобы соответствовать всем размерам экрана.
Наиболее важным хитростью следует отметить, как некоторые из вложенного макета определяются использованием подсчета столбцов. Обычно большинство людей используют CSS Grid для основной сетки и используют Flex Box для достижения вложенного макета в сети. Но лучшее очистительное решение состоит в том, чтобы использовать подсчет столбцов. С помощью скриншота вы можете увидеть, как выделенный нижний контент определяется с количеством столбцов: 2:
И основная зона сетки Config показана ниже, помечена как 1 на скриншоте. Свойство второго стиля, помеченные 2, показывает, как определена одна из областей сетки.
Нужен навыки
PUG – генерирует HTML Sass – создает CSS CSS переменные CSS – Расширенное понимание GRID плюс использование подсчета столбцов. Ресурсы https://css-tricks.com/snippets/css/complete-guide-greid/ https://developer.mozilla.org/en-us/docs/web/css/column-count.
4 конфеты цветная кнопка анимация
Юхомян Это набор из 16 кнопок, каждый с ее индивидуальной анимацией, применяемой в CSS. Анимация колеблется от смены цветов фона, применяя градиенты к 3D вращению.
Ниже приведены свойства для кнопки 12, это имеет 3D вращение, нанесенное на 2 поверхностями кнопки. Вращение применяется с «преобразованием: Rotatex (-90Deg);» параметр:
.btn-12 span:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; } .btn-12:hover span:nth-child(1) { box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } .btn-12:hover span:nth-child(2) { box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); color: transparent; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); }
Нужен навыки
HTML CSS – Среднее понимание CSS и специально переход и анимация ключевых кадров. Также как применить несколько теней и линейных градиентов. Ресурсы https://developer.mozilla.org/en-us/docs/web/css/animation https://www.youtube.com/watch?v=cH0TC9gWiAg
5 невозможным флажок V2
jhey Это анимация SVG, созданная с использованием анимации временной шкалы GSAP. Это как маленькая игра с персонажем. Когда вы нажимаете на флажок, он перемещается на другую сторону, вы видите, что немного переключите его обратно. Когда вы продолжаете нажать на него медведь, постепенно раскрывает себя, то он злится. Попробуйте это! Фактический медведь – это набор рисунков SVG, состоящий из трех частей, как показано ниже:
Хитрость состоит в том, чтобы скрыть эти части за переключателем кнопки и анимируйте их отдельно с координацией. Вот где входит ГСАП. Вы можете использовать функцию временной шкалы в GSAP, чтобы построить анимацию различных активов, чтобы у вас был лучший контроль над вашей анимацией. Есть также некоторые правила, встроенные в анимацию, так что различные варианты анимации представлены в зависимости от количества раз, когда переключатель нажал. Эта демонстрация построена с использованием rest.js, а основная часть логики анимации внутри Useffect крючок, который начинается в строке 53. В строке 82 особенно важно, вот где объявляется временная шкала, которая выглядит как: const ({задержка: math.random (), oncomplete})
Нужен навыки
PUG – генерирует HTML Стилус – генерирует CSS SVG – хорошее понимание того, как создавать и манипулировать художественными произведениями SVG, особенно для анимации. JavaScript – ReactJS Framework, анимация GSAP с использованием временной шкалы Ресурсы GSAP – https://greensock.com/get-started/
Надеюсь, вам понравился этот отзыв и не забудьте прочитать мои другие сообщения …
Анимирующие списки в Vue 3: Создать список друзей UI
Keerthi · 18-20 · 3 мин прочитаны
Rectjs анимация: создать Форма входа/регистрации с анимацией React-Spring
Keerthi · 28 сентября 20 ’20 · 5 минут чтения
Базовая адаптивная гистограмма в ReactJS может быть легко закодирована.
Keerthi · 30 октября ’20 · 6 мин прочитаны
Оригинал: “https://dev.to/keefdrive/top-5-most-hearted-animations-and-designs-on-codepen-whats-under-the-hood-5b0l”