Webページ上にYouTube動画を複数貼り付ける際、掲載する動画の数が多くなるにつれて通常の埋め込み方法ではページの読み込みに時間がかかってしまうことがあります。その様な場合、通常のYouTube埋め込みではなくユーザーのクリックイベントなどで動画を読み込むようにすることでページロード時の負荷を軽減させることができま…

最近ではスマートフォンでもユーザーがサイトに訪れた際に自動で動画を流すことが可能になり動画を使った演出を実装しているサイトが多くなってきています。その様な動画を使った演出をクライアントから求められる機会も増えていますがユーザーの端末設定によってはスマートフォンでの動画自動再生は正常に動作しなくなる場合があります。その中…

当ブログでは主にjQueryを使ったアニメーション動作について紹介していますがjQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを実装できるライブラリも多々あります。そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを組み込むことができるライブラリを自分用…

Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。そんな時に使える横スクロールさせるエリアが出現した時にアニメーション付きのアイコンを表示してそのエリアが横スクロールできることを…

レスポンシブサイトではウィンドウの幅（画面解像度）によってレイアウトの調整や動作処理の制御を行います。ウィンドウサイズ（画面幅／高さ）の取得方法に関してはスクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用…

jQueryなどでアニメーションを実装した際にはアニメーション終了時に処理を実行させるのは比較的簡単なのですがCSSアニメーション制御の場合は少々面倒だったりします。そんなCSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition…

iPhone6 / iPhone6 Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。中でも「iPhone6 Plus」は解像度が1920×1080と大きく、タブレットに近いサイズにまでなっておりこの先、Webページを作成する際に「iPh…

Webページ上のテキストや数値を表示する演出でスロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かありその度に苦労していたのですがとても簡単に同様のアニメーションを実装することができるスクリプトがあったので自分用メモとして紹介してみます。Odometer - Transition numbers…

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法としてパララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ次画面へ遷移するさせる技法がよく見られます。そんなWebページ内でスク…

以前ここで「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法」と題して、それぞれのデバイスごとに振り分ける方法を紹介しましたがAndroidはモバイルとタブレットの振り分けはできていなかったのですがiPhoneとAndroidモバイル、iPa…