Zmiana koloru tła przy przewijaniu

 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.

Contents [show] [Pokazać]
 

zwój kolorów

Instalacja

Jeśli chcesz użyć tej metody w swoim następnym projekcie, będziesz potrzebować jQueryjquery.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!

 

O autorze
Autor: Super Użytkownik

Jeszcze jedna rzecz... 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.
 

 

Najlepiej oceniana wtyczka do buforowania

Przyspiesz swoją witrynę 

Krok po kroku - darmowy kurs e-mailowy, jak załadować stronę internetową less niż 1 sekunda  

 

kim jesteśmy?

CollectiveRay jest prowadzony przez Davida Attarda - pracującego w niszy projektowania stron internetowych i wokół niej od ponad 12 lat, dostarczamy praktycznych wskazówek dla osób, które pracują zi na stronach internetowych. Prowadzimy również DronesBuy.net - stronę internetową dla hobbystów dronów.

David Attard

 

 

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...