w nowoczesnych tłach do projektowania stron internetowych są duże (dosłownie i w przenośni). Wraz z pojawieniem się wyświetlaczy HD (A teraz 4K) projektanci tworzą tła, które zajmują mnóstwo nieruchomości ekranowych. Dlaczego? Ponieważ mają niesamowity efekt wizualny i pomagają opowiedzieć historię.

ale tła to o wiele więcej niż zwykłe rzucanie zdjęcia lub tekstury w dużą przestrzeń. Połączenie CSS i od czasu do czasu trochę JavaScript moc tworzenia niesamowite efekty specjalne.

przyjrzyjmy się niektórym unikalnym sposobom, w jakie projektanci dodają tła. Do każdej techniki dołączymy również pióro, abyś mógł dokładnie zobaczyć, jak działają.

CSS Blend Mode Zmiana Koloru

co sprawia, że ten efekt tła jest tak fajny, że stały element na górze wydaje się zmieniać kolor podczas przewijania użytkownika. Zastosowanie właściwości CSS mix-blend-mode pozwala na zmianę barwy, która zależy od zawartości tła.

Animacja przewijania

technika ta przypomina gry wideo z przewijaniem bocznym z przeszłości i zawiera dwa różne obrazy-każdy przewijany w przeciwnym kierunku. Odbywa się to za pomocą CSS transform I niektórych JS.

Skewed

Skewed tła są jednym z najgorętszych trendów w projektowaniu stron internetowych. To efekt, który był niezwykle łatwy do wdrożenia w projektowaniu druku i ból do zrobienia w Internecie-do tej pory. To czyste rozwiązanie HTML / CSS sprawia, że jest to pestka.

ruchome obrazy

wykorzystując dość prosty kawałek CSS, to tło pozwala na płynne przejście między wieloma obrazami. To sprawia, że o wiele lżejszy suwak niż tradycyjny JavaScript.

animowany Gradient

Jeśli nie zostanie wykonany ostrożnie, animowane tło może odwrócić uwagę od każdej treści znajdującej się na nim. Ten animowany przykład gradientu jest ładny, ponieważ jest to bardziej subtelny efekt. Używając JavaScript, możesz zdefiniować kolory gradientu, aby pasowały do Twojej palety.

rozmycie na przewijaniu

ta technika może być bardzo przydatna w czasach, gdy naprawdę chcesz, aby odwiedzający skupili się na obrazie tła (takim jak nagłówek artykułu prasowego), a następnie pozwolili na łatwe czytanie tekstu na górze. Trochę jQuery zmienia właściwośćbackground-size podczas przewijania, aby stworzyć efekt.

Fade-in Hero Image with Overlay

w tym przykładzie dzieje się kilka rzeczy. Po pierwsze, Pełnowymiarowy obraz bohatera ma na wierzchu nakładkę kolorów, aby uzyskać inny odcień. Następnie zaimplementowana jest animacja zanikania, która wprowadza obraz w płynny wizualnie sposób. Na koniec do miksu dodano efekt przewijania w stylu paralaksy. Rezultatem jest bardzo nowoczesny wygląd, który wykorzystuje stosunkowo mało kodu (i nie ma JS).

powiększanie tła i przesuwanie

oto efekt, który ostatnio obserwujemy. Gdy użytkownik najedzie na panel, obraz tła powiększa się i przesuwa wraz z ruchami kursora. Jest to łatwy sposób na dodanie interaktywności i utrzymanie zainteresowania użytkowników.

Pokaż po najechaniu kursorem

Ten przykład pokazuje podzielony ekran, na którym tło jest wyświetlane na podstawie położenia myszy użytkownika. Świetne do porównań, takich jak ujęcia „przed” i „po”.

Zmiana Koloru na przewijaniu

czasami zapominamy, jak potężne może być użycie prostych jednolitych kolorów. Tutaj widzimy wpływ, jaki może on mieć, gdy kolory tła zmieniają się w zależności od pozycji przewijania. To lekkie rozwiązanie może być tak samo efektywne wizualnie jak ciężkie obrazy.

tła na czele

tła nie są już tylko środkiem do kadrowania treści – są teraz często częścią samej treści. Przy tak wielu ciekawych sposobach ich wykorzystania, warto eksperymentować z różnymi technikami tła i zobaczyć, jak mogą poprawić wrażenia użytkownika w następnym projekcie.