画像の遅延読み込みを行うJavaScriptライブラリ［Layzr.js］を紹介します。 ウェブページの読み込み時間短縮のために、ウィンドウの表示領域に入っていない要素や画像を非表示にしておいて、画面スクロールでウィンドウ内に入ってきたタイミングで表示切り替えを行います。 同機能のjQueryライブラリでは［Lazy Load］が有名ですが、今回紹介する［Layzr.js］ではローディングの時間短縮に直接は関係のないフェードイン表示機能などはカットして、最低限の機能だけを残してファイルサイズをより小さくしています。 より軽く、より早く。 遅延読み込みの本来の役割を重視した仕様になっています。 比較的簡単なステップで導入可能です。 ファイルのダウンロード まずは公式サイトからJavaScriptファイルをダウンロードします。 Layzr.js : http://callmecavs.gith

今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/ ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。 後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。 以下、実装方法を紹介していきます。 ［Remodal］の必要なファイルを読み込む はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。 Remodal : http://vodkabears.github.io/remodal/ GitHub : https://gith

本ブログではこれまでも数多のjQueryスライダーを紹介してきました。 いずれも素晴らしい完成度で、すべて自信を持ってオススメできるものばかりですが、今回取り上げる［Glide.js］も他に負けず劣らず使い勝手がよく、実際、弊社でもクライアントワークで多用する機会が増えてきました。 さて。その［Glide.js］の導入方法ですが、まずは以下のサイトより、必要なファイルをダウンロードしてきましょう。 http://glide.jedrzejchalubek.com https://github.com/jedrzejchalubek/Glide.js 上記いずれかのサイトよりダウンロードしたzipファイルを展開すると、２つのスタイルシートと２つのスクリプトが同梱されているはずです。 glide.core.css glide.theme.css glide.js glide.min.js 「g