mixitup を使ってフィルタリング機能を実装

jQuery

多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダ…

2022-11-07

.matchMedia()を使ってハンバーガーメニューを作成する

jQuery

window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…

2022-09-27

bxsliderでスマートフォン時にスライド部分をスクロール出来ない場合の解決法

jQuery

bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので、オプシ…

2022-09-05

cssプラグインを使ってハンバーガーメニューを作る

css3 jQuery

css3 jQuery プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

2022-09-05

ページネーションの導入が簡単に出来る「paginathing.js」

jQuery

ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html>

2022-08-16

jQueryを記述する上で気をつけるポイント

jQuery

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事である程度の改善は出来るの…

2022-08-15

カーテンが開くアニメーション

jQuery javascript

www.aolani-ohana.com html <div class="box"> <div class="box-inner top"> <img src="https://picsum.photos/1000/400" alt=""> </div> </div> jquery $(function(){ $(window).on('scroll resize',function(){ var elmHeight=$('.box').outerHeight();//対象要素の高さ $('.box').each(function(){ var setElm=$(this).children…

2022-08-15

jQueryでのeach()メソッド

jQuery

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方複数あるli要素に対して…

2022-07-29

.matchMedia()を使ってハンバーガーメニューを作成する

jQuery

window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…

2022-07-28

jquery-cookie.jsを使ってみる

jQuery

github.com if($.cookie('access')){ //既にアクセス済みの場合はカーテンを非表示 $('#svg-wrapper').hide(); }else{ //初アクセスの場合はカーテンをfadeOutさせる $('#svg-wrapper').delay(4000).fadeOut(400); } //ファイルがロードされたら $(window).o…

2022-07-28

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

jQuery

svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>