「兔了个兔」创意投稿大赛——迎面跳来的是卯兔送福方阵……

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

之前看到360安全卫士的官网，觉得里面有好多有趣的效果，可惜我只能隐约感到于position:sticky这个有关，但是具体的实现思路还是没有的。于是乎，在本文先简单实现一下最简单的一个效果，当然还没涉及到这个sticky。

首先，依然是放一下效果图，

当然一开始是看不出啥问题的只是觉得这不就是平平无奇的图片吗，但是细心的话可以看到右侧那长长的滚动条，这就意味着，那句滚动有彩蛋，呃不是摆设。他的真实效果是这样的

附上码上掘金的调试源码，下面就开始实现它。

思路

首先就是给body设置一个巨大的高度，然后把展示图片用的ul给固定到视口中间而不是body中间，设置好相关的css，在js中获取对应的元素和视口高度以及滚动高度，然后对应的着更改元素的rotateY属性，当然，这个属性值用变量代替。然后更改对应方式即可实现本文的效果。

开始实现

HTML

就是用ul和li来实现显示于旋转

<div>滚动有彩蛋</div>
  <ul>
    <li><img src="./1.jpg" alt="strawberry" />兔年大吉</li>
    <li><img src="./2.png" alt="cut citrus fruits" />前兔似锦</li>
    <li><img src="./3.png" alt="oranges" />兔步青云</li>
    <li><img src="./4.jpg" alt="a bunch of blueberries" />兔然暴富</li>
  </ul>

CSS

css需要注意使用fixed，固定到视口中，这样滑动就能一直看到

ul {
  position: fixed;
  top: calc(50% - 260px);
  left: calc(50% - 260px);
  width: 520px;
  height: 520px;
  background-image: linear-gradient(to right,#FF3600, #FF6E00);
  perspective: 1000px;
  box-shadow: 0 0 20px #000 inset;
}
div{
  position: fixed;
  top: 12%;
  left: 10%;
  text-align: center;
  width: 520px;
  height: 50px;
  font-size: 22px;
}
li {
  --ang: -180deg;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff7;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 48px 32px;
  font-size: 24px;
  transform: rotateY(var(--ang));
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

backface-visibility：hidden；这个属性代表了当元素背对着用户的时候就会隐藏起来不展示，配合3D实现。

JS

依然是获取元素，并顺便获取视口高度和滚动高度，绑定滚动事件

const body = document.querySelector("body")
const lis = document.querySelectorAll("li")
window.addEventListener("scroll", () => { onscrl() }, false)
onscrl(false)
function onscrl() {
  // this ==> Window
  const s = (body.scrollHeight - window.innerHeight) / 3
  lis.forEach((li, index) => {
    const ang = ((this.scrollY - (s * (index - 1))) * 360 / (s * 2)) - 180
    li.style.setProperty('--ang',
      Math.max(-180, Math.min(180, ang)) + 'deg'
    )
  })
}

这里定义s的时候之所以要除以3，是因为一共四张图片，要把每个图片的旋转角度平均分配给滚动高度，除以三可以保证每果冻一个视口高度的时候刚好可以让一张图片旋转180°。

到此，旋转卯兔送福就基本完成了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（七） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！