ブログ上の雪の結晶が画面を超えても表示されるようにする_jquery
先日、庭に雪の結晶を作ったブログの記事を拝見したので、早速ブログに載せてみましたが、言うまでもなくとても綺麗です。しかし、しばらく見てみると、そのページが特に引っかかっていることに気づきました。
コードを見てみると、オリジナルの作者は複数の小さな div の雪の結晶をボディに挿入し続け、ゆっくりと下に向かって浮かせた後、雪の結晶を削除していました。
でも、実際には画面の向こうにページは見えないので、雪の結晶が浮かんでいても意味はありません。
そこで、元のコードを少し変更して、(本体の下部ではなく) 画面の上部から画面の下部にのみ落ちるようにし、雪の結晶を削除して、雪の結晶の位置を固定に変更しました。
ページを更新したところ、さらに良くなりました。次に、変更したコードを投稿してみんなと共有します。
追記: オリジナルの作者へのリンクが見つかりませんでした。著作権はオリジナルの作者に帰属します:)
(function($){
$.fn.snow=function(options){
var $flake=$('< div />')
.css ({
'position':'fixed',//'absolute',
'top':'-50px',
'z-index' :'1000'
})
.html('❄');
var documentHeight=document.documentElement.clientHeight;//$(document).height(); (ドキュメント).width();
var デフォルト={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};
var options=$.extend({},defaults,オプション);
var interval=setInterval( function(){
var startPositionLeft=Math.random()*documentWidth-100;
var startOpacity=0.5 Math.random();
var sizeFlake= options.minSize Math.random()*options.maxSize;
var endPositionTop=startPositionLeft-100 Math.random()*200; .random()*5000;
$ flake.clone()
.appendTo('body')
.css({
left:startPositionLeft,
opacity:startOpacity,
'font-size':sizeFlake,
color:options.flakeColor
})
.animate({
top:endPositionTop,
left:endPositionLeft,
opacity:0.2 },
durationFall,
'linear',
function(){
$(this).remove();
}); //interval End
};// $.fn.snow End
})(jQuery);
$.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'});

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

ゼロから始めて、Flask をインストールし、個人ブログをすぐに構築する方法を段階的に説明します。書くことが好きな人にとって、個人ブログを持つことは非常に重要です。軽量の Python Web フレームワークである Flask は、シンプルで完全に機能する個人ブログを迅速に構築するのに役立ちます。この記事では、ゼロから始めて、Flask をインストールして個人ブログを迅速に構築する方法を段階的に説明します。ステップ 1: Python と pip をインストールする 開始する前に、まず Python と pi をインストールする必要があります

ブログとは、ウェログ、ブログ、ブログとも訳され、通常は個人によって運営され、随時新しい記事が投稿されるウェブサイトです。では、どうやってブログを開設すればいいのでしょうか? PHP ブログ システムとは何ですか?どのブログ システムを使用するのが最適ですか?以下の PHP 中国語 Web サイトでは、トップ 10 のオープンソース PHP ブログ システムを要約して共有します。

インターネットの発展に伴い、ブログはますます多くの人々が自分の生活、知識、アイデアを共有するプラットフォームになりました。自分のブログも作成したい場合は、この記事で PHP と SQLite を使用して簡単なブログを作成する方法を紹介します。ニーズを決定する ブログを作成し始める前に、実現したい機能を決定する必要があります。例: ブログ投稿の作成 ブログ投稿の編集 ブログ投稿の削除 ブログ投稿のリストの表示 ブログ投稿の詳細の表示 ユーザー認証と権限制御 PHP と SQLite のインストール PHP と S をインストールする必要があります

インターネットの普及に伴い、ブログは情報の普及とコミュニケーションにおいてますます重要な役割を果たしています。このような状況で、ますます多くの人が自分のブログ サイトを構築し始めています。この記事では、PythonDjango フレームワークを使用して独自のブログ Web サイトを構築する方法を紹介します。 1. PythonDjango フレームワークの概要 PythonDjango は、Web アプリケーションを迅速に開発するために使用できる無料のオープンソース Web フレームワークです。このフレームワークは、開発者が豊富な機能を構築できる強力なツールを提供します。

PHP を使用して簡単なブログを作成する方法 1. はじめに インターネットの急速な発展に伴い、ブログは人々が経験を共有し、生活を記録し、意見を表現するための重要な方法となっています。この記事では、PHPを使って簡単なブログを作成する方法を、具体的なコード例とともに紹介します。 2. 準備 開始する前に、次の開発環境が必要です: PHP インタプリタと Web サーバー (Apache など) がインストールされたコンピュータ、MySQL などのデータベース管理システム、テキスト エディタまたは IDE3

ブログを作成するには、ブログのトピックと対象読者の決定、適切なブログ プラットフォームの選択、ドメイン名の登録とホスティングの購入、ブログの外観とレイアウトのデザイン、高品質のコンテンツの作成、ブログの宣伝、分析と分析を行います。それを改善することです。

この記事では、必要なソフトウェアのインストール、設定、基本的な使用方法など、CentOS システムにブログをインストールして構築する方法を詳しく紹介し、記事の最後に Linux の知識を少し共有します。インターネット技術の継続的な発展に伴い、ブログを使用して自分の生活を記録し、知識を共有することを選択する人が増えています。人気のある Linux ディストリビューションとして、CentOS は安定性と安全性が高く、ブログの構築に適しています。この記事では、手順の詳細を紹介します。 CentOS でのブログのインストールと設定について説明します。インストール前の準備 1. CentOS オペレーティング システムがインストールされており、インターネットに接続できることを確認します。 2. Linux コマンドライン操作の基本的な知識がある。 Apache サーバーのインストール 1. ターミナルを開き、次のコマンドを使用します。

Croogo フレームワークは、開発者が Web サイトの機能と外観をカスタマイズできるようにするモジュール式およびプラグイン アーキテクチャを提供する、柔軟で拡張可能な PHP フレームワークです。この記事では、ブログ開発に Croogo フレームワークを使用する方法を紹介します。 Croogo フレームワークをインストールする Croogo フレームワークを使用してブログを開発する前に、Croogo フレームワークをインストールする必要があります。 Croogo フレームワークの最新バージョンを公式 Web サイトからダウンロードし、公式ドキュメントの指示に従ってインストールできます。ブログモジュールCをインストールする
