ネイティブJSでマウススライドによる愛の拡散効果を実現
|
この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。
以下はコード実装です。コピーして貼り付け、収集していただいて結構です。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>マウススライドのラブエフェクトを実現するネイティブ JS</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
フォント ファミリ: 'Microsoft YaHei'、サンセリフ;
}
体 {
高さ：100vh;
背景: #000;
オーバーフロー: 非表示;
}
スパン {
位置: 絶対;
背景: url(heart.png);
ポインタイベント: なし;
幅: 100ピクセル;
高さ: 100px;
背景サイズ: カバー;
変換: translate(-50%, -50%);
アニメーション: 2 秒の線形無限アニメーション;
}
@keyframes アニメーション {
0% {
変換: translate(-50%, -50%);
不透明度: 1;
フィルター: 色相回転(0度);
}
100% {
変換: translate(-50%, -1000%);
不透明度: 0;
フィルター: 色相回転(360度);
}
}
</スタイル>
</head>
<本文>
<スクリプト>
document.addEventListener('mousemove', (e) => {
本文を document.querySelector('body') とします。
heart = document.createElement('span') とします。
x = e.offsetXとする
y = e.offsetYとする
heart.style.left = x + 'px'
heart.style.top = y + 'px'
サイズ = Math.random() * 100 とします。
heart.style.width = サイズ + 'px'
heart.style.height = サイズ + 'px'
body.appendChild(ハート)
タイムアウトを設定する(() => {
ハート.削除()
}, 3000)
})
</スクリプト>
</本文>
</html>以下は上記のコードで紹介した画像 heart.png です。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法
Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...
html2canvas で破線境界線を実装する例
html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...
CSS3 は反転可能なホバー効果を実現します
CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...
Webデザイン: スクリプト素材でユーザーエクスペリエンスを再構築
<br />原文: http://blog.rexsong.com/?p=1166ウェブ...
emとは？emとpxの紹介と変換方法
それは何ですか？ em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)
この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...
HTML onfocus gain focus および onblur lose focus イベントの詳細な説明
HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...
Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く
MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...
ウェブサイトのビジュアルデザイン（画像とテキスト）における情報伝達の役割と方法
現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...
GZIP 圧縮 Tomcat と Web パフォーマンスの改善プロセス図
1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...
jsBridgeの動作メカニズムを1つの記事で学ぶ
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
MYSQLでプロシージャの名前を変更する方法の詳細な説明
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
Javascript の基礎: 演算子とフロー制御の詳細な説明
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
JavaScript における var と let の違い
目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...
ウェブサイト製品設計の参考となるいくつかの原則
以下の分析は製品設計原則に関するものですが、そのほとんどはウェブサイト製品に基づいているため、ユーザ...