説明例
In this example we built a sentence containing 3 text elements that have different microinteractions. When a site visitor hovers over one of these 3 text elements, they will see an animation.
どのように構築したか
ページ要素
In our site we added the following page elements:
8 text elements to build the sentence (5 of which we will use to create our microinteractions).
2 images.
コード
In the $w.onReady() function we declare all the elements we want to animate. We then create the individual animation timelines for each of the 3 animations:
Shiver ‘microinteractions’: When the user hovers over the text element “microinteractions”, we create a shiver effect by quickly moving “microinteractions” in all directions and adding a slight rotation.
Slide ‘arrow’: When the user hovers over the text element “text”, we create a bump effect by sliding the arrow horizontally back and forth pushing the text element, “to” backwards, and the text element “text” forward. For extra effect, we use the easeInSine and easeOutSine easing parameters of the wix-animations API. Note that we configure this animation differently for mobile devices.
Show images: When the user hovers over the text element “images”, we create a fade effect by gradually showing 2 image elements. We do this by changing the opacity of the image elements and by using the easeOutQuad easing parameter of the wix-animations API.
The last step is to add onMouseIn() and onMouseOut() event handlers to the 3 text elements. When hovering over the 3 text elements, their animations will play. When hovering off the 3 text elements, their animations will either replay, pause, or reverse depending on the animation.
関連例
これは役に立ったか？
|
ご意見ありがとう！
太陽系アニメーション
Wix Animations APIを使って、シンプルな太陽系アニメーションを作成しましょう。
上級
ボール落としアニメーション
ボールが迷路の中を落ちていくボール落としアニメーションを作成し、言葉の中のIの文字を点描しましょう。
上級
カスタムボタンアニメーション
Wix Animations APIを使って、時計回りに回転し、クリックすると色が変わるカスタムボタンを作成しましょう。
初心者
ベクター画像アニメーション
ボールが動き、あなたの言葉のOの文字の代わりになるアニメーションを作成します。
初心者
砂時計アニメーション
Wix Animations APIを使って、砂時計を自動的に、またはボタンクリックで反転させましょう。
上級