「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説します サンプルを別ウインドウで開く コードを確認する ステップ① 描画のためのcanvasを用意 サンプ
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesに標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 Viteやwebpackなどのフロントエンドのツールを通して、ES Modulesを使っているエンジニアは多いでしょう。本記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesで解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった 昔（2010年代前半）のJavaScriptには他のJSファイルを取り込む仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時には、HTMLファイルにscriptタグを書き
みなさんベクトルをプログラムで活用していますか？ 学校で学んで以来、縁が無くなった方も多いかと思いますが、実は3Dコンテンツの制作においてベクトルは役に立つ概念なんです。本記事ではThree.jsとベクトルの基礎である足し算・引き算を使った座標の計算方法を紹介します。 ベクトルと聞くだけで拒絶するエンジニアもいると思いますが、心配いりません。Three.jsが煩わしい計算をすべておこなってくれるので、ベクトルの性質だけ覚えれば誰でも扱えるようになります。基本からおさらいし、実際にThree.jsでどのようにベクトルを扱っていくか学んでいきましょう。 ベクトルを使った3Dのデモの紹介 本題に入る前にベクトルを使ったデモを作成したので紹介します。今回は以下のような物体を追従するカメラをベクトルを使って実装しています。サンプルコードもGitHubにアップしているので参考ください。 デモを別ウイン
ウェブフォントは異なる環境でもフォントの見栄えを確保する手段として、多くのウェブサイトで利用されています。 ウェブフォントはCSSとしては利用しやすいものの、HTML5 CanvasやWebGLを採用した場合にCSSのように簡単に使うことができません。この記事ではインタラクションコンテンツ制作で役立つようにHTML5 CanvasとWebGLでのウェブフォントの使い方をまとめました。本記事のサンプルコードはGitHubで公開していますので、ダウンロードして読み進めてください。 この記事で学べること ・ウェブフォントの先読み機能を実現するJSライブラリ「WebFontLoader」の使い方 ・FontAwesomeをプログラムで制御する方法 ・HTML5 Canvasでウェブフォントを使う方法 ・WebGLでウェブフォントを使う方法 この記事ではウェブフォントの題材として「Font Awes
めっちゃ久しぶりの更新。 blog.kanariia.netにURL変更なったので、 以前ブックマークしてくださってた方はこちらに修正お願いしまーす！ fladdictさんのこの記事で、JavaScriptのCanvasをFlashライクに使うライブラリが作られたってことを知って、これはやってみるしかないってことで、ちょっとまとめてみまーす！ 配布元はこちら。 Easel JS: A Javascript Library for Working with the HTML5 Canvas Element. とりあえずサンプル Hello World！ってゆうpng画像を読み込んだのとshapeをaddしたcontainerをEnterFrame的に動かしてみた。マウスイベントもとってます。 サンプル サンプル(別ウィンドウ)
We’re getting things ready Loading your experience… This won’t take long.
既にご存知の方も多いと思いますが、1週間ほど前にKAYACさんの新サービスjsdo.itがリリースされています。 jsdo.itはHTML, CSS, JavaScriptを編集してその場で実行、共有するプログラマ向けコミュニティサイトです。wonderflをご存知の方はそのJavaScript版の一言で十分でしょう。 単にコードを書いて公開するだけでなく、その場で実行したり、favorite に登録したり、forkしたり、コメントを書いたりと、ソーシャルな要素が強いところがポイントです。 とりわけforkが特徴で、公開されているコードをベースにして改良を加えてみたり、パラメータを変えてどうなるのか実験してみたり、といったことが簡単にできます。また、わからないところがあればquestionタグを付けてどこがわからないのか書いておけば、誰かが回答付きでforkしてくれるかもしれません。que
もともとFlashで用意されたクラスでは、OSとかFlashのバージョンしか判定できない。 そこでえらい人が作られたライブラリ。 JSProxy.as JSとの連携のライブラリで色々できるみたい。 とりあえずバージョン判定の使い方は以下の通り import com.rails2u.bridge.JSProxy; import com.rails2u.bridge.JSProxy; var browser:String = JSProxy.proxy.navigator.$userAgent; var tf:TextField = new TextField(); tf.text = browser; tf.wordWrap= true; tf.width = 200; addChild(tf); 一点注意は、ブラウザ判定だからムービープレビューじゃ機能しない。 パブリッシュして初めて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
