在页面滚动时更改 div

Question

我正在尝试做类似 this demo. As the page scrolls down, the various parts become visible. I added a jsfiddle here 的事情。如您所见，当第二行文本悬停时，它会覆盖其上方的行。我知道我的代码正在使用悬停，并且演示站点会随着滚动而变化，但我认为先开始工作会更容易。

谁能解释一下我该怎么做才能只放大 ID 为 changeme 的 div 的内容而不影响其他内容？这是我的代码：

    <style>
    #changeme {
     height: 50px;
     width:100px;
     transition: all .5s ease-in-out;
    }

    #changeme:hover {
     height: 200px;
     width:100px;
     transform: scale(1.5);  
    }
    </style>

    <div>
      <h1>Title</h1>
      <div>
        <div>Main text<div>
        <div id="changeme">
          <div>Some Text</div>
          <div><img src="example.png"></div>
        </div>
      </div>
    </div>

Answer 1

如果您想在悬停时更改元素的大小而不影响其他元素，那么您可以只使用 transform: scale。

如果您还（或代替）改变宽度 and/or 高度，那么除非该元素以某种非相对方式定位，否则它将围绕它 'disturb' 个元素。

所以尝试：

#changeme:悬停{ 变换：比例（1.5）；
}

当您想要在元素进入视图时对其进行扩展，请研究 IntersectionObserver。您可以将观察者附加到这些元素中的每一个，当它们出现时您可以转换它们，或者使用 CSS 动画 and/or 延迟设置以获得链接站点中显示的那种效果。

Answer 2

运行这是全页模式。给你：

  var ScrollFunction = function() {
        var y = window.scrollY;
        var viewport = window.innerWidth;
        
       var counter = (y/viewport) * 100;
        if ( counter >= 10) {
            document.getElementById("containerOne").className = "container show"
        }
        if (counter >= 20) {
            document.getElementById("containerTwo").className = "container show"
        }
        if (counter >= 30) {
            document.getElementById("containerThree").className = "container show"
        }
    };

window.addEventListener("scroll", ScrollFunction);

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #fff;
        }
        body{
            height: 200vh;
            background-color: #313131;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .container{
            width: 80%;
            height: 500px;
            border: 1px solid rgb(126, 126, 126);
            margin-bottom: 5vh;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: row;

        }
        .box{
            width: calc(80%/4);
            display: flex;
                height: 50%;
                opacity: 1;
            margin-left: 10px;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.185);
            animation: 1s 1 linear normal showUp;
            transition: .4s all;
        }
        .box:first-child{
                margin: 0;
        }
        .box:hover{
        transform: scale(1.5); 
        }
        .show{
            display:flex;
        }
        
        @keyframes showUp {
            0%{
                height: 0;
                opacity: 0;
                display: none;
            }
           100%{
                display: flex;
                height: 50%;
                opacity: 1;
            }
        }

<div id="containerOne" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>

    <div id="containerTwo" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>

    <div id="containerThree" class="container">
        <div class="box">MyBox1</div>
        <div class="box">MyBox2</div>
        <div class="box">MyBox3</div>
        <div class="box">MyBox4</div>
    </div>

在页面滚动时更改 div

Change divs as page scrolls

css

scroll

transition