滚动到特定位置时对div进行动画处理 [英] Animate a div when we scroll to a specific position

查看：49
本文介绍了滚动到特定位置时对div进行动画处理的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个功能，当从页面顶部滚动到 scrolling div 高度的-600时，将 slider-side-hr 的宽度减小到0(这意味着在到达 scrolling div 的底部之前).
滑块侧都是固定的，一个固定在右侧，另一个固定在左侧.

 < div class ="tower"id ="tower2"< div class ="scroll-slider-hr">< div class ="slider-side-hrslider-side1"</div< div class ="slider-side-hrslider-side2"</div</div></div>

它工作得很好，并且滚动时两个的宽度都减小为0，但是当 scrolling div 为时我遇到了问题不是在页面顶部.

我需要一个条件，该条件仅在( scrolling div )到达页面底部+ 100px 时才执行，这意味着我可以看到 slider-side-hr 首先全宽(

height 的 100px )，然后在滚动时开始减小为0，并且在达到 scrolling div 的一半时应减小为0

非常感谢< 3



**注意:**
这就是我要实现的目标:
转到:https://www.apple.com/macbook-pro-16/
滚动到:
*Retina显示屏*

  var $ scrollingDiv = $(#tower2");$(window).scroll(function(){var winScrollTop =($(document).scrollTop()+ 0);var zeroSizeHeight = $ scrollingDiv.height()-600;var newSize = 250 *(1-(winScrollTop/zeroSizeHeight));$('.slider-side-hr').css({宽度:newSize，}，500，'easeInOutSine');});  

  .container-full {宽度:100％;右边距:自动；左边距:自动；}.塔 {职位:相对}#tower1 {/* margin-bottom:700px */}#tower2 {背景图像:线性渐变(rgba(0，0，0，0.5)，rgba(0，0，0，0.5));背景位置:中心；背景尺寸:封面；背景重复:不重复；高度:140vh；背景附件:固定；职位:相对溢出:隐藏；}.slider-side-hr {位置:绝对；最高:0;底部:0;宽度:250像素；高度:100％;背景:#ddd;}.slider-side1 {左:0；}.slider-side2 {正确:0；}  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>< dic class ="container-full">< div class ="tower" id ="tower1"></div>< div class ="tower" id ="tower2">< div class ="scroll-slider-hr">< div class ="slider-side-hrslider-side1"></div>< div class ="slider-side-hrslider-side2"></div></div></div></div>

解决方案

此代码的工作原理:

JS

从#tower2 的顶部获取有关位置的信息，并将其分配给变量 ftop

从 ftop 中减去滚动值.当该值小于0时，开始向 .slider-side-hr 传输新值.

.slider-side-hr 的宽度的初始值设置为#tower2

的宽度的50％

如果您要更改动画"速度...更改此行:

var newSize = zeroSizeWidth + scl; 与此 var newSize = zeroSizeWidth + scl * 2;

(如果您希望动画对台式机和移动设备响应，则可以将值 * 2 设置为屏幕宽度的百分比)

CSS

所做的更改属于类 .slider-side-hr 值 width:100％;

希望我能对您有所帮助

  var $ scrollingDiv = $(#tower2");var ftop = $ scrollingDiv.offset().top;var zeroSizeHeight = $ scrollingDiv.height();var zeroSizeWidth = $ scrollingDiv.width()/2;$(window).scroll(function(){var winScrollTop = $(window).scrollTop();var scl = ftop-winScrollTop;如果(scl< 0){var newSize = zeroSizeWidth + scl * 2;} 别的 {var newSize = zeroSizeWidth;}$('.slider-side-hr').css({宽度:newSize，}，500，'easeInOutSine');});  

  .container-full {宽度:100％;右边距:自动；左边距:自动；}.塔 {职位:相对}#tower1 {/* margin-bottom:700px */}#tower2 {背景图像:线性渐变(rgba(0，0，0，0.5)，rgba(0，0，0，0.5));背景位置:中心；背景尺寸:封面；背景重复:不重复；高度:140vh；背景附件:固定；职位:相对溢出:隐藏；}.slider-side-hr {位置:绝对；最高:0;底部:0;宽度:100％;高度:100％;背景:#ddd;}.slider-side1 {左:0；}.slider-side2 {正确:0；}  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>< div class ="container-full">< div class ="tower" id ="tower1">洛雷姆(Lerem)，伊普森(ipsum)多洛尔(Doslor)坐享其成.结果ipsam fuga amet quaerat possimus qui即刻身份证号.Accorantium expedita architecto doloribus ratione veniam itaque in理想的承担吗?忘了！洛雷姆(Lerem)，伊普森(ipsum)多洛尔(Doslor)坐享其成.结果ipsam fuga amet quaeratpossimus qui即时编号.意大利的Accedantium expedita architecto doloribusatione veniam itaque假设ab?忘了！洛雷姆(Lerem)，伊普森(ipsum)多洛尔(Doslor)坐享其成.结果ipsam fugaamet quaerat possimus qui即时编号.威尼斯意大利建筑博物馆在理想的情况下假设ab吗?忘了！洛雷姆(Lerem)，伊普森(ipsum)多洛尔(Doslor)坐享其成.结果ipsamfuga amet quaerat possimus qui即时编号.Accenantium expedita architecto doloribus ratione veniamitaque in iure假定吗?忘了！洛雷姆(Lerem)，伊普森(ipsum)多洛尔(Doslor)坐享其成.结果是错误的ID.Accedantium expedita architecto doloribus理性假设中的理性威尼斯人?忘了！洛雷姆(Lorem)，伊普苏姆(ipsum)多洛尔(Dolor)坐着，很安全高贵.结果是错误的ID.Accusantium expedita architecto道理·比尼亚·韦尼塔姆·伊塔尔·阿卜杜勒?忘了！洛雷姆(Lorem)，ipsum多洛尔(dorlor)提倡精英.结果是错误的ID.Expedita Accusantium expeditaarchitecto doloribus ratione veniam itaque in理想假设ab?忘了！Lorem，ipsum dolor坐在amet奉献的精英人士.结果是错误的ID.Accusantiumexpedita architecto doloribus理性威尼斯人在意大利的假设?忘了！Lorem，ipsum dolor坐下.</div>< div class ="tower" id ="tower2">< div class ="scroll-slider-hr">< div class ="slider-side-hrslider-side1"></div>< div class ="slider-side-hrslider-side2"></div></div></div></div>

I have a function that decrease the width of the slider-side-hr to 0 when scrolling from the top of the page to -600 of the scrolling div height (which means before reaching the bottom of the scrolling div).
The slider sides are both fixed, one to right and the other to the left.

  <div class="tower" id="tower2">
      <div class="scroll-slider-hr">
          <div class="slider-side-hr slider-side1"></div>
          <div class="slider-side-hr slider-side2"></div>
      </div>
  </div>

It works perfectly fine and the width of both slider-side-hr decreasing to 0 when scrolling, but I have a problem when the scrolling div is NOT on the top of the page.

I need a condition that executes the function ONLY when (scrolling div) reaches the bottom of the page + 100px, which means I can see the slider-side-hr full width first (with 100px of the scrolling div height) then it starts to decrease to 0 on scrolling, and it should decrease to 0 when reaching half of the scrolling div

Thanks a lot <3



**NOTE:**
That's what I'm trying to achieve:
Go to: https://www.apple.com/macbook-pro-16/
Scroll to:
*Retina Display* 

var $scrollingDiv = $("#tower2");
$(window).scroll(function() {

    var winScrollTop = ($(document).scrollTop() + 0);
    var zeroSizeHeight = $scrollingDiv.height() - 600;
    var newSize = 250 * (1 - (winScrollTop / zeroSizeHeight));
    
        $('.slider-side-hr').css({
            width: newSize,
        }, 500, 'easeInOutSine');
});

.container-full {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.tower {
    position: relative;
}

#tower1 {
    /*margin-bottom: 700px*/
}

#tower2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 140vh;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;

}

.slider-side-hr {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    height: 100%;
    background: #ddd;
}

.slider-side1 {
    left: 0;
}
.slider-side2 {
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<dic class="container-full">
  <div class="tower" id="tower1">
  </div> 

  <div class="tower" id="tower2">
      <div class="scroll-slider-hr">
          <div class="slider-side-hr slider-side1"></div>
          <div class="slider-side-hr slider-side2"></div>
      </div>
  </div>
</div>

解决方案

How this code works:

JS

Takes information about the location from top of #tower2 and assigns it to the variable ftop

From ftop we subtract the scrolling value. When this value becomes less than 0, the transmission of a new value to .slider-side-hr begins.

The initial value of the width of .slider-side-hr is set to 50% of the width of #tower2

If you want to change the "animation" speed ... change this line:

var newSize = zeroSizeWidth + scl; to this var newSize = zeroSizeWidth + scl * 2;

(If you want the animation to be responsive for desktop and mobile you can make the value * 2 to be a percentage of the screen width)

CSS

The change made is of class .slider-side-hr value width: 100%;

I hope I've been helpful

var $scrollingDiv = $("#tower2");
var ftop = $scrollingDiv.offset().top;
var zeroSizeHeight = $scrollingDiv.height();
var zeroSizeWidth = $scrollingDiv.width() / 2;

$(window).scroll(function () {
    var winScrollTop = $(window).scrollTop();
    var scl = ftop - winScrollTop;

    if (scl < 0) {
        var newSize = zeroSizeWidth + scl * 2;
    } else {
        var newSize = zeroSizeWidth;
    }

    $('.slider-side-hr').css({
        width: newSize,
    }, 500, 'easeInOutSine');

});

.container-full {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.tower {
    position: relative;
}

#tower1 {
    /*margin-bottom: 700px*/
}

#tower2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 140vh;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;

}

.slider-side-hr {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
}

.slider-side1 {
    left: 0;
}

.slider-side2 {
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="container-full">
    <div class="tower" id="tower1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui
        impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab?
        Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat
        possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure
        assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga
        amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque
        in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam
        fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam
        itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus
        ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing
        elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto
        doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur
        adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita
        architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium
        expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit.
    </div>

    <div class="tower" id="tower2">
        <div class="scroll-slider-hr">
            <div class="slider-side-hr slider-side1"></div>
            <div class="slider-side-hr slider-side2"></div>
        </div>
    </div>
</div>

这篇关于滚动到特定位置时对div进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆