スクロール量に応じてアニメーションを行いたい場合、さまざまな方法が思いつきますが、上下スクロールでスクロールと連動させたアニメーションを実装したいのならScroll Magicが有名かと思います。 TweenMaxも使えるので、複雑なアニメーション作成におすすめです。 簡単ですが、使い方を。 Scroll Magic

オジー WordPress歴8年 副業でデザイン/開発を受託→法人化 WordPressで会社HPをオリジナルテーマで作成 主軸はデザイン、たまにフロントエンドのコードも書きます 事業会社/受託会社 両方経験あり よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか？　changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなときはDOMSubtreeModified propertychangeを使用することで監視することができます。 今回はその使用方法を紹介したいと思います。 コード $(document).ready(function() { $('.div_change_lst').on('DOMSubtreeModified proper

以前YouTube Data APIで指定した動画の再生数の取得を試してみましたが、今回は再生リストに入っている動画の情報の取得を試してみます。 サンプルコード 再生リスト内の動画の取得はPlaylistItemsを使用します。 var apikey = 'APIキーをここに入れる'; var listid = '再生リストのIDをここに入れる'; var pagetoken = ''; var results = []; $(function(){ get_api_data(); }); // URLを生成する関数 function generate_api_url(token) { var url = 'https://www.googleapis.com/youtube/v3/playlistItems'; url += '?part=snippet'; url += '&maxRe

slickを使っていたら「Uncaught TypeError: Cannot read property ‘unslick’ of undefined」というエラーが出たので今回はその直し方を解説します。 unslickエラーが出る条件どうやらspもしくはpcのいずれかだけslickを発動させようとするとこのエラーが出るみたいです。とは言えエラーが出ない場合もあり、正直詳しくはよくわかりませんm(__)m リサイズしまくってpcとsp表示を切り替えたりリロードすると出たり出なかったりします。 僕はこんな感じで書いていたらエラーが出ました。 $(window).resize(function () { // spのみ if ($(window).width() < 768) { $('.slider').slick({ // オプション }); } else { // pcのみ $('.s

ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。 サンプルデモを見る 現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。 判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G

作成日 : 2018/06/16日 何とかJavaScriptを使って、APIを使わずInstagramの投稿を取得したのでここに書く ※Tag検索表示が出来たのでコメントに載せています。 Instagram Instagram API まず最初に Instagram APIは企業が取得しようとし 「申請が降りるまで2年たった...」 とまで言わしめたホラーゲームである。(大嘘) 僕も年始めに申請したが、結局現在も許可されるに至っていない。 めっちゃ鬼畜。 そんな訳でInstagram APIを使わずインスタの投稿を取得します 下記に書す方法ではJavaScriptだけではなく、PHPとかでも可能だろう ではquiitta初投稿で 汚い投稿を見ていってください。 ※このプログラムを使用する場合は自己責任でお願いします。 たとえ何かしらの損害が生じても私に責任は無いものとします。 1. ソー

この記事を簡単に書くと… ある時期からjQueryの「bxslider」でリンクができなくなった 「touchEnabled:false」のオプションを追加することで解消 フリックでの切り替えができなくなるので、別のプラグインに変えることも検討を jQueryの「bxslider」は、WEBサイトで写真をスライドして表示させることができる、有名なプラグインの一つです。レスポンシブ対応もしているので、使っているユーザーも多いのではないでしょうか。 その「bxslider」で、スライドの写真にリンクを貼っている場合に、ある時期からクリックできなくなってしまいました。原因としては、Google Chromeのアップデートによって「bxslider」に不具合が発生している状態なのですが、まだ対応されていません。 その為、「bxslider」が最新版になって、この不具合に対応するまでは、リンクをクリ

WordPressの記事から見出しを自動で探し出し、リンク付きの「目次」ナビゲーションを設置するためのスクリプトを紹介します。 jQueryも一切使っていないです。 プラグインを使いたくない！って方は是非参考にしてみてください。 1. 見出しタグやブログのHTML構造を確認する まずは準備として、現在使用しているテーマのHTMLソースの構造を把握しておきましょう。 目次にしたい見出しは何番のHタグを使っているのか まずは見出しタグから確認していきましょう。 例えば下の画像のように、記事のタイトルがH1タグで、 大見出しはH2タグ、中見出しは全てH3タグで書いてあるパターンなどがあると思います。 ほとんどこんな感じかと思いますが、たまに大見出しも全部h1タグだったりするので確認しておきましょう。 今回は このパターンを例にしたスクリプトを紹介していきます。 記事を囲っているdivタグなどのI

2021.05.29 修正 codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、 別でサンプルHTMLを準備しました よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。 JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。 ✕悪い例 <a href="hoge.html?id=sec01"> ◎良い例 <a href="hoge.html#sec01"> なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。 Sample h

普段はあまり気にならないのですが、 自動で切り替わるスライダーを実装した時に 最初の1枚目だけ切り替わるのが早く、コピーが読めない。 2周目以降は切り替わる速さは問題ない といった場合の対処方法を説明します。 beforeChangeとslickSetOptionを使う autoplaySpeedの初期値には 指定したいautoplaySpeedの値 + speedの値 を指定。 1枚目以外のスライドに切り替わったタイミングで slick('slickSetOption', 'autoplaySpeed', 8000, true) のように指定。 $slider.slick({ infinite: true, fade: true, speed: 2000, autoplay: true, autoplaySpeed: 10000, }) $slider.on('beforeChange'

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 長く親しまれているWEBサイト上のスライドショー。 色々なプラグインが開発されて、中には超多機能なものもあります。 ただ、超個人的な話をすると、スライドショーはシンプルで良いと思ってます。 ぶっちゃけ、全てのスライドをじっくり1枚ずつめくりながら見るユーザー・見せるべきケースってそこまで多くないんじゃないか？？て思うんですよねえ。。 中にはここスライドショーじゃなくてもいいんじゃない？と感じる事さえあるので、いっそ本当にプレーンなスライドショーサンプルを作ってみました。 ページ送りも付いていない、一定間隔でスライドを繰り返すだけの超絶シンプル仕様です。 See the Pen Extreme plain slideshow by mycreatesite (@mycreatesite) on CodePen. うーん潔い

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてあります が…） animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッと

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <script> $(function() { $('.js-button').click(function(){ AjaxZip3.zip2addr('zip', '', 'pref', 'city'); }); }); </script> </head> <body> 〒<input ty

Midnight.js lets you switch fixed headers on the fly Scroll to try it out! The Header Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed. The Sections After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where .your-class is the class you

やりたいこと スマホで見たときに、タップするだけで電話がかけられるように電話番号にリンクをはりたい。 でもPCで見たときはリンクさせたくない。 それを同じHTMLで済ませたい。 テキストだけでなく、画像でも同様にしたい。 ということで、JavaScript(jQuery)を使います。 →デモ jQueryで電話番号リンクを追加する <!-- テキストの場合 --> <p class="tel">00-1234-5678</p> <!-- 画像の場合は、alt属性に電話番号を入れておきます。 --> <p class="tel"> <img src="https://placehold.jp/150x150.png" alt="01-1234-5678"> </p> $(function() { $('.tel').each(function() { //.tel内のHTMLを取得 var

使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという状態） デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいと

HOMEブログウェブ制作slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ こんにちは、エンジニアのアンドレです。 最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。 幅固定での中央寄せ 中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。 しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。 結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素（下の例では「.item」）に固定幅を指定することで実現できました。 See the Pen 幅固定での中央寄せ