Twórz piękne przejścia gradientowe za pomocą Granim.js
Projektowanie stron internetowych jest pełne piękna i przyjemnego wyglądu interfejsu. Niektóre funkcje są funkcjonalne, podczas gdy inne są tylko na pokaz. Przejścia gradientowe są wyłącznie na pokaz ale pakują całkiem sporo!
Z Granim.js, możesz zbudować niestandardowe przejścia gradientu w pełnym kolorze które wyglądają gładko i ładnie łączą się z każdą stroną internetową.
Możesz znaleźć kilka niestandardowych przykładów na stronie głównej przykładów z wieloma różnymi stylami, od prostych przejść do bardziej złożonych animacji przy użyciu obrazów tła.
Granim jest jedyną biblioteką JS, jaką znam zwalczanie przejść gradientowych. To pytanie zawsze zastanawiałem się i nigdy tak naprawdę nie znalazłem wspaniałej odpowiedzi. Granim to idealne rozwiązanie zbudowany na waniliowym JavaScript, więc może działać razem z jQuery lub inną biblioteką JS.
Właśnie upuścić granim.js plik na swojej stronie zaczynać. Możesz pobrać kopię z GitHub lub hosta z Live CDN.
Oto podstawowa próbka kodu z repozytorium GitHub:
Sprawy mogą się stać o wiele bardziej skomplikowane, więc naprawdę powinieneś zagłęb się w przykłady uczyć się więcej. Znajdziesz urywki kodu pod każdym przykładem więc możesz tworzyć przejścia gradientowe dla tła obrazu, a nawet maski obrazu.
Maski obrazu mogą być używane jako logo, na przykład obraz PNG, który zostaje ukryty za gradientem. Pozwala to tworzyć animowane logo JS gdzie gradient powoli przechodzi przez cały tekst.
Uwaga: ten przykład zajmuje dużo kodu JS / CSS więc nie jest to prosta implementacja.
Ale im więcej ćwiczysz z Granimem, tym łatwiej będzie go skonfigurować i dostosować. Jest to jedyna prawdziwie gradientowa biblioteka online, która jest absolutnie najlepszym rozwiązaniem dla każdego projektu.
Biblioteka jest wciąż na bieżąco aktualizowana, więc możesz sprawdzić kartę problemów, aby uzyskać więcej informacji.
Jego ładna mała biblioteka więc nie ma zbyt wielu rzeczy, które mogłyby pójść źle lub wymagają aktualizacji. To sprawia, że Granim.js jest niezawodnym rozwiązaniem dla każdej małej lub dużej witryny.
Do pobierz kopię odwiedź stronę z wydaniami na GitHub lub pobierz kopię .js plik bezpośrednio z cdnjs. I do wyświetl źródło na przykładzie na żywo rzuć okiem na demo CodePen autorstwa Jonathana Schneidera.
