YouTube Player API で動画を制御する | バシャログ。
どうもお久しぶりです fujihara です。 春一番が吹き荒れ街も暖かくなってきましたね。 季節の変わり目って布団の量が難しくて風邪を引きやすいと私は 思っているので皆さんもお気をつけ下さい。 本日はYouTube Player API で動画を制御します。 目的 業務で YouTube を連続で再生させたいという依頼があり使用しました。 (詳細は省きます) コード 以下Googleのサンプルコードです。** 参考 ** iframe 組み込みの YouTube Player API リファレンス <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = d
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
JSter – JavaScript Catalog
EssentialsApplication FrameworksMobile FrameworksMVC FrameworksRealtime FrameworksDesktop GUIServerSide LibrariesTesting FrameworksTemplating EnginesLoadersUIUI FrameworksWindows, Modals, PopupsKeyboard WrappersForm WidgetsUI ComponentsSliders & GalleriesNotificationsWYSIWYG EditorsTouchLayoutTours & GuidesMultimediaGame EnginesPhysics LibrariesAnimation LibrariesAudio LibrariesPresentation Librar
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
3D Restaurant Menu Concept
A responsive folded flyer-like restaurant menu with some 3D, featuring recipes from Michael Natkin from herbivoracious.com Your current viewport size shows the simplified version CSS animations are not supported in your browser CSS transforms are not supported in your browser CSS 3D transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern br
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』
ウェブページ上にツイートを表示するシンプルで軽量なJavaScript『Chirp.js』 Chirp.jsはウェブページ上にTwitterのタイムラインを表示するためのJavaScript。 jQueryなどのライブラリに依存しない単体の超軽量スクリプトで、カスタマイズ性が高く設置も超簡単という、この手のスクリプトとしては非常に優秀なシロモノです。 先ずはスクリプトをダウンロードしましょう。自分で自由に値段を付けて『Buy it!』をクリック。もちろん『0』を入力すればフリーでダウンロードできます。 ダウンロードしてスクリプトを解凍したら、適宜サーバーにアップロードしたら下準備は終わりです。 最も簡単な使い方としては、スクリプトのパスとTwitter名を指定した上でタイムラインを載せたいページの適当な部分（<body>内）に以下の2行を挿入するだけです。 （1行目のスクリプトタグは<he
超面白！文字を選択してその文字にコメントできるJSライブラリ:phpspot開発日誌
Home - Annotator - Annotating the Web 超面白！文字を選択してその文字にコメントできるJSライブラリ。 ブログ等で記事のここにコメントしたい、といった場合に選択するとアイコンがあらわれます クリックするとコメント書き込みフォームがポップアップされます Saveボタンを押すと保存され、マウスオーバーでコメントが出るようになります コメント量の多いところはその分黄色く表示されます ストレージは自分のサーバに用意することもできますが、ホスティングを使う事もできます。 面白い上に、インタフェースが良い感じです。これを使ったサービスを作ってみるのも楽しそう。 関連エントリ スマホを判別するのに便利なJSスニペット ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 JavaScr
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
Raphael.jsを勉強したいのでいろんなサイトまとめ | バシャログ。
ちょうど金環日食の時だけ曇り空だったminamiです。皆さんはちゃんと見られましたか？ Webサイトでベクターデータを扱うのにとっても強力なRaphael.jsというライブラリがあります。何年か前からあるのですが、なぜか最近興味が出てきたので勉強できるサイトを調べました。 Rapahel.jsはJavaScript用のグラフィックライブラリで、比較的簡単な記述でSVGで扱うことができます。SVG非対応のIEの場合はVMLで表示してくれるのがミソで、IE6であっても同じ見た目を確保することができます！また、マウスイベントに関連付けたアニメーションも作ることができます。 ライブラリ自体は多少容量が重いのですが、他のライブラリに依存していないのでこれ単体で済んでしまうというのも強みではないでしょうか。ちょっといじっただけで値によって変化するグラフなんかも描くことができます。 棒グラフのサンプル
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル １見の価値あり！なフルスクリーンWEBサイトのまとめ
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
ui.checkSwitch
What's this? "ui.checkswitch" is a javascript library and you can implement ios style switching checkbox by using this. iOS style switching checkbox Download Download ui.checkSwitch.js Implementation Here is a checkbox, and this is to be base. <input type="checkbox" id="checkbox" name="checkbox" value="1"> Then, reading "ui.checkswitch.css", "ui.checkswitch.js" and run ChechSwitch func. <link rel=
パネルを開閉するスクリプト
幅：480pxで表示 [ad#ad-2] 実装 HTML 各パネルはリスト要素で実装します。 リスト要素を内包するdiv要素のidとclassに「st-accordion」を付与します。 <div id="st-accordion" class="st-accordion"> <ul> <li> <a href="#"> Item Title <span class="st-arrow">Open or Close</span> </a> <div class="st-content"> <p>Some content</p> </div> </li> <li> ... </li> </ul> </div> スクリプトのオプション スクリプトのオプションでは、アニメーションの種類、スピードなどが設定できます。 $.Accordion.defaults = { // index of ope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]表示しているウェブページを爆発させるスクリプト -fontBomb
html5-memo.com
Useful plugin for responsive web designs - WebDesignShock