video要素が抱える問題 video要素のloop属性によるループは、動画が最後まで再生し終えてから再開するまでの間に時間差があり、カクついて見えてしまいます。 デバッグのためにローカル環境でページを閲覧している際は時間差が短く、一見問題が無いように見えてしまいます。しかし、同じページをサーバーにアップロードして確認すると、ループのつなぎ目で、明らかに動画が停止した時間が生じていることがわかります。 今後のブラウザのアップデートで改善されるかもしれない問題ですが、当面は解決策が必要です。 JavaScriptでループを「作る」 この問題の解決手段として、「同一のvideo要素を同じ位置に2つ重ね合わせてJavaScriptで交互に再生する」という方法があります（html5 - VideoJS - Seamless Looping Video - Stack Overflow)。 一方のv

kudox.jp 2024 著作権. 不許複製 プライバシーポリシー

パララックスエフェクトをはじめとして、スクロールに合わせてコンテンツを変化させる試みが多数出てきています。簡易的なアニメーションとして見ても面白いですし、立体的な動きはユーザの目を引きやすくなります。 今回紹介するMidnight.jsもそんなスクロールライブラリの一つになります。パララックスではなく、DOMの内容を変化させるというライブラリになります。 最初の表示です。テキストの上下で色が違うのが分かるでしょうか。 白バックになった所で黒い文字だけになりました。 さらに別な背景にさしかかると文字色が変化します。 今度はフォントも変わったようです。 フォントや色を自在に変化させています。 Midnight.jsは背景の色に合わせてテキストカラー、フォントをダイナミックに変化させます。色の境目にさしかかっている時には上下で別な色になります。シングルページアプリケーションで使うとインパクトが強

Webサイトにはアイコンが付き物ですよね。しかしフラットUIが流行とあって、アイコンも派手なものではなく単色でシンプルなものが好まれるようになっています。例えばWeb Fontを使ったアイコンです。 Web Fontを使った場合、カラーリングやサイズの自由が大きいですが、向きを変えたりアニメーションさせたりするのは難しいでしょう。そこで使ってみたいのがMarkaです。 Markaの使い方 MarkaはJavaScriptを使って制御できるアイコンです。 var m = new Marka('#icon'); m.set('circle') .color('#FF6600') .size('50'); こんな感じでアイコンを指定します。四角いアイコンにする場合は、 var m = new Marka('#icon'); m.set('square') .color('#FF6600') .s

PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、 スマホサイトなら、電話番号にtelリンクを貼って、スマホから 直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応している レスポンシブのサイトの場合はどうでしょうか。 ソースにあらかじめtelリンクを設定しておくと、PCで見た際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 （もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です） telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。 こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリ

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス

デザインして作る画像もいいですが、パラメータを指定してコンピュータ上で自動生成される画像は思いもしなかった出会いが生まれることがあります。特にプログラムと組み合わせれば動かすことも可能です。 そこで見てみたいのがTrianglifyです。三角のポリゴンを組み合わせたSVG画像を背景にあてて表示する、幻想的な表示を行うJavaScriptライブラリです。 Trianglifyの使い方 ノイズを載せたり、ポリゴンの大きさやその均一性などが調整できるようになっています。手動で作るのも良いですが、自動で徐々に変化していく背景を作ったりするのも面白そうです。 TrianglifyはJavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Trianglify by @qrohlf qrohlf/trianglify

引っ越し前のサイトから移植しました。 文字列の切り出しっていつも迷うよね。 実際にスクリプトを動かして確認してみよう。 slice 文字列.slice(開始位置 [,終了位置] ) 開始位置と終了位置を指定。終了位置は省略可能。 省略すると最後まで切り出す。 終了位置は、末尾が0になる。 開始位置をマイナス値にすると、後からの桁数になる（右端のみ切り出せる）。 <例> str.slice(3); //"3456789" str.slice(-2); //"89" str.slice(3, -1)); //"345678" var str = "0123456789"; str.slice( , ); strの内容 : 結果 substr 文字列.substr(開始位置 [,切り出す長さ] ) 開始位置と切り出す長さを指定。長さは省略可能。 省略すると最後まで切り出す。 開始位置をマイナス値

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

スマートフォンが流行るのにともなって写真コンテンツが爆発的に増えています。そして次に求められるのは何かと言えば、写真のビューワーに他なりません。たくさんのコンテンツをいかに見せるかが大事になってきます。 今回はその一つ、Intense Imageを紹介します。写真をフルスクリーンで拡大してみせる、そんなビューワーになります。 Intense Imageの使い方 こちらがデモです。写真が3つ並んでいます。 クリックするとブラウザウィンドウ全体に写真が広がります。 マウスを動かすと写真を動かせるようになっています。 こちらの写真は上下に動かせます。 Intense Imagesは拡大表示するだけでなく、マウスで上下または左右に視点を動かせるのがポイントです。拡大した時には文字が表示されていますが、これは固定されています。拡大した写真はクリックで元の状態に戻ります。 Intense Images

Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item

yepnope.jsは、JavaScriptファイルやCSSファイルを遅延して読み込んだり、条件によって読み込む対象ファイルをスイッチさせることで、ページ応答やパフォーマンスを改善するJSライブラリです。 yepnope.jsの公式Webサイトはこちらですが、2013年6月現在はリンク切れを起こしているので、以下のURLから直接ダウンロードして下さい。 https://github.com/SlexAxton/yepnope.js 1. ページの初期表示を高速化 yepnope.jsの最もシンプルな記述は以下です。 yepnope("./js/jQuery.js"); こういう書き方もします。 yepnope({ load : "./js/jQuery.js" }); ちなみに、CSSを読み込ませることもできます。 yepnope({ load : [ "./js/bootstrap.js

Webサイトやモバイルアプリなどのパフォーマンスチューニングについて、豪華エキスパート執筆陣が幅広く解説していきます。

旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。

データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で

Web上でデータを表示するライブラリは実に多彩に存在します。それだけニーズはありつつもこれで決まり！というものがないのかも知れません。そのため、多様に存在するライブラリをチェックし、比較検討する必要があります。 vis.jsもそんなデータビジュアル化ライブラリの一つです。ネットワーク図をはじめ、データ同士のつながりを表現するのに向いたライブラリのようです。 vis.jsの使い方 さっそくサンプルを見ていきましょう。 年表のサンプルです。ズームイン、ズームアウトに対応しています。 HTMLを記載できます。 ネットワーク同士の繋がりを表現したグラフです。 ソーシャル。友だち同士のつながりと、その強さをビジュアル化しています。 オブジェクトの用例付き。 Graphvizからサンプルを拝借しています。データはマウスで動かせます。 垂直型のレイアウト。 グルーピングしたデータビジュアル化。 HTML