JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか？ なぜ気にする必要があるのでしょうか？ JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30

ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。

Categories HTML／(X)HTML (33) HTML5 (26) CSS (122) CSS3 (82) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone／iPad／iPod／Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (52) WebサイトGallery (17) Web素材 (44) Web開発用ツール (28) Web情報 etc… (8) リリース情報（その他） (17)

Updated 2015.11.24 / Published 2015.04.02 新しいFirefox OSやWindows Phoneを含めた2015年現在のユーザエージェントを判定し分岐処理を行う手順をご紹介します。OSや機種毎の処理を行っていくには、もはや無理がありますので、タブレットかスマートフォンかを判別することのみにフィーチャーしています。 ユーザエージェント情報に依存して、分岐処理を行うと、常に付きまとう悩みの種が新しいOSの登場です。今年もすでにauからFirefox OSを搭載したスマートフォンであるFx0が新たに登場し、次いで日本国内でもWindows Phoneが発売されることが決まっており、ユーザエージェント情報に依存して処理を行っている部分は相次いで見直しを迫られることになりますので、以下、ご参考に活用いただければと思います。 var _ua = (functi

Document Object ModelNavigatorインスタンスプロパティactiveVRDisplaysappCodeNameappNameappVersionbluetooth Experimental buildIDclipboardconnectioncontactscookieEnabledcredentialsdeviceMemorydoNotTrackgeolocationglobalPrivacyControlgpuhardwareConcurrencyhidinkkeyboardlanguagelanguageslockslogin Experimental maxTouchPointsmediaCapabilitiesmediaDevicesmediaSessionmimeTypes 非推奨 onLineoscpupdfViewerEnabledpermissi

ぼかし効果のサンプル 以下のような指定で簡単に画像にぼかし効果を入れることができます。 img{ -webkit-filter: blur(3px); filter: blur(3px); } See the Pen filter: blur(3px) by Saomocari (@Saomocari) on CodePen. その他の効果は以下のようなものがあります。 ぼかし / blur() 明度 / brightness() コントラスト / contrast() 彩度 / saturate() ドロップシャドウ / drop-shadow() グレースケール / grayscale() 色相 / hue-rotate() 階調の反転 / invert() 透明度 / opacity() セピア / sepia() SVG のfilter / url() CSS-Filters-Po

Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。WebGLとThree.jsは実際に多くのサイトで使用されており、ユーザーに印象に残るウェブコンテンツには欠かせない技術となっています。また、JSライブラリの容量も126KB（GZIP）しかなく、とても軽量です。 本記事でThree.jsによ

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS などに並ぶ JavaScript フレームワークの１つに Vue.js があります。 Vue.js はバインディングあり・軽量・低学習コスト・拡張可能な MVVMフレームワークです。 手っ取り早く理解するために、コピペで動く７つのサンプルを用意して、各サンプルに対して説明します。ブラウザとテキストエディタがあれば動きますので、入門のハードルを極力下げました。 なにはともあれ、動くサンプルを見て、最短で Vue.js を動かしてみましょう！ 動作は MacOS で、ブラウザは Google Chrome で確認しています。 ソースコードは、 以下の２ファイルで構成されています。 ・ main.html （ HTML ） ・ script.js （ JavaScript ） これらのファイル名で同じディレクトリにファイル作成し、以下のソースをコピペしてください。 ↓ mai

「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

フルスクリーンでコンテンツを表示するWebページが増えましたね！ 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！ （onLeaveというオプションを使えば可能であることがわかりました） せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方

jQueryを使用して、シングルページでナビゲーションに現在地を表示するサンプルを作成しました。 デモページはこちらになります。 ■HTML ナビゲーション部分とコンテンツ部分のHTMLの抜粋です。 ページ内リンクで各コンテンツに遷移します。 <ul id="gnav"> <li><a href="#contents01">コンテンツA</a></li> <li><a href="#contents02">コンテンツB</a></li> <li><a href="#contents03">コンテンツC</a></li> <li><a href="#contents04">コンテンツD</a></li> </ul> ～略～ <div id="contents"> <div class="inner"> <div id="contents01"> <h2>コンテンツA</h2> コンテンツAの