クリスマスと元旦のWordPress雪降りエフェクトプラグインとJSコード共有

個人ブロガーにとって、祝祭日などにサイトに何かエフェクトを加えたいと思う人は少なくありません。寒くなってくるとクリスマス、元旦、春節が近づいてきますので、事前にいくつかのWordPressサイト用雪降りプラグインとJSコードを皆さんに共有します。WordPressサイト雪降りプラグインとJSコード。

サイト雪降りプラグイン

Snow My WP

Snow My WPこのプラグインは使い方が非常に簡単で、ダウンロードして有効化すると、サイトのフロントエンドにランダムな雪の結晶画像が表示されます。設定項目はなく、雪降りエフェクトが不要な時は直接プラグインを無効化すればOKです。ダウンロードリンク

WP Snow - Best Snow Effect Plugin

WP Snow - Best Snow Effect Pluginこの雪降りプラグインには設定画面があり、雪の結晶の大きさや色を設定でき、さらに文字が降るエフェクトを表示する設定も可能です。好きな人がいるなら、クリスマスにいくつか告白の言葉を試してみるのもいいでしょう。このプラグインは無料です。おすすめ。このプラグインは、美しいアニメーション雪の結晶や他のタイプの雪片を作成できます。例えば、様々なアイコンを雪の結晶として使用したり、カスタムテキストなどを設定できます。

特徴

• カスタム雪片レイアウト–雪のように降る独自のカスタムテキストを追加
• Flakes Fonts 統合– フォントをカスタマイズ可能で、Fontawesomeアイコンエフェクトも選択可
• 特定の投稿やページでのみ雪片を表示（カスタム投稿タイプもサポート）
• 雪片の色をカスタマイズ–ランダムに割り当てる複数の色も設定可能
• 雪片フォントをカスタマイズ–ランダムに割り当てる複数のフォントも設定可能
• カスタムフレークスタイルを追加–各フレークにカスタムCSSスタイルを追加し、無限の可能性を実現
• 設定内で直接雪片を無効化–これにより、これまで以上に迅速に雪片を制御可能
• 一度に表示される雪片の数をカスタマイズ
• 雪片の降下速度をカスタマイズ
• 雪片の最大・最小サイズをカスタマイズ
• 雪片アニメーションのリフレッシュ速度を変更してパフォーマンスを最適化
• 雪片のz-indexをカスタマイズ
• 上級開発者向けフック

ダウンロードリンク

Weather Effect

Weather Effect – Christmas effect, snow effectは天気エフェクトプラグインで、雪だけでなく、サンタクロースやクリスマスソックスも降らせることができます。複数のエフェクトを持つWeather Effectプラグイン（冬、新年、秋、ハロウィン、夏、春、雨、感謝祭、バレンタイン）。これは新しい„Weather Effect WordPress Plugin“で、Irresistible CSSとJSをベースにしているため、非常に魅力的で使いやすいです。最高のWordPress Weather Effectプラグインで、数回クリックするだけでサイトを美しく飾ることができます。天気や場面に応じて、多くの降下エフェクトがあり、自分の考えに合わせてエフェクトを選択でき、ユーザーは自身のサイトに10種類以上の降下エフェクトを追加できます。Weather Effect WordPressプラグインは、あらゆるサイトに特別な降下エフェクトを持つ唯一のプラグインで、Weather Effect WordPressプラグインを使用して、どんな天気や場面にも合わせてサイトを飾ることができます。このWeather Effectプラグインは、シンプルな設定項目しかなく、ショートコードもないため、新旧ユーザーどちらにも最適です。設定を構成し、保存ボタンで設定を保存するだけで非常に簡単に使用できます。このWeather Effectは有料プラグインですが、無料の機能でも十分使えるので、検討する価値はあります。ダウンロードリンク

雪降りエフェクトJSコード

JSコードはウェブサイトのテーマソースファイルを修正する必要があります。もし不慣れな場合は、上記で推奨したプラグインを使用することをお勧めします。雪の降るエフェクト。 エフェクトの効果は下図の通りで、雪の結晶はコード1の効果、白い点はコード2の効果です。jsコードは張戈博客。

雪降りJSコードその一

<script type="text/javascript">
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.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()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
</script>

雪降りJSエフェクトその二

<script type="text/javascript">
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) { setTimeout(callback, 1000 / 60); };
 
    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function(){
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function() {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
        this.size = Math.random() * flakeSize + 2;          /* 形状 */
        this.maxSize = flakeSize;                           /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
        this.fallSpeed = fallSpeed;                         /* 坠落速度 */
        this.velY = this.speed;                             /* Y方向速度 */
        this.velX = 0;                                      /* X方向速度 */
        this.stepSize = Math.random() / 30;                 /* 步长 */
        this.step = 0                                       /* 步数 */
    }
    flakeMove.prototype.update = function() {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;
 
        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function(width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
    flakeMove.prototype.render = function(ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function() {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({maxFlake:500});
    snow.start();
</script>

JSコード使用方法

方法①、いずれかのJSコードをコピーし、ウェブサイトの</body>タグの前に貼り付けます。 方法②、コードの前後の<script **>タグを削除し、コードをjsファイルとして保存し、最後にウェブサイトで参照します。 Ps：効果がない場合は、ウェブページがJQueryをロードしているか確認してください。ロードされていない場合は、雪の降るコードの前にJQを導入してください。 以上がクリスマスと元旦のWordPress雪降りエフェクトプラグインとJSコード共有の全内容です。もしより美しいウェブページエフェクトをお持ちでしたら、ぜひ共有してください。