今回はcssで矢印を作成後、transform(回転)とtrantrate(回転スピード)を追加してJQueryのtoggleClassを使用してクリックで回転できるようなデモを行ってみたいと思います。
最終的には下記のようにクリックしたら回転することができるようになります。
【完成後】
Resaultの水色の背景をクリックしてみてください。
See the Pen NWroEZx by tomoy777 (@tomboy777) on CodePen.
それではいってみましょう(*^^)v
Menu
作成手順
まずは今回の作成手順をご説明します。
①背景を作成
②矢印を2つ作成
③クリックイベントを作成
④回転させる
⑤回転にスピードをつける
大まかにこのような流れで作成していきます。
背景を作成
HTML
1 2 3 4 | <div class="border1"> <div class="border2"> </div> </div> |
CSS
1 2 3 4 5 6 7 | .border1 { /* 背景 */ background: skyblue; height: 45px; width: 90px; cursor: pointer; } |
完成後
まずはこのような背景をHTMLとCSSで作成します。
矢印を作成
CSSで1つ目の矢印を作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .border2{ /* 1個目の表示で左向きの矢印作成*/ content: ''; /* 親要素(border1の背景)からポジショニングする */ position: absolute; top: 18px; left: 20px; /* 線の書式 */ border-top: 5px solid red; border-left: 5px solid red; /* 線の長さ */ width: 20px; height: 20px; } |
【完成後】
一つ目の矢印が完成です。
CSSで2つ目の矢印を作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .border2.add{ /* 2個目の表示で下向きの矢印作成*/ content: ''; /* 親要素(border1の背景)からポジショニングする */ position: absolute; top: 18px; left: 20px; /* 線の書式 */ border-top: 5px solid red; border-left: 5px solid red; /* 線の長さ */ width: 20px; height: 20px; } |
【完成後】
2つ目の矢印が作成できました。
.border2.addクラスはHTML上にはまだ存在しないのでここは表示されません。
変わったのはCSSのセレクターに.addクラスを追加したことです。
これを次のクリックイベントで、addクラスを追加したり削除したりします。
クリックイベントの作成
JQueryのtoggleClassの使用
toggleClassが分からない方は下記を参考にしてみてください。
1 2 3 | $('.border1').click(function(){ $('.border2').toggleClass('add'); }); |
【完成後】
border1の背景をクリックするたびにborder2クラスにaddクラスが追加と削除がされるようになります。
回転させる(transform)
1つ目の矢印の回転度を指定
CSSの.border2に下記の回転度の1文追加します
1 2 | /* 回転度 */ transform: rotate(-45deg); |
transformのrotateプロパティで-45度に傾かせます。
すると矢印が左向きに変わります。
【完成後】
2つ目の矢印の回転度を指定
CSSの.border2.addに下記の回転度の1文追加します
1 2 | /* 回転度 */ transform: rotate(-135deg); |
【完成後】
この時点でクリックすると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文追加します
1 2 | /* 回転スピード */ transition: 0.2s; |
【完成後】
transitionで速度を0.2sにすることにより動きが滑らかな動きになります。
これで完成です\(^^)/
【全サンプルコード】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-1.8.3.js"></script> <title>回転矢印</title> <style> /* ////////// CSS //////////*/ .border1 { /* 背景 */ background: skyblue; height: 45px; width: 90px; cursor: pointer; } .border2{ /* 1個目の表示で左向きの矢印作成*/ content: ''; /* 親要素(border1の背景)からポジショニングする */ position: absolute; top: 18px; left: 20px; /* 線の書式 */ border-top: 5px solid red; border-left: 5px solid red; /* 線の長さ */ width: 20px; height: 20px; /* 回転度 */ transform: rotate(-45deg); /* 回転スピード */ transition: all 0.2s; } .border2.add{ /* 2個目の表示で下向きの矢印作成*/ content: ''; /* 親要素(border1の背景)からポジショニングする */ position: absolute; top: 18px; left: 20px; /* 線の書式 */ border-top: 5px solid red; border-left: 5px solid red; /* 線の長さ */ width: 20px; height: 20px; /* 回転度 */ transform: rotate(-135deg); } </style> </head> <!-- ////////// HTML ////////// --> <body> <div class="border1"> <div class="border2"> </div> </div> <!-- ////////// JQuery ////////// --> <script> $(function(){ $('.border1').click(function(){ $('.border2').toggleClass('add'); }); }); </script> </body> </html> |
まとめ
今回はこのように一から矢印を作成して回転までのデモをしてみました。
今回の一連の流れさえ覚えてしまえば、サイドバーのアコーディオンに開閉時に付随させてみたりと色々応用が利くのではないかと思います。
是非この機会に一から作成してみてこの基本の流れを頭にインプットしてサイトやブログをかっこよく動作させてもらえたら幸いです。
以上ですヾ ^_^♪
下記の記事も人気がありますので是非一読してみてください!