JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。
|
|
<div class="menu"> <p class="button">ボタン</p> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ul> </div><!-- menu --> |
初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。
|
|
ul { height: 0px; overflow: hidden; pointer-events: none; } ul.open { pointer-events: auto; } |
開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。
|
|
let menu = $("div.menu"); menu.find("p.button").on("click", () => { gsap.to(menu.find("ul"), { height: (menu.hasClass("open")) ? 0 : "auto", duration: 0.25, ease: "power2.inOut" }); menu.toggleClass("open"); }); |
YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。
|
|
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe> </div> |
|
|
div.video-wrapper { position: relative; padding-bottom: 56.25%; /* 比率が16:9の場合 */ } div.video-wrapper iframe { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } |
WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript（jQuery）で一括で処理を行っておくと便利です。
|
|
$("iframe[src*='youtube.com']").each(function() { $(this).wrap("<div class=\"video-wrapper\"></div>"); }); |
ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。
SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら
下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。
|
|
$(function() { $("#test").on("load", function() { //object読み込み後に実行 var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得 var circle = rect.find("#circle"); //SVGの中の円を取得 circle.on({ "mouseenter": function() { $(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に }, "mouseleave": function() { $(this).css({opacity:1}); //マウスアウトで透明度を1に } }); }); }); |
「test.svg」ファイルの中身はこちら
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle id="circle" fill="#333333" cx="50" cy="50" r="50"/> </svg> |
注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。
jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。
主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。
jQueryの最新版をそれぞれ読み込む場合、次のようになります。
|
|
<!-- Google Hosted Library --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Microsoft Ajax Content Delivery Network --> <script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <!-- jsDelivr --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- cdnjs.com --> <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script> |
複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。
jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。
|
|
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script> |
CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。
|
|
//プリロードする画像を配列で渡します priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]); function preloadImages(images) { $.each(images, function(index, value) { $("<img>").attr("src", value); }); } |