Three.js入門サイト - ICS MEDIA
このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
canvasで ”うにょうにょ動く円” を ”複数” 作ってみました | SPLOUT BLOG
こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。 業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。 参考にしたのはこちらの記事。 JavaScriptはじめました。 – くねくねする円を作ってみた。 NIJIBOX Creator’s Blog – JavaScriptで実装！理想の「うにょうにょ動く円」を求めて… ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。 https://jsfiddle.net/39we73t1/ 完成はこちら See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen. script全文はこちら さっそく作り方を うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた
JavaScriptで実装！理想の「うにょうにょ動く円」を求めて… | 株式会社ニジボックス
[markdown] こんにちは、新人フロントエンドエンジニアの坂本です。 もうすぐ11月なんですね！早いですね！もう…入社から半年もたってしまいましたね.. 2回目の投稿となります今回は、最近気になってしょうがない「うにょうにょ動く円」を作って遊びたいと思います。 今回の投稿は、理想の「うにょうにょ動く円」をどうやったら作れるのかについて追究していく内容となっています。 ##うにょうにょ動く円とは イメージこんな感じですね。 このように円が何かしらの力によって揺らいだり、動いていたりする様を「うにょうにょ動く円」定義します。 きっとcanvasやSVG、webGLとかを使って再現するんだろうなと思います。 最近、写真がうにょうにょ動いていたり、ボタンがうにょうにょ動いていたりというのを見かけて、すごく気になっていました。 ##作り方 作り方はさっぱりなので、ググります。 今回、参考にさせ
Free Textures for 2024 [High Resolution] - Resource Boy
Textures 18 Dollar Textures (Updated) 100+ Blood Textures 100 Splatter Textures 220+ Smoke Textures 200 Gold Textures 200 Spider Web Textures 300 Marble Textures 250 Fireworks Textures 200 Brick Wall Textures 100 Transparent Tape Textures 100 Fire Flame Textures 50 Ziplock Plastic Bag Textures 300 Graffiti Backgrounds 100+ Lip Print Textures 100 Shadow Overlays 100 Chalkboard Textures 100 Lightnin
ゲームデザインの罠：「やらされてる感」の正体とは｜あんてな
X上でつぶやいた内容のリンクです。 ログ化しないと、流れてしまってもったいないので… 最後にまとめを書いているので、そちらだけ読むほうが分かりやすいかもしれません。 とはいえ、所詮メモですが… 結論がボヤけていたので先にまとめます。 「やらされてる感」は「主体性が無い状態で強制的にゲームプレイを継続している時」に発生する感情です。 主体性は「自分の意思」あるいは「自由意思」と言い換えてもいいですね。 「主体性が無い」状態は「ゲームの仕組みにより奪われた」場合と「ゲームの仕組みのせいで生まれていない」場合があります。前者の代表例が「レベル上げ」で後者の代表例が「何をすればいいか分からない」です。 整理すると…「ゲームの仕組みにより自分の意思が【封じられた状態】でゲームプレイを継続させられる」状態か「ゲームの仕組みにより自分の意思が【発生していない状態】でゲームプレイを継続させられる」状態によ
【GDC2024】30秒でユーザーを惹きつけよ、チュートリアルを廃止せよ——「Roblox」大手スタジオが語る、次世代ゲーマーに向けた必須の開発ノウハウ
Home » 【GDC2024】30秒でユーザーを惹きつけよ、チュートリアルを廃止せよ——「Roblox」大手スタジオが語る、次世代ゲーマーに向けた必須の開発ノウハウ 【GDC2024】30秒でユーザーを惹きつけよ、チュートリアルを廃止せよ——「Roblox」大手スタジオが語る、次世代ゲーマーに向けた必須の開発ノウハウ X、Instagram、YouTube、Tiktok……ユーザー自身がコンテンツを投稿するタイプのプラットフォームには、ユーザーが集まるにつれてプラットフォームごとにコンテンツの傾向が現れる。そして生き物のように日々その傾向はダイナミックに変化していく。 そして、あなたがこうしたプラットフォームに今から参加するのであれば、すでにプラットフォームで人気を集めている先行コンテンツの研究は不可欠だ。毎日7,000万人以上のユニークユーザーがプレイする、世界最大規模の“メタバース”
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
【WordPress】プラグインを使わずに投稿を公開するタイミングで自動でFacebookにも投稿する - Qiita
前回、【WordPress】プラグインを使わずに投稿を公開するタイミングで自動でTwitterにもツイートする、という投稿を書きましたが、今回はその続きで、Facebookに自動投稿する仕組みを実装してみます。 Twitterと同時にFacebookにも投稿できたら便利ですよね^^ 前回の投稿をまだ読まれていない方は、まずはそちらを読んでください。 Facebookへの投稿は、個人のタイムラインにではなく、自分が管理しているFacebookページに投稿することを前提にします。 やりたいこと WordPressの投稿の公開と同時にFacebookにも投稿する 投稿のテキストと一緒に画像も投稿する 自分が管理するFacebookページに投稿する Facebook SDKのセットアップ Facebook Developersの登録、およびFacebookにアプリ(Webサイト)の登録は、すでに完
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装 終わりに はじめに clip-pathプ
Swiper DEMO
#01 基本カード型 01 スライドの横幅は可変 前へ / 次へボタンだけがコンテンツ幅からはみ出る 前へ / 次へボタンはスライドに対して上下中央揃え
【実例付き】Photoshop(フォトショ)のスーパー解像度の使い方・注意点| 株式会社LIG
こんにちは、Webデザイナーのまっつーです。 フォトショ(Photoshop)のスーパー解像度の使い方について、実際の画像をお見せしながらわかりやすく紹介していきます。 この記事を読めば「提供された画像の画質が悪い…」「古い写真を使いたいが画質が悪い…」といった悩みが解決できます。 Photoshopのスーパー解像度とは 「スーパー解像度」とは一言でいうと、AIの技術で画像の解像度（画質）を格段にあげることできる機能です。 2021年Adobe Camera Raw v.13.2に追加された新しい機能で、Adobe Senseiという人工知能のAIが細部を自動的に補完し鮮明な画像に処理してくれます。（似ている機能で「ディテールを保持2.0」というものがありますが、期待できる効果は「スーパー解像度」の方が高くなります。） この機能を使うと画像の解像度は縦横それぞれ2倍のサイズになり、全体の解
GA4でボタンクリックを計測する方法【gtag編】｜ヨロコビーム
gtagでボタンクリックを計測するための流れ 大まかな流れとしては gtagを作成する gtagを計測したいボタンに設置する gtag作成時に作ったパラメータをカスタムディメンションとしてGA4に設置 正しく計測しているか確認 となります。 所要時間としては、恐らく15分ぐらいで終わるんじゃないかと思います。 ヨロコビームのサイドにYouTubeチャンネルへのボタンがありますが、ここがクリックされるとGoogleアナリティクスで計測するよう設定してあります。 今回は、その時に設定した方法を例に説明します。 １．gtagを作成する メモ帳などのテキストエディタを開きましょう。 そこに、下のようにgtagを打ち込みます。
PJAX - The advanced PJAX superior to SPA.
Features The pjax-api provides almost complete original web experience. Browser history fix Scroll position restoration Unexpected scroll prevention Scroll behaviors around hash links SPA on Pjax (Use JSON instead of HTML) More Modes Adding JSON APIs is the only change required on servers to enable SPA on Pjax. JSON(SPA) mode is statically and dynamically configurable per URL scope on browsers. No
高速かつスムーズなページ遷移を実現する pjax 覚書 - Qiita
★2018/04/13投稿 → Barba.jsを使った実装方法を書きました pjaxをざっと触ってみたので、自分用にメモ。 少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。 まだまだ使いこなせてないので、マスターしたい（切実） ★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/ 準備 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>
シームレスな画面遷移の実装 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
ページ遷移前後でアニメーション用のclassを付け外しします。 script.jslet mask = document.querySelector('.mask'); barba.init({ transitions: [ { async leave() { mask.classList.add('active'); await new Promise(resolve => { return setTimeout(resolve, 1000); }); }, afterEnter() { mask.classList.remove('active'); } } ] }); style.scss$ease-cubic-bezier: cubic-bezier(.165, .84, .44, 1); $color-lightgray: #f5f8fa; .mask { position: f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Base Mesh | 100% Free CC0 Assets
ゲーム企画書の作り方。製作の参考例。考え方｜うきょう|フリーゲームプロデューサー兼マーケッター（株スタジオデルタ代表）
Save 50% on Across the Obelisk on Steam
Stolen Realm on Steam