【JQuery/CSS】矢印を作成しクリックで回転させスピードを付ける

投稿者: | 2020年11月20日
CSSアイキャッチ

今回はcssで矢印を作成後、transform(回転)とtrantrate(回転スピード)を追加してJQueryのtoggleClassを使用してクリックで回転できるようなデモを行ってみたいと思います。

最終的には下記のようにクリックしたら回転することができるようになります。

 

完成後

Resaultの水色の背景をクリックしてみてください。

See the Pen NWroEZx by tomoy777 (@tomboy777) on CodePen.

それではいってみましょう(*^^)v

作成手順

まずは今回の作成手順をご説明します。

手順

①背景を作成

②矢印を2つ作成

③クリックイベントを作成

④回転させる

⑤回転にスピードをつける

大まかにこのような流れで作成していきます。

 

背景を作成

HTML

CSS

完成後

背景

まずはこのような背景をHTMLとCSSで作成します。

 

 

矢印を作成

CSSで1つ目の矢印を作成

【完成後】

矢印1

一つ目の矢印が完成です。

 

CSSで2つ目の矢印を作成

【完成後】

矢印1

2つ目の矢印が作成できました。

.border2.addクラスはHTML上にはまだ存在しないのでここは表示されません。

変わったのはCSSのセレクターに.addクラスを追加したことです。

これを次のクリックイベントで、addクラスを追加したり削除したりします。

 

 

 

クリックイベントの作成

JQueryのtoggleClassの使用

toggleClassが分からない方は下記を参考にしてみてください。

toggleClass

【完成後】

border1の背景をクリックするたびにborder2クラスにaddクラスが追加と削除がされるようになります。

toggle回転

 

回転させる(transform)

1つ目の矢印の回転度を指定

CSSの.border2に下記の回転度の1文追加します

transformのrotateプロパティで-45度に傾かせます。

すると矢印が左向きに変わります。

【完成後】

矢印2

 

2つ目の矢印の回転度を指定

CSSの.border2.addに下記の回転度の1文追加します

【完成後】

toggle回転2

この時点でクリックすると1つ目の矢印-45度と2つ目の矢印の-135度が交互に切り替わります。

ポイント

JQueryのtoggleClassにより背景(.boder1)をクリックする度に.border2に.addが追加されたり削除されることにより下記2つのCSSが切り替わります。

.border2 → transform: rotate(-45deg); -45度の傾き(左向き)

.border2.add → transform: rotate(-135deg); -135度の傾き(下向き)

 

もうこれで完成でもいいくらいですね!

回転スピードも1文追加するだけなのでついでに解説していきたいと思います。

 

 

回転速度の指定(transition)

矢印の回転速度を指定

CSSの.border2に下記の回転速度の1文追加します

【完成後】

toggle回転スピード

transitionで速度を0.2sにすることにより動きが滑らかな動きになります。

これで完成です\(^^)/

 

 

【全サンプルコード】

 

 

まとめ

今回はこのように一から矢印を作成して回転までのデモをしてみました。

今回の一連の流れさえ覚えてしまえば、サイドバーのアコーディオンに開閉時に付随させてみたりと色々応用が利くのではないかと思います。

是非この機会に一から作成してみてこの基本の流れを頭にインプットしてサイトやブログをかっこよく動作させてもらえたら幸いです。

以上ですヾ ^_^♪

 

下記の記事も人気がありますので是非一読してみてください!

サイトの画像を一定間隔の昇順で切り替える

 

JavaScript/jQuery

JavaScript/jQuery目次