![見出し画像](https://assets.st-note.com/production/uploads/images/119119493/rectangle_large_type_2_5b4b721efca01295dc193a3ab2216d9f.png?width=1200)
はじめる Velo #06
Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です!
この度、『初心者でも楽しみながらVeloを始められる』をコンセプトに、『はじめる Velo』シリーズを公開することになりました!
コーディング未経験でも「やってみたい!」と思えるようなネタを提供したいと思います!
それでは第6回です!
目標
イメージ上にマウスを置くと拡大し、マウスを離すと元の大きさに戻る。
ページ要素(イメージ)
(1)パーツを追加/画像/Wixフリー素材 から画像(image1)を1つ追加する。
![](https://assets.st-note.com/img/1697508885820-VndMqW1FKh.png)
(2)ページ上で適当な大きさに整える。
![](https://assets.st-note.com/img/1697508956366-PZsO2ylmtR.png)
(3)画面右下のプロパティパネルの「onMouseIn」をクリックする。
(4)すぐ右に現れた「image1_mouseIn」右の ⊕ ボタンをクリック
する。コードパネルに現れたコードのうち薄字の部分を全て消去
する。
![](https://assets.st-note.com/img/1697509239197-0klYdjgV3n.png?width=1200)
(5)画面右下のプロパティパネルの「onMouseOut」をクリックする。
(6)すぐ右に現れた「image1_mouseOut」右の ⊕ ボタンをクリック
する。コードパネルに現れたコードのうち薄字の部分を全て消去
する。
![](https://assets.st-note.com/img/1697509297917-WxH7xO4DW5.png?width=1200)
コード(冒頭)
(1)コードパネル冒頭にアニメーションに必要なファイルをインポートする文( Import文 )を以下のように書く。エディターに入力候補が出てくるのでうまく選べば全文入力しなくてもコードが出来上がる。
![](https://assets.st-note.com/img/1697509492777-ca6Jqkiu99.png?width=1200)
(2)アニメーションを実行するためのコードを以下のように書き、冒頭部分と合わせてコードを完成させる。
![](https://assets.st-note.com/img/1697509672459-vuBG23qXFA.png?width=1200)
プレビュー
マウスを置くと画像が拡大され、離すと元に戻るアニメーション効果がページに追加される。
![](https://assets.st-note.com/img/1697509857895-YbO9A1kXjJ.png)
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか?