Jak korzystać z animacji najechania w projektowaniu stron internetowych
Kolor po najechaniu kursorem
Ustawienie koloru elementu po najechaniu kursorem pomaga skupić uwagę odwiedzających na elemencie i daje wrażenie i koncepcję pożądanego pomysłu na temat jego znaczenia. Możesz zmienić kolor elementu po najechaniu kursorem. W tym celu wybierz element i w panelu właściwości przejdź do sekcji Animacja włączona, kliknij łącze Aktywuj, a następnie pole wyboru Aktywuj. Zmodyfikuj kolor, który ma zostać zastosowany po najechaniu myszą.
Obramowanie po najechaniu
Ramka elementu jest również ważna, aby poprawić interakcję elementów i przyciągnąć uwagę odwiedzających. Możesz zmienić Hover Border dla takich elementów jak ikona, obraz, kształt, grupa, siatka itp. W sekcji Hover panelu właściwości zaznacz pole wyboru Hover. Zmodyfikuj obramowanie, które ma być wyświetlane podczas najeżdżania na element.
Promień przy najechaniu
W przypadku obrazów i kształtów, grup i komórek siatki możesz zmienić promień po najechaniu kursorem. Dzięki tej właściwości elementy stają się atrakcyjne, podpowiadając działanie (przyciski Kup teraz, Czytaj więcej itp.) i czyniąc projekt wyjątkowym. W sekcji Hover panelu właściwości włącz tryb Hover. Przeciągnij suwak Promień, aby ustawić jego wartość przy najechaniu.
Cień w powietrzu
Możesz zmodyfikować właściwość Shadow po najechaniu kursorem na teksty i inne elementy. Aby ustawić cień po najechaniu, dodaj lub wybierz element. Następnie kliknij łącze Hover Panelu właściwości, zaznacz pole Hover, zmodyfikuj cień, który ma być zastosowany po Hover. Możesz zacząć od jednego z ustawień wstępnych cieni i dostosować go w razie potrzeby.
Przejrzystość po najechaniu kursorem
Możesz zmodyfikować Przejrzystość elementu w Hover, aby dodać interakcji i atrakcyjności do projektu witryny. W Panelu właściwości kliknij łącze Aktywuj i zaznacz pole Aktywuj. Ustaw przezroczystość do zastosowania po najechaniu. Kliknij gdzieś w bloku, aby odznaczyć element. Najedź na element, aby przetestować zmianę przezroczystości.
Przesuń po najechaniu
Efekty animacji najechania używane na nowoczesnych stronach internetowych stały się bardziej wyrafinowane. Jednym z przykładów efektów jest Element Move on Hover. Możesz dodać ruch elementu po najechaniu kursorem. Dodaj lub wybierz element i przejdź do panelu właściwości. Kliknij łącze Hover, a następnie zaznacz pole wyboru Hover. Ustaw wartości właściwości Przesuń X, Y.
Obrót przy najechaniu
Kolejnym ważnym i złożonym efektem jest Rotation on Hover. Aby obrócić element po najechaniu kursorem, dodaj lub wybierz element i przejdź do panelu właściwości. Przejdź do i kliknij łącze Aktywuj w sekcji Animacja włączona, a następnie zaznacz pole wyboru Aktywuj. Użyj suwaka, aby ustawić kąt obrotu lub wprowadź wartość w polu wejściowym. Obsługiwane wartości kąta obrotu wynoszą od 0 do 359.
Skaluj po najechaniu
Skalowanie może wyglądać jak najbardziej naturalna reakcja na kursor. Dlatego może być bardzo popularny. Możesz łatwo dodać Scale On Hover do swojej witryny. W tym celu dodaj lub wybierz element, a następnie przejdź do panelu właściwości. Kliknij łącze Aktywuj w sekcji Animacja włączona i zaznacz pole Aktywuj. Przewiń w dół do właściwości Skaluj, Obróć i Przesuń. Rzeczywisty rozmiar to 100.
Czas trwania najechania
Możesz zarządzać animacją najechania, ustawiając jej czas trwania. Ustaw czas trwania animacji po najechaniu kursorem, dodaj lub wybierz element i przejdź do panelu właściwości. Wybierz łącze Aktywacja w sekcji Animacja włączona i zaznacz pole wyboru Aktywuj. Obsługiwane wartości dla suwaka to od 10 do 200 i w razie potrzeby możesz wpisać większą liczbę w tym polu.
Kolor tła do gradientu po najechaniu kursorem
Dodając animację najechania do kształtu z tłem, możesz zmienić pełne wypełnienie na coś atrakcyjnego, na przykład gradient. W tym celu wybierz kształt i przejdź do łącza aktywującego panelu właściwości. Kliknij łącze Animacja włączona -> najechanie kursorem i zaznacz pole wyboru najechanie kursorem. Wybierz typ gradientu dla tła i ustaw gradient.
Obraz tła do obrazu po najechaniu kursorem
Możesz także zmienić Wypełnienie na Obrazy, a nawet zmienić jeden obraz tła na inny podczas najechania kursorem, co może bardzo zabawić odwiedzających. Wybierz kształt i dodaj obraz tła. Przejdź do sekcji Animacja włączona w panelu właściwości i kliknij na wskaźniku myszy. Włącz efekt Hover i wybierz Obraz jako Typ tła. Wybierz obraz po najechaniu. Test.