Podczas pracy nad projektem (ogłosimy wkrótce!) nasz zespół projektowy chciał mieć ładne, zmieniające kolor tło. Teraz wiemy, że mogliśmy użyć statycznego gradientu lub po prostu zniknąć między sekcjami, ale pomyśleliśmy, że byłoby fajnie, gdyby tło zmieniało się, gdy użytkownik przewijał stronę w ustalony sposób. Zwykle, gdy spotykamy się z takim wyzwaniem, pierwszą rzeczą, którą robimy, jest sprawdzenie, czy ktoś inny już to zrobił i w mgnieniu oka znaleźliśmy ten jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. Świetnie, ale potrzebowaliśmy trochę więcej. Obecna wersja obsługuje tylko przejścia między dwoma kolorami, więc rozwidliliśmy kod i nieco go rozszerzyliśmy.
Instalacja
Jeśli chcesz użyć tej metody w swoim następnym projekcie, będziesz potrzebować jQuery, jquery.color-2.1.0.jsoraz bity HTML/CSS/JS zawarte w tym jsfiddle: https://jsfiddle.net/jguffey/mxkx9j2o/.
Uczynić go swoim własnym
Na skrzypcach używamy ` elementy ` do zaznaczenia granic treści, ale możesz użyć dowolnego elementu, zmieniając selektor w wierszu 8 i odpowiadający mu CSS i HTML. Tablica łańcuchów w wywołaniu `scrollColors` (wiersz 16) jest miejscem, w którym przechowujemy kolory, na które chcemy przejść. Pamiętaj, aby zmienić właściwość CSS background-color dla body (nasz cel zmiany koloru), aby pasowała do pierwszego elementu w tej tablicy, w przeciwnym razie nadal otrzymasz jasnoróżowy kolor po pierwszym załadowaniu strony.
Dzięki wtyczce jQuery Color dozwolone są wartości hex, rgb, a nawet rgba. Może to dać fajne efekty, gdy zostanie nałożone na obraz lub wideo. Kanał alfa w RGBA jest animowany, podobnie jak inne kanały kolorów, więc możesz mieć sprzedane krycie zmiany koloru za pomocą przewijania.
Enjoy!
Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? 😉
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!
Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.
