Как да създам ефекти на текст и изображения на бъг в CSS

В този урок ще ви покажем как да създадете ефект на бъг текст. Специалните ефекти и анимации могат да помогнат на уебсайтовете да се откроят, създавайки незабавно въздействие върху потребителя, преди той да е имал възможност да прочете основното съдържание. Ако вашата начална страница трябва да очарова посетителите, можете да създадете много различни ефекти, като използвате само CSS.

Нашият процес за създаване на бъг текст тук всъщност е доста подобен на работата със софтуер за анимация. Ще поставим ключови кадри в определени точки и ще ги използваме, за да контролираме действието. Разликата с ключовите кадри в CSS е, че те се записват като проценти за времевата линия на анимацията в кода. Това не е толкова страшно, колкото звучи - след като опитате, е сравнително лесно да постигнете добри резултати.



В урока ще се използва малко количество JavaScript - за премахване на екрана за зареждане, след като изображенията се заредят на страницата - но основният фокус тук е върху CSS анимация . Ние също ще използваме CSS мрежа за позициониране на елементи на екрана.



01. Настройте се

За да започнете, отворете старт папка от файлове с проекти във вашия редактор на код. Отвори index.html страница, която съдържа само HTML страница на скелет без скелет. В главната секция шрифтовете трябва да се свържат, така че дизайнът да се показва правилно. Добавете връзката към стила за шрифтовете.

Основното оформление в CSS е стартирано в site.css файл, но всички важни части, свързани с ефекта на бъг, ще бъдат добавени по-късно. В главната секция на документа свържете CSS, така че основният дизайн на страницата да е на място.



03. Настройте екран за зареждане

Черен начален екран с икона на марка

Този екран ще се покаже, докато страницата се зареди

Сега преминете към основния раздел на страницата. Това съдържа всички видими елементи на страницата, които се показват в браузъра. Тук добавете div, който ще задържи 'екрана за предварително зареждане', докато всичко на страницата се зареди. Това ще покаже лого в центъра на страницата.

как да се справим добре с дигиталното изкуство

04. Добавете лента със заглавки

Черен начален екран с изведено заглавие и кратко описание



Основните елементи на дизайна, преди да се добави ефектът на бъг текст

В горната част на екрана ще има малка заглавка, съдържаща SVG лого за сайта вляво с текстово заглавие. След това от дясната страна на екрана ще бъде поставено вградено меню за лесна навигация. Структурата на кода тук добавя тези елементи към страницата.

HackerCon

  • Home
  • News
  • Contact
  • About

05. Добавете изображения

Сега раздела, който следва, съдържа няколко версии на едно и също изображение в бъг клас. Това ще направи различни части от тези изображения да се включват и изключват по различно време, за да се получи ефект на бъг. След това е текстът, който ще се намира в горната част на изображенията.

HackerCon

Add a description



06. Задействайте ефекта на бъг текст

В края на основното съдържание се поставят JavaScript таговете. Всичко това е да провери дали страницата се е заредила и след това да премахне екрана за зареждане, което от своя страна задейства анимацията на ефекта на бъг, за да започне, като добави клас към тялото, за да повлияе на съответните секции за бъг.



var loader = document.getElementById('loader'); window.addEventListener('load', function(event) { loader.classList. remove('loading'); loader.classList.add('loaded'); document.body.classList. add('imgloaded'); });

07. Настройте CSS променливи

Запазете страницата сега и преминете към site.css файл в папката CSS. Тук вече има код, но точно над всеки друг код добавете променливите, показани по-долу. Тези CSS променливи съдържат цветове и размери, които ще бъдат използвани по-късно в дизайна.

body { --color-text: #fff; --color-bg: #000; --color-link: #555; --color-link-hover: #98fadf; --color-info: #f7cfb9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s;

08. Експериментирайте с променливи настройки

Както ще видите, тези променливи са присвоени на маркера на тялото, така че те могат да бъдат използвани от всеки етикет на страницата вътре в тялото, което по същество е цялата видима страница. Тук са настроени режимите на прозрачност и смесване за различните изображения. Има пет изображения и можете да експериментирате с тези настройки, за да получите различни резултати.



--blend-mode-1: none; --blend-mode-2: overlay; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: #7d948e; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }

09. Напълнете екрана с изображения

За да поддържате кода спретнато заедно, превъртете надолу до коментара, който отбелязва стъпки от 9 до 13 в CSS файла, добавяйки в този код. Тук кодът за бъг позиционира div съдържащ всички изображения, за да запълни целия екран и да бъде позициониран абсолютно в горния ляв ъгъл на екрана. Обърнете внимание, че той получава своята ширина и височина от CSS променливите.

.glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden; }

10. Регулирайте позиционирането на изображението

Добавена е начална страница с цял екран снимка

най-добрите художници на манга на всички времена
Ефектът на бъг използва преместени копия на едно и също изображение

Тъй като ефектът на бъг се състои от копия на едно и също изображение, този код позиционира всеки div на страницата и я прави малко по-голяма от екрана. Той го позиционира отгоре и отляво, за да отчете, че е по-голям, а изображението след това се поставя на заден фон, за да запълни изображението.



.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend- mode-1); }

11. Изберете изображения

Кодът тук избира всяко изображение с изключение на първото изображение. Това е така, защото първото изображение остава на страницата, докато останалите се включват и изключват отгоре с анимацията на ключовия кадър. Тези горни изображения се скриват, докато не са необходими, с непрозрачност, зададена на нула.

.glitchit:nth-child(n+2) { opacity: 0; } .imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

12. Настройте изображения две и три

Второто и третото изображение са настроени да анимират в този код. Те получават съответните режими на смесване и цвят, така че да се показват по различен начин. Най-голямата разлика тук е, че им се дават различни анимации на ключови кадри, които да следват за смесване.

up the effects. .imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend- mode-2); animation-name: glitch-1; } .imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend- mode-3); animation-name: glitch-2; }

13. Регулирайте изображения четири и пет

Този път следващите две изображения са настроени доста близо до останалите, но този път отново има различни режими на смесване и анимации, за да се покажат тези изображения. Ключовите кадри все още не са създадени за някои от тези анимации и това ще дойде след това.

.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend- mode-4); animation-name: glitch-3; } .imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend- mode-5); animation-name: glitch-flash; }

14. Добавете първия набор ключови кадри

Ключовите кадри работят, като хващат различни секции от изображението и го изрязват надолу, така че само това да бъде видимо. Непрозрачността се включва и изключва по различно време, така че части от изображението да се виждат по различно време за останалите анимации и по този начин създава ефект на грешка. Изображението се премества леко по оста x.

@keyframes glitch-1 { 0% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }

15. Използвайте клип-пътя

Пътят на клипа заема правоъгълник, така че първите две числа са горе вляво, след това горе вдясно. Следва долния десен и долния ляв ъгъл. Чрез преместването на тези числа различните части на изображението стават видими в различни точки.

4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 1 00% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

16. Ускорете движението

Чрез преместването на пътя на клипа толкова бързо върху редица ключови кадри, ефектът се натрупва и изглежда, че различни части на изображението мигат необичайно. Добавете, че повече слоеве изображения също правят това и ефектът работи много добре в това, което прави.

12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }

17. Завършете грешките в изображението

След 22% изображението се изключва, докато анимацията не се възпроизведе отново. Това завършва бъг-1 ефект с бъг-2 и бъг-3 вече са предоставени в кода. Следващият раздел също ще повреди текста, който е в горната част на изображението.

21.9% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

18. Как да създам бъг текст

Текстът е изрязан, за да се покаже ефектът на бъг в ход на началната страница

Текстът се изрязва само за кратко, за да се гарантира, че все още е четлив

Този код работи изключително подобно на предишния код, с изключение на това, че той обръща текста с главата надолу и след това го изрязва, за да даде скачащ ефект, който се премества драстично. След това пътят на клипа разкрива само по-малки секции, с бързото движение през ключовите кадри.

@keyframes glitch-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

19. Повече изрязване

Ефектът продължава в този раздел на кода чрез бърза промяна на формата на отсечения път. The clip-path също идва с -уебкит- префикс, но за краткост това не е показано в нито един от кодовете тук. По време на писането, Clip Path понастоящем не се поддържа в IE, Edge или Opera Mini, но е във всички други браузъри.

5% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }

20. Обърнете текста назад

В крайната анимация на текстовия бъг текстът се връща обратно в първоначалното си положение и изчаква ключовите кадри да се появят отново. Както можете да видите, цялата анимация се осъществява за 10 процента, докато остава неактивна в продължение на 90 процента от времето, като дава на текста нужното количество бедствие и позволява да се чете.

9% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

21. Създайте бърза светкавица

Начална страница с грешен ефект в ход

sd карти клас 10 най-добра покупка
Ефектът на бъг се изпълнява на всеки няколко секунди, за да придаде неспокоен вид

Последната стъпка е, че на едно изображение се дава анимация с бъг-флаш и тази поредица ключови кадри просто поставя изображението на екрана с 20% непрозрачност за кратък период, само за да компенсира оригинала. Запазете CSS файла сега и ефектът трябва да започне да се възпроизвежда, след като съдържанието се зареди в браузъра.

@keyframes glitch-flash { 0%, 5% { opacity: 0.2; transform: translate3d(var(--gap- horizontal), var(--gap-vertical), 0); } 5.5%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } }

Тази статия първоначално е публикувана в списание за уеб дизайн за уеб дизайн. Купете брой 281 или Абонирай се .

Прочетете още: