butterflies

記録

超簡単なコード🦋マウス追従をする。 #javasriptcode

おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。

そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです(尺も短いし…)。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

余談:
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

オクトパストラベラー壱と弐が良さげ #マルチプラットフォーム #RPG前のページ

ブログ記事を書く作業/一コマ(キーボードが弾まない) #blog #vlog次のページ

関連記事

  1. 記録

    固定概念にとらわれない生き方。

    おはよう御座います。もう…言うことがありません。わかるわ~今…

  2. 記録

    ChatGPT。#コードレッド 検索業界に激震。

    おはようございます、今日からリモートワークで初仕事が始まります。仕事…

  3. 記録

    モーショングラフィックスの上手い人たち。

    モーショングラフィックスの上手い人たち、この分野、まさしくセンスがな…

  4. 記録

    Raspberry Pi 2を使った自作IoT体験キットが玄人志向から売られてた。

    Raspberry Pi 2を使った自作IoT体験キットが玄人志向か…

  5. 記録

    質問箱とask.fmの違い

    質問箱とask.fmの違いは質問箱は匿名質問箱で誰でも質問OKなとこ…

  6. 記録

    この頃の疑問。性格診断や手相って当たるのか?

    名前占いや手相って当たるのか?なんとく当たっている気がするし、統計…

2022年11月
 123456
78910111213
14151617181920
21222324252627
282930  

カテゴリー

アーカイブ

PAGE TOP