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

当ブログでは主に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…

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

最近ではアプリなどでGPSを使った位置情報の取得する機能をよく見かけますがJavaScriptを使ってそのようなGPS位置情報を利用するサンプルを作ってみたので紹介してみます。JavaScriptでは「Geolocation API」というAPIを使って「navigator.geolocation」オブジェクトで位置情…

最近ではWebサイトを構築する際、PC画面での表示のみならず、スマートフォンやタブレットPCなど複数媒体でのサイト閲覧を意識した設計およびレイアウトを考慮しなくてはならなくなってきています。閲覧するブラウザやOSなどで振り分けを行う方法もいろいろありますが、サイトを閲覧した時のウィンドウサイズによって読み込むCSSを切…