アニメーションライブラリ「Tween24.js」正式リリース！ 相対値や曲線移動などバージョン1.0の新機能 - ICS MEDIA
アニメーションライブラリ「Tween24.js」正式リリース！ 相対値や曲線移動などバージョン1.0の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2022年3月のアップデートでは6つの新しい機能を追加し、バージョン1.0として正式リリースとなります。 正式リリースでメジャーバージョンが変わりますが、仕組みの変更はなく下位バージョンとの互換性があるため、すでにお使いの方もそのまま利用いただけます。 基本的な使い方や導入方法を知りたい方は、記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 今回のアップデート内容 新機能：曲線的に座標移動させるbezier() 新機能：設定時からの相対値でトゥイーン
Three.jsを使って画像からパーティクルアニメーションを実装する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、くりちゃんです。 今回はThree.jsを使って画像からパーティクルアニメーションを実装したいと思います。パーティクルアニメーションを実装するうえでパーティクル一個一個の位置情報は絶対必要になりますよね。前回の記事ではジオメトリーを元に位置情報を設定していましたが、今回は画像から位置情報を抜き取ります。 そこでCanvasAPIのgetImageDataというメソッドを使用してcanvas要素からピクセル情報をImageDataオブジェクトの形式で取り出します。 試しにLIGのロゴ画像を用意してピクセル情報を取得してみます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = 868; const height = 464; can
新Edgeでクリック時にmousemoveイベントが発火される問題 | バシャログ。
こんにちわ。山崎です。最近更新できておらず、久々の投稿になります。 今回はとあるプロジェクトの開発中に2020年1月15日にリリースされた新Egdeでの不具合を見つけたのでそれについて書いていこうと思います。 何を作っていたのか イベントサイトの会場マップでそのマップをドラッグしたらマップの位置を移動し、 クリックしたら該当の小間番号のモーダルが開き詳細が見られるというものです。 実際のソースコードを載せることはできないので、今回複数の企業が合同セミナーイベントを行うという程でかなり簡易的なものですがdemoを作ってみました。 デモはこちら 画面収録 2020-06-29 16.35.25.mov ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>EdgeとChromeでclick時にmousemoveが発火
Google Maps URLで現在地からのルートを「交通手段別」で作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
参考URL 今回記事を書くにあたって、以下を参考にさせていただきました。 https://developers.google.com/maps/documentation/urls/guide#directions-action https://qiita.com/yukishiba/items/ac6c9dfb4f5a5510744c 最初はGoogleMapを開いて、現在地から目的地を検索、アドレスバーに表示されるURLをコピーして使うのかな？ と思っていたのですが、それだと現在地に固定の経度緯度が割り当てられて、動的にすることができないんですね。 なので、公式が用意してくれている雛形からちゃんと作る必要があります。 雛形 こちらです。参考記事を抜粋したものになります。 // 座標を使う場合 https://www.google.com/maps/dir/?api=1&destinat
数学の時間はいつも寝ていたフロントエンドエンジニアが使うささやかなスニペット | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、フロントエンドエンジニアのヒガです。 中学生のころまでは数学が好きでした。しかし、気づけば高校に入学した年の夏以降、数学の授業はだいたい寝るようになっていました。それ以外もですが。あまりの眠気に2問だけ解いた数学のテスト、ふたつとも間違えて0点だったのは未だに記憶に残っています。 あれから十数年。いまでは、フロントエンドエンジニアとして働く上で、数学の愛しさと切なさと心強さを感じています。直接的な数学の話ではないのですが、いくつかのスニペットを、どのような場合に使ったかの話を交えてお伝えします。 範囲と停止と繰り返し（JavaScript） たとえばスライダーなどのオプションには、たいていループの設定があります。これは範囲を超えた場合にどう処理するかとういことです。基本的には2つの処理があります。 範囲を超えさせない（ループしない） 範囲を超えると反対の端点にいく（ループする） こ
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
Geomapify
Incontri gay a lecce massaggi erotici ancona escort annunci escort a modena ricerche partner tivoli escort Massaggi gallarate massaggi pisa escort a torino veronaincontri escort senigallia trans a terni Bakekaincontri asti annunci incontri milano www bakeka incontri incontri saronno incontri cs recensioni trans milano, Femme nue porno massage erotique lorient bakeca incontri tp ragazze porche mila
caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT
最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられます。IDEではよく見られる機能ですが、入力箇所（キャレット）を正しく取得しないと、逆に文字入力を妨げることになるでしょう。 そこで使ってみたいのがcaretposition.jsです。テキストエリアにおけるキャレットの位置をXY座標で取得できます。 caretposition.jsの使い方 デモです。左下にキャレットの座標が表示されています。 こんな感じで入力中も変化しています。 別なデモです。キャレットの位置に入力補完用のラベルを表示しています。 入力した後に戻ってもちゃんと追従されます。 caretposition.jsを使うとキャレットの位置がXY座標で取れますので、後はそれを使ってCSSで情報を表示すればいいでしょう。日本語特有の文字変換にも追従するので様々な利用が考えられそうです。 c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
