Webpack 官网文字滚动特效

左手的ㄟ右手 2024-05-24 04:25 4阅读 0赞

### Webpack 官网文字滚动特效 ###

先来看看 `?Webpack 官网?` 的效果  
![在这里插入图片描述][e0da6665736743dea5b2b8b6fd5c60e2.gif_pic_center]

来看看我自己实现的  
![在这里插入图片描述][944138c463cc4fe39cc1736cf5d843f9.gif_pic_center]

#### `HTML` ####

首先下面的代码确实没有格式化, 而且是被我故意写成这样的. 因为 `HTML` 中的换行符是会被显示出来的. 如下图  
![在这里插入图片描述][5ba00d0640b14f8bada070c4f5abe7c0.png_pic_center]

第一个 `div.rotate` 是固定宽高, 因为这样才能通过 `overflow: hidden` 使超出的子元素隐藏.

第二个 `div.wrapper` 和父元素宽度一样(`2em`), 才导致了两个 `span` 没有在同一行显示, 而是在不同行.

#### `CSS` ####

首先, 取消 `<body>` 和 `<h1>` 的 `padding` 和 `margin`. 并设置 `<body>` `flex` 布局使子元素垂直水平居中.

设置第一个 `div.rotate` `inline-block` 才不会换行. 具体 `height` 为多少, 这个需要自己手动在浏览器工具里调试.

最后一个类 `goUp`, 帮助第二个 `div.wrapper` 上移 `50%` 高度从而第二个 `span` 显示出来.

body, h1 {
        
      padding: 0;
      margin: 0;
    }
    
    body {
        
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    .rotate {
        
      display: inline-block;
      vertical-align: bottom;
      width: 2em;
      height: 43px;
      overflow: hidden;
      background-color: skyblue;
      padding: 0 .3rem;
    }
    .goUp {
        
      transition: transform .5s ease-in-out;
      transform: translateY(-50%);
    }

#### `JavaScript` ####

主要在于, 点击按钮时给第二个 `div.wrapper` 添加 `goUp` 类. 在 `transition` 结束时, 也是就 `500ms` 后, 取消这个类. ?取消之后, `div.wrapper` 的滚动就失效了, 展现的仍是第一个 `span` 内容.

因此要将之前滚动的第二个 `span` 内容变成第一个 `span` 内容. 才不会发现猫腻.

内容就是这些啦, 谢谢你看到这里?

[e0da6665736743dea5b2b8b6fd5c60e2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/48cb18eff30a4e1a8b6c2bbf5b19a41e.gif
[944138c463cc4fe39cc1736cf5d843f9.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c57e5c0212e84aee8b1be065b38d3f91.gif
[5ba00d0640b14f8bada070c4f5abe7c0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/003fe1058523432db34d1174d8206374.png