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

共 2,642 字，需阅读 7 分钟

2019/01/05 上午

392 次阅读

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

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

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

实现步骤详解

步骤一：创建页面

        
          
            
            HTML
          
          
        
        
          1234567891011121314
          <!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>

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

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

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

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

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

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

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

        
          
            
            JavaScript
          
          
        
        
          123456789101112
          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动画实现元素的向上移动并消失的效果。

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

        
          
            
            CSS
          
          
        
        
          12345678910111213141516171819202122232425262728293031323334353637383940
          .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;
    }
}