[TOC]

点击查看【bilibili】
本案例还是通过滚动事件，来改变元素垂直方向的缩放，来达到一个从大到小的缩放效果

思路

  1. 将图片导入一个元素中
  2. 将包裹图片的元素定位在最下方，设置相应的高度使图片撑开
  3. 监听滚动事件控制垂直方向的缩放

    代码

    html与js

    ```html <!DOCTYPE html>
03.css滚动转换效果 - 图1 

<a name="DVw0a"></a>
### css
```css
* {
    padding: 0;
    margin: 0;
}
body {
    height: 200vh;
    background: #111;
}
section {
    /* 如果父元素没有定位，宽高百分比将根据浏览器可视宽高进行计算 */
    position: absolute;
    width: 100%;
    height: calc(100% - 200px);
    background: #2abbff;
}
section .curve {
    /* 定位使行内元素转变成块级元素 */
    position: absolute;
    bottom: -200px;
    height: 200px;
    width: 100%;
    /* 更改转变元素的位置 */
    transform-origin: top;
}
section .curve img{
    width: 100%;
    height: 100%;
}csss

需要的知识

css

transform-origin: top; /* 更改转变元素的位置 */

菜鸟传送门

transform:scaleY() /* 更改转变元素垂直距离的缩放 */

菜鸟传送门

js

滚动事件