Jak zmienić obraz tła na inny obraz po najechaniu kursorem?

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.

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.

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.

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.

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.

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.

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ą.

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.

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.

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.