プログラミング

【コピペOK】扉の開閉アニメーションをjQueryで実装する方法

扉の開閉アニメーション
ユウマ
こんにちは、ユウマ(@yuuuma_11)です。

 

この記事ではjQueryを使って、扉の画像をクリックした際に開閉アニメーションを発生させる方法を解説します。

 

ユウマ
コピペで実装することができるので、初心者の方でも大丈夫です。

 

扉のイラストを準備する

door_back door

 

まずはアニメーションを実装するための扉を準備します。

 

この時注意していただきたいのが、1枚の画像やイラストではなく、扉の縁と扉本体の2つの画像を用意して下さい。

 

ユウマ
1枚の画像だと、扉の縁ごと開閉してしまうためです。

 

もし、用意するのが面倒な方はコチラからダウンロードできます。

 

扉の開閉アニメーションを実装する方法

今回は以下の扉の開閉アニメーションを解説していきます。

 

  • ①引き扉
  • ②押し扉
  •  ③応用

 

共通のHTML / CSS

それぞれのアニメーションで共通するコードです。

※位置やサイズは、サイトに合わせて変更して下さい。

 

まずHTML内にドアの画像を2つ読み込みます。

positionプロパティを使うため、2つのimgタグをdivタグで囲っています。

 

transform-origin: right;でアニメーションの原点を扉の右側に指定しています。

 

①: 引き扉

引き扉

引き扉のアニメーションを実装するためのコードです。

 

ちなみに、ここでskewYを-10degにしている理由は、扉を開いた時に傾斜変形させることで、手前に扉が開いている目の錯覚を起こすためです。

 

②: 押し扉

押し扉

押し扉のアニメーションを実装するためのコードです。

 

scale(0.8)で扉のサイズを小さくし、skewY(10deg)で扉を傾斜変形させています。

こうすることで、扉が奥に開いている風にすることができます。

 

③: 応用

応用扉

ちょっとした応用方法で、扉の奥を透化させてテキストや画像を配置しておくことで、扉を開けた時に見えるようになります。

 

コードはこちら。

 

 

※JSは引き扉の時と一緒。

 

最後に

今回は3つの扉のアニメーションを紹介しましたが、基本を抑えておけば色々アレンジできます。

 

ユウマ
アニメーションを実装する上で、transformプロパティはかなり重要なので使いこなせると幅が広がりますよ!

 

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.