袁老师的钉钉官网效果demo

最新推荐文章于 2024-11-16 11:58:36 发布

原创

最新推荐文章于 2024-11-16 11:58:36 发布 · 554 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#钉钉 #javascript #css

这是一个HTML和JavaScript实现的元素缩放效果示例，模拟了钉钉官网的滚动动画。代码通过CSS设置了不同颜色的方块，并使用JavaScript动态调整元素的透明度、位置和缩放，实现了在页面滚动时的平滑过渡效果。

袁老师的钉钉官网元素缩放demo
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钉钉官网效果</title>
    <style>
        *{
   
   padding:0;margin:0;list-style:none}
        #header{
   
   
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7rem;
            font-weight: bold;
        }
        #footer{
   
   
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7rem;
            font-weight: bold;
        }
        .playground{
   
   
            height: 300vh;
            background-color: black;
            position: relative;
        }
        .animation-container{
   
   
            display: flex;
            position: sticky;
            top: 0;
            height: 100vh;
        }
        .list{
   
   
            width: 800px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            flex