代码之家 › 专栏 › 技术社区 › user3052443

将div更改为页面滚动

transition scroll css

user3052443 · 技术社区 · 3 年前

我正试着做类似的事情 this demo . 当页面向下滚动时,各个部分变得可见。我加了一个 jsfiddle here . 如您所见,当第二行文本悬停时,它将覆盖其上方的行。我知道我的代码使用了hover,演示站点会随着滚动而改变,但我认为这会更容易开始工作。

    <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>

1 回复 | 直到 3 年前

ProgramistaZaDyche 3 年前

以整页模式运行此操作。干得好:

  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>

A Haworth 3 年前

如果要更改悬停时元素的大小而不影响其他元素,则可以仅使用“变换:缩放”。

如果同时(或代替)更改宽度和/或高度,则除非元素以非相对方式定位,否则它将“干扰”周围的元素。

因此,请尝试:

#更改:悬停{ 转换:比例(1.5);
}

当您想要在元素进入视图时展开它们时,请调查IntersectionObserver。您可以将观察者附加到这些元素中的每一个,并在它们出现时对其进行变换,或者使用CSS动画和/或延迟设置来获得链接站点中显示的效果。