003-落幕效果

最新推荐文章于 2024-08-20 13:42:14 发布

小半q

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量342

点赞数 5

分类专栏： css练习文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_42482544/article/details/135854795

版权

css练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇文章展示了如何使用HTML、CSS和JavaScript创建一个简单的网页效果，当用户滚动页面时，带有曲线图片的section元素会根据滚动位置进行缩放。这种设计模仿了YouTube或其他平台的某些特性。

摘要由CSDN通过智能技术生成

效果

落幕效果

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<section>
    <h1>
        Be aware of all copycat youtubers!
    </h1>
    <span class="curve">
            <img src="./assets/curve.png" alt="">
        </span>
</section>

<script>
    let scroll = document.querySelector('.curve');
    window.addEventListener('scroll', function () {
        let value = 1 + window.scrollY / -500
        scroll.style.transform = `scaleY(${value})`
    })
</script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}

body {
    height: 200vh;
    background: #111;
}

section {
    position: absolute;
    width: 100%;
    height: calc(100% - 200px);
    background: #2abbff;

    display: flex;
    justify-content: center;
    align-items: center;
}


section .curve {
    position: absolute;
    bottom: -200px;
    height: 200px;
    width: 100%;
    transform-origin: top;
}

section .curve img {
    width: 100%;
    height: 100%;
}

section h1 {
    font-size: 4em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}