记录成长
分享快乐

WordPress评论框添加输入内容礼花绽放及页面抖动效果

经常看到许多网站上当我们输入评论的时候会出现一些礼花绽放的效果,还有一些网站输入内容后网站页面会抖动起来,其实这些内容都是通过 JavaScript 代码来实现的,今天闲着无聊从网上筛选了一些代码,整理一下分享出来,希望能够帮助大家尽快实现这一功能。

核心JS代码

将以下代码复制下来新建一个 .js 格式的文档,并以 activate-power-mode.js 命名之。

(function webpackUniversalModuleDefinition(root, factory) {
    if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
    else if (typeof define === 'function' && define.amd) define([], factory);
    else if (typeof exports === 'object') exports["POWERMODE"] = factory();
    else root["POWERMODE"] = factory()
})(this,function() {
    return (function(modules) {
        var installedModules = {};
        function __webpack_require__(moduleId) {
            if (installedModules[moduleId]) return installedModules[moduleId].exports;
            var module = installedModules[moduleId] = {
                exports: {},
                id: moduleId,
                loaded: false
            };
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
            module.loaded = true;
            return module.exports
        }
        __webpack_require__.m = modules;
        __webpack_require__.c = installedModules;
        __webpack_require__.p = "";
        return __webpack_require__(0)
    })([function(module, exports, __webpack_require__) {
        'use strict';
        var canvas = document.createElement('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
        window.addEventListener('resize',
        function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight
        });
        document.body.appendChild(canvas);
        var context = canvas.getContext('2d');
        var particles = [];
        var particlePointer = 0;
        POWERMODE.shake = true;
        function getRandom(min, max) {
            return Math.random() * (max - min) + min
        }
        function getColor(el) {
            if (POWERMODE.colorful) {
                var u = getRandom(0, 360);
                return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'
            } else {
                return window.getComputedStyle(el).color
            }
        }
        function getCaret() {
            var el = document.activeElement;
            var bcr;
            if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
                var offset = __webpack_require__(1)(el, el.selectionStart);
                bcr = el.getBoundingClientRect();
                return {
                    x: offset.left + bcr.left,
                    y: offset.top + bcr.top,
                    color: getColor(el)
                }
            }
            var selection = window.getSelection();
            if (selection.rangeCount) {
                var range = selection.getRangeAt(0);
                var startNode = range.startContainer;
                if (startNode.nodeType === document.TEXT_NODE) {
                    startNode = startNode.parentNode
                }
                bcr = range.getBoundingClientRect();
                return {
                    x: bcr.left,
                    y: bcr.top,
                    color: getColor(startNode)
                }
            }
            return {
                x: 0,
                y: 0,
                color: 'transparent'
            }
        }
        function createParticle(x, y, color) {
            return {
                x: x,
                y: y,
                alpha: 1,
                color: color,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function POWERMODE() {
            {
                var caret = getCaret();
                var numParticles = 5 + Math.round(Math.random() * 10);
                while (numParticles--) {
                    particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
                    particlePointer = (particlePointer + 1) % 500
                }
            } {
                if (POWERMODE.shake) {
                    var intensity = 1 + 2 * Math.random();
                    var x = intensity * (Math.random() > 0.5 ? -1 : 1);
                    var y = intensity * (Math.random() > 0.5 ? -1 : 1);
                    document.body.style.marginLeft = x + 'px';
                    document.body.style.marginTop = y + 'px';
                    setTimeout(function() {
                        document.body.style.marginLeft = '';
                        document.body.style.marginTop = ''
                    },
                    75)
                }
            }
        };
        POWERMODE.colorful = false;
        function loop() {
            requestAnimationFrame(loop);
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < particles.length; ++i) {
                var particle = particles[i];
                if (particle.alpha <= 0.1) continue;
                particle.velocity.y += 0.075;
                particle.x += particle.velocity.x;
                particle.y += particle.velocity.y;
                particle.alpha *= 0.96;
                context.globalAlpha = particle.alpha;
                context.fillStyle = particle.color;
                context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(loop);
        module.exports = POWERMODE
    },
    function(module, exports) { 
        (function() {
            var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize'];
            var isFirefox = window.mozInnerScreenX != null;
            function getCaretCoordinates(element, position, options) {
                var debug = options && options.debug || false;
                if (debug) {
                    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
                    if (el) {
                        el.parentNode.removeChild(el)
                    }
                }
                var div = document.createElement('div');
                div.id = 'input-textarea-caret-position-mirror-div';
                document.body.appendChild(div);
                var style = div.style;
                var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
                style.whiteSpace = 'pre-wrap';
                if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';
                style.position = 'absolute';
                if (!debug) style.visibility = 'hidden';
                properties.forEach(function(prop) {
                    style[prop] = computed[prop]
                });
                if (isFirefox) {
                    if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'
                } else {
                    style.overflow = 'hidden'
                }
                div.textContent = element.value.substring(0, position);
                if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");
                var span = document.createElement('span');
                span.textContent = element.value.substring(position) || '.';
                div.appendChild(span);
                var coordinates = {
                    top: span.offsetTop + parseInt(computed['borderTopWidth']),
                    left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
                };
                if (debug) {
                    span.style.backgroundColor = '#aaa'
                } else {
                    document.body.removeChild(div)
                }
                return coordinates
            }
            if (typeof module != "undefined" && typeof module.exports != "undefined") {
                module.exports = getCaretCoordinates
            } else {
                window.getCaretCoordinates = getCaretCoordinates
            }
        } ())
    }])
});

代码比较多,为了避免大家复制错误,我在文后会提供代码的下载,有需要的同学可以直接下载。

JS代码引入

将上面的核心代码保存成单一 js 文件后,将 activate-power-mode.js 文件丢到主题目录下任意位置(一般为主题的 js 文件夹中),记住该文件路径,将其替换为下面代码中的路径即可。然后将下面这段代码丢到主题的 footer.php 文件中即可。

<!-- 评论框礼花绽放效果-->
<script src="<?php bloginfo('template_directory'); ?>/diy/js/activate-power-mode.js "></script>
<script>
    POWERMODE.colorful = true; // ture 为启用礼花特效
    POWERMODE.shake = false; // false 为禁用震动特效
    document.body.addEventListener('input', POWERMODE);
</script>

代码中礼花绽放于页面震动效果可自主开启,大家根据自己需要开启即可。

蝈蝈下载面板

恭喜,此资源为免费资源,请先
注意:本站资源多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:blog.quietguoguo.com。
赞(1) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » WordPress评论框添加输入内容礼花绽放及页面抖动效果
分享到: 更多 (0)

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #5

    不错喜欢

    骚九   | Windows 7 | Chrome 49.0.2623.87 | 2周前 (11-08)回复
  2. #4

    看看效果

    如是   | Windows NT | Chrome 64.0.3282.140 | 2周前 (11-04)回复
  3. #3

    我发现不管是本地引用JS还是外链引用JS特效都很卡这是为什么?

    相信   | 未知操作系统 | Firefox 62.0 | 2个月前 (09-27)回复
  4. #2

    看看效果

    QQ游客   | Windows NT | Chrome 63.0.3239.132 | 3个月前 (08-30)回复
  5. #1

    最近发现这个特效很火,好多网站都添加了。

    adminsea   | Windows NT | Chrome 65.0.3325.181 | 8个月前 (04-06)回复
    • @ adminsea 嗯嗯,这个小效果还是很不错的。

      蝈蝈要安静     | Windows NT | Chrome 65.0.3325.181 | 8个月前 (04-07)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏