butterflies

Logging

超簡単なコード🦋マウス追従をする。 #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にアップしているので参照してみてくださいな(音楽は軽やかなんですけど…😅)。







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

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

    関連記事

    1. Logging

      米津玄師の読み方をいまも忘れかけてしまう。ハチは覚えているのに・・・。

      米津玄師、よねずけんしと読みます。自分の中では米?の人ですが、人の名…

    2. Logging

      #NHK #TECHNE テクネ:映像の教室っていう番組がNHKで放送されているですけど(゚Д゚)

      テクネ:映像の教室っていう番組がNHKで放送されているですけど、これ…

    3. Logging

      映画、マネー・ショート華麗なる大逆転を観てきましたので #映画レビュー

      映画、マネー・ショート華麗なる大逆転を観てきましたので感想なんかを残…

    4. Logging

      Chromium OSをインストールして再利用した(´・ω・`)

      古いEee PCにChromium OSをインストールして再利用しま…

    5. Logging

      かなり先駆者だと思います、吉田が巨大な物を作ってますよ。

      シュールな漫画(絵日記)を書くおじさんです、30代がおじさんかおじさ…

    6. Logging

      FF7RのDEMOをプレイしてみて。

      FF7RのDEMOをプレイしてみて思った。これは期待以上の仕上…

    2022年11月
     123456
    78910111213
    14151617181920
    21222324252627
    282930  

    カテゴリー

    アーカイブ

    PAGE TOP