タブやナビゲーションがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装
Post on:2018年7月5日
sponsors
タブがアクティブな時に、ハイライトのラインがすぅっーと移動するアニメーションを実装したデモを紹介します。リスト要素でシンプルに実装されているので、タブだけではなく、ナビゲーションなどにも利用できると思います。
下記は、デモでの操作をアニメーションgifにしたものです。
この実装は、Dribbbleのアートワークにインスパイアされたそうです。
HTML
HTMLは非常にシンプルで、リスト要素で実装されています。
|
1 2 3 4 5 6 7 |
<nav> <ul> <li class="active"><a href="">First</a></li> <li><a href="">Second</a></li> <li><a href="">Third</a></li> </ul> </nav> |
CSS
ulタグに「display: flex;」を指定し、リスト要素をFlexboxで配置します。
|
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 |
* { box-sizing: border-box; } body { background: #1A1E23; font-family: "Lato", sans-serif; -webkit-font-smoothing: antialiased; } nav { position: relative; padding-bottom: 12px; } nav .line { height: 2px; position: absolute; bottom: 0; margin: 10px 0 0 0; background: #FF1847; } nav ul { padding: 0; margin: 0; list-style: none; display: flex; } nav ul li { margin: 0 40px 0 0; opacity: 0.4; transition: all 0.4s ease; } nav ul li:hover { opacity: 0.7; } nav ul li.active { opacity: 1; } nav ul li:last-child { margin-right: 0; } nav ul li a { text-decoration: none; color: #fff; text-transform: uppercase; display: block; font-weight: 600; letter-spacing: 0.2em; font-size: 14px; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } |
JavaScript
jquery.min.jsを外部ファイルにして、下記のコードを記述します。
|
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 69 |
<body> ... コンテンツ ... <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> var nav = $('nav'); var line = $('<div />').addClass('line'); line.appendTo(nav); var active = nav.find('.active'); var pos = 0; var wid = 0; if(active.length) { pos = active.position().left; wid = active.width(); line.css({ left: pos, width: wid }); } nav.find('ul li a').click(function(e) { e.preventDefault(); if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) { nav.addClass('animate'); var _this = $(this); nav.find('ul li').removeClass('active'); var position = _this.parent().position(); var width = _this.parent().width(); if(position.left >= pos) { line.animate({ width: ((position.left - pos) + width) }, 300, function() { line.animate({ width: width, left: position.left }, 150, function() { nav.removeClass('animate'); }); _this.parent().addClass('active'); }); } else { line.animate({ left: position.left, width: ((pos - position.left) + wid) }, 300, function() { line.animate({ width: width }, 150, function() { nav.removeClass('animate'); }); _this.parent().addClass('active'); }); } pos = position.left; wid = width; } }); </script> </body> |
デモ
実際の動作は、下記ページで確認できます。
See the Pen Fluid tab active state by Aaron Iker (@aaroniker) on CodePen.
sponsors
