用文字记录生活，留下美好瞬间
原创

点击触发随机核心价值观词向上飞舞并消失

共 2,642 字，需阅读 7 分钟
2019/01/05 上午
156 次阅读

在网页设计与交互体验的探索中，我们时常会尝试各种富有创意和趣味性的动态效果，以提升用户对页面的参与度和关注度。今天，我们将一起探讨如何利用前端技术，实现一个点击页面任意位置后，随机选取一个核心价值观词汇，并使其向上移动直至消失的特效。

首先，让我们明确一下需求：

  1. 用户点击页面任何位置时，系统将从预设的核心价值观列表中随机抽取一个词汇。
  2. 抽取的词汇将以动画形式从点击位置开始向上移动。
  3. 在完成一定的移动轨迹后，该词汇最终消失。

#实现步骤详解

#步骤一：创建页面

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心价值观升腾展示</title>
</head>

<body>
    <div id="flowers"></div>
</body>

</html>

#步骤一：构建核心价值观词汇库

          
  • 1
  • 2

          // 核心价值观词汇库
const coreValues = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']

#步骤二：监听页面点击事件

通过JavaScript的addEventListener方法，我们可以为整个页面添加点击事件监听器。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

          document.addEventListener('click', (event) => {
    // 随机获取一个词汇
    const randomValue = coreValues[Math.floor(Math.random() * coreValues.length)];
    // 显示并执行动画
    displayAndAnimate(randomValue, event.clientX || event.x, event.clientY || event.y);
});

#步骤三：创建并显示词汇元素

我们需要创建一个包含随机词汇的DOM元素，并将其定位到点击的位置。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

          function displayAndAnimate(value, x, y) {
    const el = document.createElement('div');
    el.innerText = value;
    flower.classList.add('flower-item')
    el.style.left = `${x}px`;
    el.style.top = `${y}px`;
    document.body.appendChild(el);
  
    setTimeout(() => {
        flowers.removeChild(flower)
    }, 2000)
}

#步骤四：执行向上移动并消失的动画

通过CSS动画实现元素的向上移动并消失的效果。

          
  • 1
  • 2
  • 3
  • 4
  • 5

          // 在 displayAndAnimate方法中新增动画类名
function displayAndAnimate(value, x, y) {
    // 新增此行 加上动画效果
    flower.classList.add('playing')
}

        
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

          .flowers {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 0;
    list-style: none;
}

.flower-item {
    opacity: 1;
    position: fixed;
    display: block;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.5s;
    color: #0088f5;
    white-space: nowrap;
}

.flower-item.playing {
    opacity: 0.8;
    animation: flower-playing 1s ease 0s forwards;
}

@keyframes flower-playing {
    0% {
        transform: translate3d(-50%, -50%, 0);
    }

    80% {
        transform: translate3d(-50%, -400%, 0);
        opacity: 0.6;
    }

    100% {
        transform: translate3d(-50%, -500%, 0);
        opacity: 0;
    }
}

以上代码片段实现了当点击页面时，从核心价值观中随机选择一个词，将其显示在点击位置，并自定义向上飞舞的动画效果，直至完全消失。

实际动画
实际动画

总结： 通过这次实践，我们不仅实现了一个有趣的前端特效，也巧妙地融入了核心价值观的传播。这样的互动设计既增强了用户体验，又传递了积极正面的价值导向，充分展现了前端技术在提升网站功能性和艺术性方面的无限可能。

本文于2019/01/05 上午发布在秘阁
#JavaScript
自由转载 - 署名 - 非商业性使用
https://zhangwurui.cn/article/37
共0/0条看法
访客身份
在下有一拙见，不知...
期待你的捷足先登