Jak dynamicznie zmieniać kolor podczas przewijania za pomocą CSS

W przypadku stacjonarnych elementów witryny, takich jak logo, podczas przewijania strony często napotkasz pomieszanie kolorów. Może się tak zdarzyć, jeśli element statyczny przejdzie przez sekcję witryny, która ma ten sam kolor co element. Element statyczny będzie niewidoczny, gdy będzie spoczywał na tym tle.

Aby rozwiązać ten problem, musisz dynamicznie odwracać kolor logo, gdy przechodzi ono nad elementem o tym samym kolorze. Dowiedz się, jak osiągnąć ten efekt, używając tylko CSS, bez konieczności używania JavaScript!

Pobierz kod startowy

Aby postępować zgodnie z tym samouczkiem, pobierz kod startowy z jego Repozytorium GitHub na lokalną maszynę.

otwarty indeks.html w przeglądarce, która powinna wyglądać jak strona pokazana tutaj:

Strona HTML zawiera logo i cztery sekcje. Każda sekcja ma fałszywy tytuł i trzy akapity fałszywego tekstu. Tekst logo ma ten sam czarny kolor, co tło drugiej i czwartej sekcji. Efekt ten pochodzi z

n-te dziecko (parzyste) zablokuj się style.css, który stosuje czarne tło do parzystych sekcji.

Przyklejanie logo

Dzięki temu kodowi startowemu logo nie przykleja się do góry. Oznacza to, że logo znika po przewinięciu strony w dół. Możesz zamienić swoje logo w lepki nagłówek, stosując pozycja: lepka właściwość do niego w pliku CSS. Aby uzyskać szczegółowe informacje na temat pozycjonowania w CSS, przeczytaj nasz post na stronie Właściwość pozycji CSS.

Upewnij się, że logo przylega do góry, ale rób to tylko na większych ekranach (ponieważ przy mniejszych rozmiarach ekranu może nachodzić na inne elementy). Następujące Zapytanie o media responsywne HTML tworzy ten efekt:

@głoska bezdźwięczna(szerokość > 980 pikseli) {
.logo { 
pozycja: lepki; 
szczyt: .5 rem; 
 }
}

Teraz logo będzie zawsze przyklejać się do góry i podążać za Tobą podczas przewijania. Ale zauważysz również, że tekst znika, gdy przewiniesz do sekcji z ciemnym tłem (ponieważ tekst logo jest również czarny). A teraz zobacz, jak temu zaradzić.

Dodanie trybu mix-blend do Your Sticky Header

Aby mieć pewność, że czarne logo nie zniknie na czarnym tle, musisz dynamicznie odwrócić kolor. Sposób, w jaki można to zrobić, polega na użyciu metody tryb mieszania mieszanego właściwość CSS i przypisanie jej wartości różnica:

@głoska bezdźwięczna(szerokość > 980 pikseli) { 
.logo { 
pozycja: lepki; 
szczyt: .5 rem; 
tryb mieszania mieszanego: różnica
 }
}

Właściwość CSS mix-blend-mode określa, w jaki sposób zawartość elementu powinna łączyć się z zawartością elementu nadrzędnego i jego tłem. Inna wartość przyjmuje wartość różnicy każdego piksela, odwracając jasne kolory. Więc jeśli wartości kolorów są takie same, stają się czarne. Różnice w wartościach zostaną odwrócone.

Powyższy dodatek CSS sprawi, że logo zniknie całkowicie. Dzieje się tak dlatego, że poza zapytaniem o media nie ustawiłeś koloru tekstu logo na biały. Zrób to za pomocą następującego kodu:

.logo { 
kolor: biały; 
/* Inne właściwości CSS */
}

Teraz pomyślnie skonfigurowałeś wszystko. Przewiń stronę w dół i do czarnego tła. Zobaczysz, jak logo zmienia się z czarnego na białe.

Możesz także pracować z innymi kolorami oprócz czerni i bieli. Na przykład, jeśli zmienisz kolor tekstu logo na turkusowy (#008080), uzyskasz kolor różowy na białym tle. Ilustruje to poniższy obraz.

W większości przypadków chcesz, aby Twój element był biały, aby uzyskać najlepsze wyniki. Ponadto, jeśli przewiniesz do góry, możesz znaleźć swoje logo przecięte na pół. Dzieje się tak, ponieważ logo istnieje poza element. Aby pokazać logo w całości, należy ustawić kolor tła elementu na biały.

Używanie obrazu jako logo zamiast tekstu

Ta technika działa nie tylko z tekstem, ale także z obrazami. Oczywiście musisz upewnić się, że używasz białego obrazu jako logo. W poniższym przykładzie zastosowano białe logo lorem ipsum, które znajduje się w tym samym folderze co plik indeks.html plik:

<imgźródło=„loremipsum-297.svg”alt=„Logo Lorem Ipsum”>

Obraz użyty tutaj to SVG (Scalable Vector Graphic), rodzaj plik wektorowy.

Teraz kolor obrazu logo będzie czarny na białym tle, jak pokazano na poniższym obrazku.

Ale jeśli przewiniesz do czarnego tła, kolor logo automatycznie zmieni się na biały. Możesz to zobaczyć na poniższym obrazku.

Możesz także zwiększyć rozmiar logo, zastępując je rozmiar czcionki z wysokość I szerokość w bloku CSS ukierunkowanym na logo. W końcu masz teraz do czynienia z obrazem, a nie tekstem.

.logo {
kolor: biały;
szerokość: 10Rem;
/* Inne właściwości CSS */
}

Jeśli zmniejszysz ekran, zapytanie o media nie będzie już obowiązywać. Spowoduje to wyłączenie różnych trybów mieszania, dzięki czemu Twoje logo zniknie. Aby przywrócić logo na stronę, musisz ustawić tryb mieszania mieszanego właściwośćna logo poza zapytaniem o media:

.logo {
kolor: biały;
szerokość: 10Rem;
tryb mieszania mieszanego: różnica;
/* Inne właściwości CSS */
}

Spowoduje to aktywację mieszania miksów na logo przez cały czas, nawet na większych ekranach. Ale na małych ekranach logo pozostanie na górze i nie będzie podążać za tobą podczas przewijania w dół (ponieważ pozycja: lepka działa tylko na dużych ekranach). Na koniec zawsze pamiętaj o użyciu białego logo, aby nie zniknęło ono ze strony.

Dowiedz się więcej porad i wskazówek dotyczących CSS

Korzystając z trybu mix-blend, możesz tworzyć fascynujące układy z naprzemiennymi kolorami. Co więcej, nie musisz na stałe kodować żadnego koloru ani ustawiać punktów przerwania, ponieważ tryb mieszania mieszania dynamicznie odwraca kolor. Pozwala tworzyć ładne przejścia i kolory dla części zawartości elementu w zależności od jego bezpośredniego tła.

CSS jest często uważany za jeden z najbardziej ekscytujących języków do nauki. Dzieje się tak częściowo dlatego, że CSS jest pełen porad i sztuczek, takich jak ta, której właśnie nauczyłeś się w tym artykule. Niektóre inne przydatne porady i sztuczki CSS to efekty najechania kursorem, zmiana rozmiaru obrazów w celu dopasowania do kontenerów, obcinanie tekstu za pomocą elips i korzystanie z przekształcania tekstu.