超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
デザインするのが楽しくなる！ダウンロードしておきたい最近リリースされた無料フォントのまとめ -2015年1月
デザインするのが楽しくなる！ダウンロードしておきたい最近リリースされた無料フォントのまとめ -2015年1月
【保存版】Google Chromeのおすすめ拡張機能（アドオン）13選
GoogleChrome（以下、Chrome）をメインブラウザとして使用しているWeb制作者の方は多いのではないでしょうか。 Chromeは標準のままでもじゅうぶんに快適なのですが、拡張機能（アドオン or エクステンションともいいます。）と呼ばれる機能があり、自分の好きなようにブラウザをカスタマイズすることができます。 この拡張機能によって、毎日のブラウジングがより快適になるだけでなく、Web制作を行うにあたっても非常に便利な機能を追加することができるのです。 しかし、非常に多くの種類があり、どれを選んでいいかわからない、という方もいるのではないでしょうか。 今回は、数あるChrome拡張機能の中から、特にWeb制作に携わっている人へ「最低限これだけは入れておきたい！」というものを厳選してご紹介します。 拡張機能をインストールする際の注意点 拡張機能は便利であるため、ついついインストール
[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ
デモのアニメーションGIF 実装 HTML デモページの中央のセクション（背景グリーンの箇所）のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- モーダルコンテンツ --> </div> </div> <a href="#0" class="cd-modal-close">Close</a> </section> ボタン、モーダルコンテンツ
![[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c3e2b74f52cf5d4d27ac9771e327796cadcfbf24/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020206.png)
スマホでも動作するJS製の2D物理エンジン「Matter.js」:phpspot開発日誌
Matter.js - a 2D rigid body JavaScript physics engine スマホでも動作するJS製の2D物理エンジン「Matter.js」。 デモではパラメータ等も調整して動きをカスタマイズできて面白い。 手元のiPhone6でもテストしてみましたが、なめらかに動作しました。 関連エントリ 3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集 ActionScript3用3D物理エンジンライブラリ「WOW-Engine」 Actionscriptで書かれた物理エンジンライブラリ「jiglibflash」 JavaScriptの物理エンジン「Box2d」
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
【2018年版】今さら聞けないFacebook広告 基礎編！-後編-｜ Webディレクターマガジン
前編のFacebook広告の記事ではFacebook広告の基本的な基礎や種類、広告でリーチするオーディエンスと、広告に使用する予算の設定をご説明しました。 こちらの後編の記事では、広告に使用する画像サイズや広告で利用するテキストとリンクの設定に関して説明していきます。 まだ前編を読まれていない方はこちらからご覧ください。 前編 ▶【2021年版】プロが教える失敗しないFacebook広告の始め方・基礎設定！-前編- キャンペーン ⇒【無料】Facebookワンコイン集客術オンラインセミナー ※更新履歴 2021年1月4日：Facebook広告のボタンの種類について更新しました。 Facebook広告の出稿 -ステップ３「広告作成」- ステップ2の広告セットで予算と掲載期間が決まったら 次は実際に表示させる広告のクリエイティブの作成をしていきます。 広告の設定では Facebookページ ク
【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」
bodyや要素ごとに設定できるリアルな波紋を表現する面白いエフェクトです。エフェクトを指定した要素の背景は少しぼかしが入った画像等を使用すると効果的です。
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」:phpspot開発日誌
Story Box ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 ページスクロールすると要素が横からフェードインしたりするダイナミックでモダンなサイト作りに活用できそうです。 関連エントリ スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」
Hoverstates でアニメーション勉強！タイポグラフィー表現厳選10点！
みなさん、アニメーションの参考を探すとき、どこを見てますか？ こんにちは！ わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。 去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。 みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか？ ぼくは、Hoverstates というサイトをよく参考にしています！ 実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました！ ぼくがよくこの Hoverstates を使う理由としては以下の4点があります！ なめらかなアニメーションでわかりやすい！ サイトだけにとどまらず、ロゴだったり多種多様なアニメーションが集まっている 実際に制作されている素晴らしい例の選りすぐり わかりやすいジャンル分け という点で非常に
Daniel Klatsidis - Creative Director Digital
Too many jobs. No time. Please don't call. Thank you!
Kurppa Hosk – Brand Agency Stockholm New York
We are Kurppa Hosk Making brands accelerate meaningful change.
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
星5つ！ 評価を表示・入力できるスター表示プラグインRateIt
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Hello Monday
株式会社リ・クリエーション | オフィシャルサイト
Brigitte Calegari Plataforma de Ensino