Разработка сайтов в Родинском, ДНР. Создавайте мощные эффекты анимации CSS без JavaScript

 
 

В этой статье мы исследуем мир анимации в Интернете, используя только CSS. Сначала мы создадим простую анимацию, используя комбинацию SVG и CSS. Затем мы создадим еще пару анимаций, используя только HTML и CSS. Мы также обсудим, когда нам нужно вызывать JavaScript в действие, и ограничения CSS.

К концу этой статьи вы сможете использовать CSS для создания анимации вместо использования JavaScript. Вы также сможете определить, когда вам нужно использовать JavaScript для создания анимации.

Чтобы получить максимальную отдачу от этой статьи, предполагается, что у вас есть хотя бы базовые знания CSS и HTML. Если вы только начинаете заниматься веб-разработкой, есть отличные ресурсы для обучения и получения помощи, такие как учебные ресурсы на sitePoint, очень полезные форумы SitePoint, а также freecodecamp.

Анимация с эффектом рисования

Это впечатляющая анимация, которую обманчиво легко создать. Ниже скриншот того, к чему мы стремимся.

финальная анимация

Сначала нам нужно создать SVG для нашего логотипа:

stroke-width="1">

 

Вот ручка с этой настройкой SVG. Не стесняйтесь разветвлять его, чтобы вы могли выполнить следующие шаги.

Теперь, когда наш SVG на месте, мы устанавливаем fill-opacityзначение 0. Мы анимируем это позже:

svg {

fill-opacity: 0;

}

(Обновленная ручка)

Теперь мы можем сосредоточиться на рисовании SVG. Мы добьемся этого, используя CSS stroke-dashoffsetиstroke-dasharrayсвойства.

Свойство stroke-dasharrayуправляет шаблоном пробелов и штрихов, используемых для создания контура. Например, stroke-dasharray: 10применительно к путям в SVG создается пунктирный эффект с длиной штриха и промежутка в десять пикселей:

Теперь для анимации, которую мы здесь создаем, мы хотим, чтобы пробел и тире были той же длины, что и наш файл path. То есть вся длина нашего контура логотипа будет считаться, так сказать, «одним тире», и один пробел тоже будет на всю длину контура. Идея состоит в том, что мы начнем с контура логотипа в виде промежутка, а затем анимируем контур в виде тире.

Но какой длины контур логотипа? Простой способ справиться с этим — установить длину. Давайте отредактируем наш код SVG, добавив pathLength="1"к каждому пути:

...

...

(Обновленная ручка)

Это значительно упрощает анимацию рисования. Теперь, когда мы установили pathLength, мы также можем установить stroke-dasharrayto 1в CSS:

svg path {

stroke-dasharray: 1;

}

(Обновленная ручка)

Сейчас вроде бы ничего не изменилось, ну да ладно. Весь путь для каждой части логотипа теперь представляет собой одну большую черточку. (Вы можете поэкспериментировать, удалив pathLength="1"один из контуров. Он внезапно станет пунктирной линией шириной 1 пиксель и промежутками.)

Теперь мы можем использовать stroke-dashoffset, который указывает, как далеко в шаблоне тире мы должны начать тире. В нашем случае мы хотим установить stroke-dashoffset, 1поэтому мы начинаем с a gap, а не с dash. Поскольку длина каждого из наших промежутков равна всей длине нашего path, теперь мы увидим пустой экран:

svg path {

stroke-dasharray: 1;

stroke-dashoffset: 1;

}

Теперь мы можем анимировать stroke-dashoffsetобратно к 0, что даст эффект рисования:

svg path {

stroke-dasharray: 1;

stroke-dashoffset: 1;

animation: draw 2s forwards;

}

@keyframes draw {

from {

stroke-dashoffset: 1;

}

to {

stroke-dashoffset: 0;

}

}

Прохладно! С этим у нас теперь есть это:

Чтобы завершить нашу анимацию, нам просто нужно анимировать в нашем fill-opacity:

svg {

width: 40%;

fill-opacity: 0;

// we set a delay of 2s so it won’t start until our drawing is finished

animation: fadeOpacity 2s forwards 2s;

}

@keyframes fadeOpacity {

from {

fill-opacity: 0;

}

to {

fill-opacity: 1;

}

}

Теперь у нас есть финальная анимация:

Бьюсь об заклад, это было намного проще, чем вы думали! Я знаю, что атрибуты stroke-dashoffsetиstroke-dasharrayмогут немного сбивать с толку, но когда вы устанавливаете pathдля них длину 1, с ними намного проще работать.

Это быстрый пример мощи CSS в сочетании с SVG. Теперь давайте продвинем это дальше в нашем следующем примере.

CSS анимация свечи

Таким образом, в последнем примере мы немного схитрили, поскольку использовали SVG. В следующем примере мы будем использовать только CSS (и, конечно же, HTML).

С этой анимацией мы будем использовать базовый рисунок CSS. Затем мы создадим триггерное событие с помощью CSS. Наконец, мы будем эмулировать пламя (насколько это возможно!).

Возбужденный? Испуганный? Я оба! Итак, начнем!

Я многое узнал о рисовании с помощью CSS благодаря потрясающему Джею Томпкинсу. Я рекомендую проверить эту замечательную статью для дополнительного чтения.

Примечание: ниже вы увидите, что я использую абсолютное позиционирование и преобразование для позиционирования своих HTML-элементов, что является хорошим приемом при рисовании с помощью CSS.

Ниже показано, что мы хотим нарисовать с помощью CSS:

свеча, которую мы нарисуем

Вы можете следовать вместе со мной, если хотите. Я настроил базовую ручку, на которой настроен корень всего.

Итак, давайте сначала нарисуем основание нашей свечи (поверхность стола).

Мы будем использовать некоторые переменные SCSS для цвета и ширины нашей таблицы:

// table dimensions

$tableWidth: 280px;

$tableHeight: 10px;

$tableBackground: #8b4513;

Таблица в основном divс некоторыми размерами.

Мы можем обновить наш HTML, чтобы он выглядел следующим образом:

 

 

 

 

 

 

 

Теперь добавим немного базового SCSS (мы используем transformего для центрирования нашей таблицы):

.table {

position: absolute;

left: 50%;

top: 50%;

width: $tableWidth;

height: $tableHeight;

background: $tableBackground;

transform: translate (-50%, -50%) ;

z-index: 2;

}

Это будет выглядеть немного безжизненно. Хитрость рисунков CSS заключается в использовании box-shadow, поэтому давайте добавим это в:

.table {

...

box-shadow: 0px 2px 5px #111;

}

Теперь у вас должно быть это:

Потрясающий!

Давайте сейчас поставим свечу на тот стол. Мы настроим несколько переменных SCSS для размеров и цвета нашей свечи (не стесняйтесь использовать любые размеры, которые вам нравятся):

// candle

$candleWidth: 35px;

$candleHeight: 130px;

$candleBorderColor: #673c63;

$stickWidth: 3px;

$stickHeight: 15px;

Если вы посмотрите на изображение свечи, которое я показал ранее, вы увидите, что это, по сути, divбольшая свеча borderс палкой наверху. Давайте сначала нарисуем саму свечу.

Сначала мы обновляем наш HTML:

 

 

 

 

 

 

 

 

 

 

 

Теперь добавим наш CSS (опять же, box-shadowв этом вся хитрость):

.candle {

position: absolute;

left: 50%;

top: 50%;

width: $candleWidth;

height: $candleHeight;

background: #fff;

transform-origin: center right;

transform: translate (-50%, -100%) ;

box-shadow: -2px 0px 0px #95c6f2 inset;

border: 3px solid $candleBorderColor;

}

Прохладно! У нас есть свеча!

Теперь добавим нашу палку сверху (мы уже указали размеры для этого выше).

Сначала нам нужно добавить его в наш HTML:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS (здесь ничего особенного):

.candle-stick {

width: $stickWidth;

height: $stickHeight;

background: #673c63;

position: absolute;

left: 50%;

top: 0%;

background: $candleBorderColor;

border-radius: 8px;

transform: translate (-50%, -100%) ;

}

Мы успешно нарисовали нашу свечу:

Как видите, анимации здесь нет, так что давайте начнем с анимации.

Сначала мы добавим кнопку, которая изменит цвет фона со светлого на темный (мы уже настроили эти переменные SCSS — $lightBackgroundи $darkBackground). Добавьте это в самый верх HTML:

Это даст нам не очень привлекательный флажок и метку. Итак, давайте стилизуем это, чтобы оно выглядело немного лучше:

label {

background: #a5d6a7;

padding: 0.5rem 1rem;

border-radius: 0.5rem;

position: absolute;

font: 900 24px/1.4 -system-ui, sans-serif;

transform: translate (50%, 50%) ;

cursor: pointer;

}

Это придает метке немного стиля, но мы также хотим скрыть флажок из поля зрения. Теперь мы можем сделать это, добавив hiddenатрибут в HTML-код флажка. Однако это делает флажок недоступным для клавиатурных навигаторов, поэтому лучше просто убрать его из поля зрения. Во-первых, давайте добавим класс.visually-hiddenвHTML-код флажка:

Затем мы перемещаем флажок влево с помощью этого CSS:

.visually-hidden {

position: absolute;

left: -100vw;

}

Давайте также предоставим визуальную подсказку, когда флажок находится в фокусе:

input: checked + label {

outline: 1px dotted red;

}

(Если вам было интересно, почему я поместил inputперед labelв HTML, теперь вы знаете, почему. Это для того, чтобы мы могли использовать родственный селектор (+). Позже мы воспользуемся другим.)

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

Вот что мы имеем сейчас:

Давайте изменим фон страницы в зависимости от того, установлен флажок или нет. Мы можем сделать это без использования JavaScript, используя общий селектор родственных элементов ~:

#toggle: checked ~.wrapper {

background: $lightBackground;

}

Теперь мы также можем добавить переход, чтобы он был более плавным:

.wrapper {

background-color: $darkBackground;

height: 100vh;

width: 100vw;

transition: background-color 0.6s ease;

}

Теперь у нас есть это:

Прохладно!

Еще мы добавим пламя, когда фон яркий.

Как и раньше, мы настраиваем наши переменные SCSS:

// flame

$flameHeight: 20px;

$flameWidth: 16px;

$flameColor1: #e25822;

$flameColor2: #e2b822;

Давайте также обновим HTML, включив в него пламя:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Основу нашего пламени нужно использовать border-radiusс восемью значениями. При рисовании сложных фигур сайт Fancy Border Radius Generator отлично подходит для их создания border-radius.

Итак, вот наш CSS (border-radiusключевая часть):

.flame {

width: $flameWidth;

height: $flameHeight;

background: #673c63;

position: absolute;

left: 50%;

top: 0%;

background: $flameColor1;

transform: translate (-50%, -170%) ;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

Это дает нам следующее:

Теперь мы можем добавить небольшую анимацию, чтобы оно мерцало, как настоящее пламя. Мы изменим пламя между двумя цветами ($flameColor1и $flameColor2), а также немного изменим положение слева и справа. Во-первых, вот код ключевого кадра:

@keyframes fire-flicker {

from {

background: $flameColor1;

left: 47%;

}

to {

background: $flameColor2;

left: 53%;

}

}

Затем нам нужно добавить эту анимацию в flameкласс:

animation: fire-flicker 0.2s infinite linear;

Наше пламя теперь будет мерцать:

Не стесняйтесь попробовать улучшить это, так как это может быть лучше!

Хорошо, давайте сделаем дополнительную настройку. Мы выключим пламя, когда фон станет темным.

Мы будем использовать opacityдля достижения этого. В flameклассе добавьте непрозрачность. Мы также добавим к нему переход, чтобы он соответствовал background:

.flame {

...

opacity: 0;

transition: opacity 0.6s ease;

}

Затем мы можем использовать мощь SCSS и некоторую вложенность checkedсостояний:

#toggle: checked ~.wrapper {

background: $lightBackground;

.flame {

opacity: 1;

}

}

Теперь пламя появляется только на светлом фоне:

Наконец, текст «Trigger Candle» на этикетке немного пресный. Мы могли бы многое сделать с этим! Итак, давайте улучшим нашу метку, чтобы текст переключался между «Lumos» и «Nox» — конечно, вдохновленный Гарри Поттером!

Во- первых, мы можем изменить нашу метку, чтобы она не содержала текста (мы будем использовать contentего для добавления текста):

 

Теперь мы добавим немного CSS для переключения текста:

label: after {

content: «Lumos»;

}

#toggle: checked ~ label: after {

content: «Nox»;

}

А чтобы метка перестала прыгать, добавим следующие стили:

label {

...

min-width: 100px;

text-align: center;

}

И вот оно. Наша анимация свечи закончена — без следа JavaScript!

В качестве дополнительного бонуса, если вы не знакомы с SCSS и хотите поэкспериментировать с пользовательскими свойствами CSS (также известными как переменные), вот чисто CSS-версия нашего демонстрационного примера свечи. Это не сильно отличается! (Конечно, вы также можете просмотреть скомпилированный CSS на каждом из ручек выше, если хотите. Откройте «Настройки CSS» > «Препроцессор CSS «> «Нет «.)

Импульсная анимация

Это менее сложная анимация, но она показывает, что вы можете сделать, используя лишь немного CSS.

Для начала нам нужно сделать круг. Давайте сначала добавим немного HTML:

 

 

 

 

Теперь мы можем использовать немного CSS для создания нашего круга:

.pulse {

position: absolute;

left:50%;

top:50%;

transform: scale (1.5,1.5) translate (-50%, -50%) ;

height: 150px;

width: 150px;

background: #a83f39;

border-radius: 50%;

}

Это то, что мы имеем до сих пор:

Для создания пульсирующей анимации мы используем box-shadowсвойство. Если вы никогда раньше не пользовались box-shadow, у Mozilla есть отличная документация:

@keyframes pulse {

0% {

box-shadow: 0 0 0 0 rgba (168, 63, 57, 0.4) ;

}

70% {

box-shadow: 0 0 0 50px rgba (168, 63, 57, 0) ;

}

100% {

box-shadow: 0 0 0 150px rgba (168, 63, 57, 0) ;

}

}

Чтобы использовать эту анимацию, нам просто нужно добавить это в.pulse:

.pulse {

...

animation: pulse 2s infinite;

}

Теперь мы создали нашу анимацию пульса. Не слишком потрепанный, а?

Что вы не можете сделать с CSS?

Как бы я ни любил анимацию CSS, есть вещи, которые невозможно или очень сложно сделать.

Вы не можете искать через анимацию CSS или переходить к определенной части анимации. Таким образом, адаптировать вашу анимацию на основе положения щелчка пользователя было бы очень сложно. Чтобы добиться этого с помощью JavaScript, я бы рекомендовал использовать гениальную библиотеку GreenSock.

Анимировать по кривой очень сложно.

Анимации, включающие прокрутку, также сложны, хотя Крис Койер объясняет, как вы можете сделать это с помощью небольшого количества JavaScript.

Анимация высоты элемента по автоматически рассчитанной высоте.

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

Выше приведены некоторые из ключевых ограничений анимации CSS. Некоторые из них можно обойти с помощью SVG, но в целом вышеперечисленное гораздо проще выполнить с помощью JavaScript.

Вывод

Я надеюсь, что прочитав эту статью, вы получите новое понимание CSS-анимации. То, что я показал в этой статье, является лишь поверхностным. Ниже я перечислю несколько вдохновляющих ручек, которые вы можете проверить!

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая