Веб локација ДаиТрип користи уредан ефекат на заглавље странице који искривљује позадинску слику анимираном, зрнастом текстуром. Ефекат је суптилан, али ствара прашњаву, ретро атмосферу.
Ефекат је врло суптилан. Можете видети разлику у томе где је ефекат на десној, а онемогућен на левој страни:
Можемо створити исти рустикални ефекат са једном сликом и мало ЦСС-а.
Корак 1: Подешавање ствари
Прво, подесимо заглавље наше странице. Користићемо уобичајени образац где слика у позадини заузима читав простор.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Ево примера за почетак:
Погледајте оловку РпЛКдк Геофф Грахам (@геоффграхам) на ЦодеПен.
Корак 2: Избор текстуре
Даље, потребна нам је слика зрнасте текстуре. Ово можете сами креирати. Суптилни узорци такође имају бројне лепе опције, укључујући и ову коју ћемо користити за нашу демонстрацију. Имајте на уму да слика не треба да буде огромна. Нешто у суседству 400pxквадрата ће учинити трик.
Идеја је да на површину ставимо зрнасту текстуру .page-header. Можемо да користимо :afterпсеудо-елемент .page-headerтако да нема потребе да креирамо други елемент.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Имајте на уму да смо поставили а heightи widthна псеудо-елемент као и а topи leftтако да он стварно прелази границу заглавља странице и центрира на њега. То желимо да урадимо тако да се зрнасти слој текстуре има простора за кретање без излагања слоја заглавља странице испод. То значи да су слојеви распоређени више овако:
Сада имамо лепо заглавље велике странице са зрнастом сликом на врху:
Погледајте Пен евГвКг од Геофф Грахам (@геоффграхам) на ЦодеПен.
Корак 3: Анимирање зрнастог слоја
Последње што треба да урадимо је да анимирамо зрнасти слој. Ово је ефекат за којим идемо и заглављу странице даје ону ретро, аналогну привлачност.
Веб локација ДаиТрип користи следеће за дефинисање кључних фраза за анимацију:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Тешко је приказати шта тај код значи, али у основи помера горњи зрнасти слој цик-цак. Ево илустрације како то изгледа у мањем обиму:
Сада све што треба да урадимо је да применимо кључне оквире да .page-header:afterбисмо видели како он ступа на снагу. Анимацију ћемо подесити на репродукцију 8 секунди и бесконачно се петљати:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Све састављање
Ево целог исечка са свим деловима на месту. Имајте на уму да претпостављамо употребу Аутопрефикер-а за све префиксе добављача.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Погледајте анимирани зрнати ефекат оловке Геофф Грахам (@геоффграхам) на ЦодеПен.