壁に押しピンで貼りつけた画像入りボックス　マウスオーバーで揺れる

Animate.cssを利用して、マウスオーバーした時に左右に揺れる画像入りボックス（壁にポスターを押しピンで貼り付けたようなイメージ）を作成しました。

contents

使用するファイル
事前準備
- Font Awesome(アイコンフォントを利用できるサイト）へ登録
- HTMLファイルに読み込み
コードを記述して完成

使用するファイル

HTML
CSS
JavaScript
ボックス内に入れたい画像ファイル

事前準備

Font Awesome(アイコンフォントを利用できるサイト）へ登録

登録は面倒に感じられるかもしれませんが、無料で使用できるアイコンもたくさんありますので、一度登録すれば今後ずいぶん重宝すると思います。（CSSの疑似要素を使って、アイコンを追加することも可能です。）
Font Awesomeにて、「Start for Free」を選択後、メールアドレスを登録します。
メール認証、パスワード設定と進んでいくと、コードが発行されますのでコピーして控えておきます。

HTMLファイルに読み込み

HTMLファイルにFont Awesome、css、jQueryを読み込みます。


<head>
～（略）～
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/発行されたコード.js" crossorigin="anonymous"></script>
  <!-- css -->
  <link rel="stylesheet" href="/css/style.css"> // ディレクトリやファイル名は適宜変更してください
</head>

  ～（略）～
  </footer>
  <!-- js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="/js/main.js"></script> // ディレクトリやファイル名は適宜変更してください
</body>

コードを記述して完成

See the Pen swing anim by blue moon (@blue-moon) on CodePen.

補足説明

Animate.css は、デフォルトではページ読み込み時の最初の一度しかアニメーションを実行しません。
そのため、jQueryでマウスオーバーした時にクラスを付与し、マウスが離れたらクラスを削除する処理をしています。
今回は、Animate.css はCDNで読み込んでいますが、ダウンロードする方法もあります。他にも、豊富なアニメーションが利用できますし、開始を遅延させたりもできます。公式サイトは英語ですが、難易度は低いと思われますので、ご興味があればご確認下さい。
画像はクラウド上に保存してるものを読み込んでいますが、ローカルに保存している場合等、適宜ファイルの場所を変更してください。
{overflow: hidden;}は、画像を収めているセレクター（box）に設定してください。その外側のセレクター（box）に設定してしまうと、押しピンもはみ出だ部分が切れてしまいます。