JavaScript目次

JavaScriptに関する記事の一覧です。

• ローディング画面などを初回アクセス時のみ表示させる方法
• jQueryのスライダープラグイン「slick」でスライダーの一時停止処理を実装する方法
• フォームで入力可能な残りの文字数をカウントして表示できるjQueryプラグイン「maxlength plugin」
• Cookieの同意を促すポップアップを簡単に実装できるjQueryプラグイン「jQuery Cookie Consent Plugin」
• WordPressの投稿一覧を無限スクロール化できるJavaScriptプラグイン「Infinite Scroll」
• 右クリック・ドラッグ&ドロップ・スマホでの長押しを無効化して画像保存を禁止する方法
• 直前に開いていたページに戻るリンクを実装する方法
• jQueryを使って要素の高さをブラウザの高さにぴったり合わせる方法
• JavaScriptで変数内に特定の文字列が含まれるかどうかを調べる方法
• 下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法
• CSSとjQueryでセレクトボックスのテキストを中央寄せにする方法
• スマホとタブレットで:hoverの挙動を無効化する方法
• JavaScriptで数字を3桁カンマ区切りに変換する方法
• jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法
• jQuery UI Datepickerのカレンダーを祝日対応する方法
• シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」
• jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
• 一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法
• 脱jQuery！素のJavaScriptでローディング画面を実装する方法
• input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法
• ajaxzip3を使ってボタンクリックで郵便番号から住所を自動入力する方法
• リアルタイムで郵便番号から住所を自動入力してくれるJavaScriptライブラリ「ajaxzip3」
• 横並びにした要素の高さをjQueryを使って揃える方法
• jQueryを使って要素のフィルタリング機能を実装する方法
• フィルタリング機能も使える！Masonry風のグリッドレイアウトに要素を並べ替えてくれるjQueryプラグイン「Isotope」
• 他のページからのアクセス時に特定のタブコンテンツを開く方法
• imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」
• jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法
• アニメーションGIFをマウスホバーやクリックで再生・停止できるようになるJavaScriptライブラリ「Freezeframe.js」
• YouTube動画や画像をポップアップ表示できるjQueryプラグイン「Lity」
• IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」
• jQueryで::beforeや::after等の擬似要素のプロパティを操作する方法
• mailtoリンクをクリックした時の挙動をわかりやすくするスクリプト「MailtoUI」
• 単体で動作するシンプルなlightbox系スクリプト「Shadowbox.js」
• クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方
• クリック/タップする度にJavaScriptでクラスを追加・削除させる方法
• 背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」
• 画像を遅延読み込みできるJavaScriptライブラリ「echo.js」の使い方
• 高さの異なる要素もグリッド型で綺麗に配置することができるJavaScriptライブラリ「Magic Grid」
• クリック/タップでふわりと画像を拡大表示できるスクリプト「Lightbox」
• ページ内リンクのスムーススクロールをjQueryなしで実装する方法
• 憎きIEを撲滅！Internet Explorerからアクセスすると警告文を表示してブロックするスクリプト「IE Buster」
• 下にスクロールすると消えて、上にスクロールすると表示される固定ヘッダーをjQueryを使わずに実装する方法
• 各セクションを重なるようにスクロールさせることができるjQueryプラグイン「StickyStack.js」
• IEにもobject-fitを対応させるためのスクリプト「object-fit-images」
• jQueryを使ってアニメーションしながら指定した数字までカウントアップさせる方法
• 画像比較に便利！スライドして画像を切り替えることができる軽量スクリプト「Beer Slider」
• YouTubeの動画IDを指定するだけで動画のポップアップ再生を実装できるjQueryプラグイン「GRT Youtube Popup」
• 画像の遅延ロードを簡単に実装できる軽量スクリプト「Lazyestload.js」
• jQueryで特定のクラスが付いている場合のみ処理を実行する方法
• スクロール時にアニメーションしながら要素を表示することができるJavaScriptライブラリ「AOS(Animate On Scroll Library)」
• フルスクリーン表示の画面ごとにスクロールするページを作成できるjQueryプラグイン「fullPage.js」
• ローディングアニメーションを簡単に実装することができるjQueryプラグイン「fakeLoader.js」
• textareaやinput要素で入力可能な文字数を表示することができるスクリプト「short-and-sweet」
• 要素にタイピング風のアニメーションを加えることができるjQueryプラグイン「t.js」
• スライド画像を虫眼鏡でズームできる機能がついている一風変わったjQueryスライダー「Zoom SlideShow」
• スマホやタブレットの場合にテーブルが横スクロールできることをお知らせしてくれるスクリプト「ScrollHint」
• CSSアニメーションとjQueryを使って要素にスクロールアニメーション効果を加える方法
• IEでもobject-fitを使えるようにするスクリプト「fitie」
• クリックすると前面に現れるモーダルウインドウを実装する方法
• スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」
• 水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」
• アニメーションする幾何学的な模様の背景を実装できるjQueryプラグイン「Particleground」
• jQueryを使ってマウスホバーでドロップダウンするメニューを実装する方法
• テキストの一部分だけをアニメーションさせながら切り替えることができるjQueryプラグイン「Words Rotator」
• 文字にアニメーションを加えることができるjQueryプラグイン「textillate.js」
• クラスを指定するだけ！Webフォームで郵便番号から住所を自動入力してくれるスクリプト「YubinBango」
• jQueryで要素を削除する色々な方法「remove()・empty()・unwrap()」
• フッターに被らないスクロール追尾型のサイドバーを実装する方法
• jQueryとjquery.cookie.jsを使って背景色の変更を一定期間保持させる方法
• サイト訪問者が別のタブに移動した時に、タイトル部分が点滅して”戻ってきて”とメッセージを表示することができるスクリプト「Don’t Close This Tab」
• 30秒で理解できるJavaScriptのコードスニペットがまとめられている「30 seconds of code」
• YouTubeの動画を背景動画として全画面に表示する方法
• ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
• jQueryを使ってクリックで開閉するコンテンツを実装する方法
• ページ内リンクのナビゲーションをスクロール位置によってカレント表示させる方法
• ほぼコピペでOK！PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法
• 別ページからのアクセスでもjQueryを使ってスムーススクロールさせる方法
• 固定ヘッダーを実装している際にアンカーリンクの移動位置がずれるのを解消する方法
• jQueryでブラウザの横幅やデバイスの種類で条件分岐させる方法
• jQueryで開いているページのナビゲーションにクラスを追加してカレント表示させる方法
• 簡単にサムネイル付きのスライダーを設置できるjQueryプラグイン「Fotorama」
• WordPressの投稿一覧に無限スクロールを実装する方法
• JavaScriptを使ってテキストを一文字ずつ表示させる方法
• 横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」
• 背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」
• フォームでカレンダーから日付入力できるようになる「jQuery UI Datepicker」の導入手順
• アニメーションするSVGアイコンが使えるようになるJavaScriptライブラリ「Titanic」
• CSSのFlexboxを古いIEにも対応させることができるスクリプト「flexibility」
• jQueryで$(this)の親要素・子要素・隣接要素を指定する方法
• クリックでサブメニューを切り替えるナビゲーションを実装する方法
• 親要素内でスクロールに追随する要素を実装できるjQueryプラグイン「Fixed Sticky」
• jQueryを使って入力フォームのコピペを禁止する方法
• URLによって条件分岐させるjQueryの記述方法
• jQueryを使ってページ内リンクをスムーススクロールさせる方法
• ページ内リンクをクリックした時にアニメーションしながら移動させることができるスクリプト「moveTo」
• クリックやタップで開いたり閉じたりするFAQを実装する方法
• スクロールの途中から追尾して指定した位置で消える要素を設置する方法
• スクロールした時に要素が可視範囲に入ったらフェードイン表示させる方法
• まるで水みたいなぷよぷよとした動きを表現できるjQueryプラグイン「jquery.morphing.js」
• レスポンシブ対応の円グラフ・棒グラフ・折れ線グラフが描けるjQueryプラグイン「Pizza Amore!」
• レスポンシブ対応！Pinterestのように要素を詰めて表示することができるMasonry系スクリプト「Muuri」
• ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「ScrollTrigger」
• スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」
• JavaScriptやjQueryを使ってサイト上での右クリックを禁止する方法
• iframe内のリンククリックをトラッキングすることができるjQueryプラグイン「iframeTracker」
• チェックを入れたら入力可能になるテキストボックスをjQueryで実装する方法
• テーブルをレスポンシブ対応にしてくれるjQueryプラグイン「resTables」
• 画像に透かしを入れることができるjQueryプラグイン「Watermark」
• 全画面もしくは指定した要素全体に背景画像を表示することができるjQueryプラグイン「BACKSTRETCH」
• スクロール量をプログレスバーで表示してくれるjQueryプラグイン「Scrollgress」
• サイト閲覧時にスクロール量を表示してくれるjQueryプラグイン「Scrolline.js」
• スクリプトを読み込むだけでYouTubeなどの埋め込み動画をレスポンシブ対応してくれる「superembed.js」
• サイトの読み込み中にローディング画面を表示する方法
• jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法
• 指定した数まで数字をカウントアップさせることができるjQueryプラグイン「jquery.animateNumber」
• jQueryを使って指定した文字数でテキストを省略する方法
• jQueryを使ってスマホの時だけ左サイドバーをメインコンテンツの下に配置する方法
• HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」
• レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」
• アメブロのPR非表示も紹介！RSSから記事の一覧を出力することができるjQueryプラグイン「zRSSFeed」
• ブラウザのタブに表示されるWEBページのタイトルをスクロールさせる方法
• 指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」
• レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」
• フォームでスペースのみが入力された時に、jQueryを使って拒否する方法
• フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」
• 簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」
• WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法
• クリックした時に指定したサイズのポップアップウインドウを開く方法
• ページ内に閉じるボタンを設置する方法
• 超簡単！jQueryを使ってページ読み込み時にローディング画像を表示させる方法
• ページ読み込み時にプログレスバーを表示させることができる「PACE.js」
• jQueryを使ってタブ切り替えメニューを実装する方法
• Pinterest風のタイルデザインを簡単に実装できるjQueryプラグイン「Masonry」
• スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」
• シンプルなものから一風変わったスライダーまで実装できる高機能なjQueryスライダー「Slider Pro」
• PCサイトとスマホサイトの表示切り替えができるjQueryプラグイン「Pc2Sp.js」
• スライドショーも可能！背景全体に画像を表示させることができるjQueryプラグイン「MaxImage2」
• ページ内リンクをスムーススクロールさせるjQueryプラグイン「jquery.smoothScroll」
• クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法
• クリックやタップで開閉するアコーディオンメニューを設置する方法
• フリガナを自動入力してくれるフォームを設置するためのjQueryプラグイン「autoKana.js」
• 埋め込み動画をレスポンシブ対応にしてくれるjQueryプラグイン「FitVids.js」
• jQueryを使ってフォントサイズ変更ボタンを実装する方法
• スマホやタブレットの操作にも対応したスライダースクリプト「Glide.js」
• レスポンシブにも対応した高性能なjQueryスライダー「bxSlider」
• 初心者でも簡単にスライダーが設置できるjQueryプラグイン「FlexSlider」
• ページ内の特定クラスに属する要素をJavaScriptで置き換える方法
• JavaScriptの改行やスペースを削除して軽量化してくれるWEBサービス「JavaScript Minifier」
• ほぼコピペでOK！スクロール追従型の広告をサイドバーに設置する方法
• 郵便番号を入れたら住所を自動入力してくれるフォームを実装するjQueryプラグイン「jQuery.zip2addr」