「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
@babel/preset-env (Babel 7)をハンズオンでちゃんと理解する
@babel/preset-env とは @babel/preset-env は、 babel プラグインのプリセットのことです。 そもそも babel の本体(@babel/core)は、「JSコードを入力として受け取り、ASTに変換後、何らかの変換処理を行い、変換後のASTから再度JSコードを出力すること」が責務であり、 何らかの変換処理を指定しなければ、何のトランスパイルも行われません。 この 何らかの処理 に該当する実装がbabelプラグインのことで、開発者は実現したいトランスパイルに応じて適切な babel プラグインを適用する設定を記述する必要があります。 ...でも面倒ですよね？ 単純にIEを含む主要なブラウザで一通りのES6コードを動かしたいだけというのがだいたいのユースケースです。 そんな時、対応ブウラウザなどの大雑把な情報を元に、必要なプラグインを自動で選択して、最新の
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
【IE11対応】position sticky でスクロール中に固定表示する方法 | 実践的Web開発メソッド
スクロール量に応じて、要素を特定の位置に固定表示する方法をご紹介します。 数年前は、Javascriptを利用して、スクロールの量に応じてCSSのposition fixedを付け外しするような事をやっていましたが、position stickyを利用すると簡単に実装することが出来ます。 こちらにPosition Stickyのデモを作成しました。 メディアなどでよく見かけるような、スクロールしてもサイドバーが固定表示されるUIです。 position stickyとはMDN Web Docs によると、下記のように説明されています。 包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱
The Intersection Observer API
The Intersection Observer API is a Web platform API that allows for observing changes to how much of a target element’s area intersects with that of an ancestor element or the viewport. The need for such information has a lot of use cases, such as implementing lazy-loading and infinite scrolling, just to name a few. It’s been historically difficult to obtain such information, and common solutions
[Javascript] Promise/A+仕様を、チュートリアル形式で詳しく解説します - YoheiM .NET
こんにちは、@yoheiMuneです。 JavaScriptの実装において、「Promise」を聞いたことがある方も多いのではないでしょうか。 今回は、JavaScriptにおけるPromise/A+を深く学ぶことができる記事を翻訳しました。その内容を紹介したいと思います。 Special Thanks to https://flic.kr/p/b5bNqv 翻訳について 本記事は、Matt GreerのJavaScript Promises ... In Wicked Detailの翻訳記事です。翻訳するにあたり、ご本人から許可を頂いています。 本記事では、JavaScriptにおけるPromiseの仕様がどっぷりと解説されていますので、お時間を割いて読んで頂く価値があると思います！ それでは、始まりますー！！ はじめに 私はJavaScriptを使った開発において、長らくPromise
![[Javascript] Promise/A+仕様を、チュートリアル形式で詳しく解説します - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/6268195bcac7935caf735993226dda0f63b569f1/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F326.jpg)
[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はNodeJSやフロントJSで利用可能な、EventEmitterを使った、イベント駆動な実装方法をブログに書きたいと思います。 目次 本記事を試すための環境 この記事の内容は、nodejsで動作します。新し目のバージョンでお試しください（僕の環境ではv6.2.2で動作確認しています）。 また、BabelでフロントエンドビルドやWebpackでフロントエンドビルドを使えば、フロントエンドでもEventEmitterを利用可能です（いくつかのプロジェクトで利用されているのを見かけたことがあります）。 EventEmitterとは EventEmitterは直訳の通り、イベントを発火することができる機能で、主に「イベントを発火する人」と「イベントを受け取る人」の大きく2つに使い方が分かれます。具体的には、 イベントを発火する人 関数名 説明 という感
![[Javascript] イベント駆動型の設計ができるEventEmitterに入門 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebe6155d1a3add398b3612821db040e9cb671b95/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F474.jpg)
THREE.MeshLineで、ヌルヌル動く線を作ろう！ - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
画像にアニメーションを加えて、Webページのスクロールを滑らかにしてみる - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード この記事では、HTMLによってviewpoint内の画像に少しのアニメーションをくわえ、Webサイトにスムーズなスクロール効果を追加する方法をご紹介します。 ここで言う「スムーズなスクロール」とは、ある要素までクリックひとつでスムーズに移動することではなく、画像のアニメーションによるスムーズなスクロール効果のことを指します。 なぜ画像にスクロールを滑らかにすべきなのか 画像によるスムーズなスクロール効果を、Webページに実装するメリットは何でしょうか？ これまでにスクロールのアニメーションを実装したことがある人なら、ブラウザでコンテンツを表示した時に「ページがガタつく」のを経験したことがあるかもしれません。とくに画像の場合、スクロール時にページがカクカクすることがよくあります。 これでは見た目も使い心地も、良いとはいえません。 この問題を解決するために「本来
Node.jsアプリケーションを、実行可能ファイルにまとめるnexeを試す - CLOVER🍀
Node.jsを使って作成したアプリケーションを、単一の実行可能ファイルにまとめる方法はないかなぁと思って 調べてみました。 deployment - How do I deploy Node.js applications as a single executable file? - Stack Overflow nexeというものが、自分の要求にマッチしそうです。 GitHub - nexe/nexe: 🎉 create a single executable out of your node.js apps Electronは、ちょっと違います。どちらかというと、CLIツールなどを対象にして使うようなものを想定しています。 というわけで、試してみるとしましょう。 nexeとは 機能は、こちらに書いてあります。 Motivation and Features Node.jsおよびnp
JavaScriptで円周上の座標を求める方法
2017/08/06 円周上の座標を求める公式を、JavaScriptで実装します。 サンプルコード原点A(x1,y1)、半径r、角度θとする時、円周上の座標B(x2,y2)は次の公式で求められます。 公式をJavaScriptで表現すると、次の通りです。角度はラジアン単位で取り扱う点にご注意下さい。 var x2 = x1 + radius * Math.cos( angle * (Math.PI / 180) ) ; var y2 = y1 + radius * Math.sin( angle * (Math.PI / 180) ) ;デモコードを編集して、値にどのように反映されるのか確認してみて下さい。 var x1 = 0 ; var y1 = 0 ; var r = 100 ; var a = 45 ; var x2 = x1 + r * Math.cos( a * (Math.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DoomFirePSX/flames.html at master · fabiensanglard/DoomFirePSX
https://codepen.io/rachsmith/post/animation-tip-lerp
QuickTip: Stagger effects with cycle - Learning Center - GreenSock
TweenMax.staggerTo() with Cycle
Animating array of items in a staggered way
Progress Bars for Promise.all
Smooth scrolling and inner image animation | Codrops