特效二

结语

以上二种情势,第1种只呈现雪花,第3种因为使用的
jQuery,大家得以设置展现为其余小图标。注意调整彰显数量和颜料,依照自身的网址背景配色等调整突显效果。

Tips

自定义方法:详细的可自定义字段 GitHub 上小编曾经写出来了,修改 JS
文件中相应字段即可。那里提几点。

  • 雪花颜色:白雪暗中认可颜色以土褐为主,即使网址背景是煤黑的会呈现不肯定,能够变更为其它颜色组合(十6进制颜色码);
    • 水彩参考:

image.png

  • 飞雪形状:该特效的雪片大旨为字符符号,能够更改为此外雪花符号,通过改动字体来改变呈现效果。
    • 形状参考:*、✽、✲、✻、✼、❄、❅、❆、……

前言

意识了七个能够给网址添加雪花飘洒特效的章程,不难方便,能够自定义突显效果和图表。计算下分享给大家。以
WordPress 为例,别的体系网址添加到相应岗位即可。

snow-龙猫-min.gif

简介

特征:

  • 该冰雪为字符符号,非图片;
  • 可自定义雪花字符、大小、颜色、数量、飘落速度、区域等。

意义体现:

snow-min.gif

动用方式

  1. 下载相关文件,将 snow.js(或收缩后的 snow.min.js)上传至网站根目录;
  2. 编辑宗旨的页脚文件 footer.php ,将如下代码添加到 </body>
    标签前;

其中:src="snow.js" 引号内为引用的 JS 文件路径

<script type="text/javascript" src="snow.js"></script>
<script type="text/javascript">
  var snow = new Snow();
</script>

简介

特征:

  • 该特效能够显得为字符或图表,那样就不囿于于雪花了;
  • 修改突显数量。

意义体现:自作者设置彰显内容为图片

cat-min.gif

Tips

自定义方法:体现的图腾在 .html('图案')
的引号中。能够使用字符、图片。

  • 突显字符

image.png

  • 来得图片

使用 <img src="" width="24px"/> ,其中 src=""
的引号中为图片地址,width="24px" 修改图片大小。

image.png

图形能源:IconfinderIconfont
图床:TinyPicSM.MS

增进显示随机颜色成效

笔者的源代码里只设置了壹种彰显颜色,这里自个儿添加了少数代码,设置为能够从钦赐颜色中私行获得颜色显示。

转移如下:

一、首先删除代码中 default 的暗许颜色设置:

image.png

贰、然后在上面添加如下代码:

function randomColor() {
  var flakeColor = new Array("#FFDA65", "#00BFFF", "#BA55D3", "#FFA07A", "#fbfcff", "#87CEEB", "#FFB6C1", "#00FFFF");
  var snowColor = flakeColor[Math.floor(flakeColor.length * Math.random())];
  return snowColor;
}

image.png

三、最终将颜色修改为 randomColor

image.png

完成。<( ̄︶ ̄)>

利用方法

将以下代码添加至页脚 </body> 标签前。

<script type="text/javascript">
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
    documentHeight  = $(document).height(),
    documentWidth   = $(document).width(),
    defaults = {
        minSize     : 10,
        maxSize     : 20,
        newOn       : 1000,
        flakeColor  : "#AFDAEF"  //雪花颜色
    },
    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 文件后在网页中调用。

注意:因为使用的 jQuery,须确定保证调用该代码前曾经加载好 jQuery。

特效一

相关文章

网站地图xml地图