你有没有想要自己网站的网址在浏览器地址栏中屁股跟着 一个特效?今天我就来跟你们分享如何搞这个东西,结果演示看下图。有没有被心动?

是不是很酷炫?感觉品如的衣服都被我给偷过来了!哈哈哈哈。

这是一个外国老哥发现的东西,然后在他网站上贴出来的,就是操作浏览器。一段js代码,js是“utf-8”格式即可,当然了,酷炫的不只我用的这个,还有更多酷炫的,出于本站构造,只兼容这个浮动。以下是一些其他效果。

表情:

    var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];

    function loop() {
        location.hash = f[Math.floor((Date.now()/100)%f.length)];

        setTimeout(loop, 50);
    }

    loop();

时间:

    var video;

    function formatTime(seconds) {
        var minutes = Math.floor(seconds/60),
            seconds = Math.floor(seconds - (minutes*60));

        return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
    }

    function renderProgressBar() {
        var s = '',
            l = 15,
            p = Math.floor(video.currentTime / video.duration * (l-1)),
            i;

        for (i = 0; i < l; i ++) {
            if (i == p) s +='◯';
            else if (i < p) s += '─';
            else s += '┄';
        }

        location.hash = '╭'+s+'╮'+formatTime(video.currentTime)+'╱'+formatTime(video.duration);
    }

    video = document.getElementById('video');
    video.addEventListener('timeupdate', renderProgressBar);

黑体:

    function loop() {
        var s = '',
            p;

        p = Math.floor(((Math.sin(Date.now()/300)+1)/2) * 100);

        while (p >= 8) {
            s += '█';
            p -= 8;
        }
        s += ['⠀','▏','▎','▍','▌','▋','▊','▉'][p];

        location.hash = s;
        setTimeout(loop, 50);
    }

作者:Animating URLs with Javascript and Emojis


出于本站结构,所以,我放在另一个站点进行演示:DEMO


版权声明:

如未注明,均为原创,转载需注明出处!

本文链接:https://jkgblog.com/629.html

最后修改日期:2019年12月8日

作者

留言

太骚了,不敢放。。。。

看起来挺酷的。

我觉得不用做太多JS特效,最主要的是和自己站内搭,看起来不会影响视觉,另外如果是纯粹分享心得就没关系。

    作者

    单纯分享这个玩意,js做的酷炫,自己站点也没上它😀

这操作,骚。

看到了,很炫的效果。

    作者

    哈哈哈,欢迎大佬,这个外国小哥弄的。他的作品简直是把css和js玩出花

好炫酷,不过好像会导致评论区输入框抖动

这个是真骚啊😥

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。