【问题标题】:Change scrolling speed of a div更改 div 的滚动速度
【发布时间】:2016-10-16 17:23:08
【问题描述】:

这是我的 HTML:

<div id="intro-image">
    <div id="intro-text">
        <p class="intro-head">COLIN STEWART</p>
        <p class="intro-body">logos - branding - web</p>
        <a href="#work-anchor" class="smoothScroll"><div id="portfolio-button">PORTFOLIO</div></a>
    </div>
    <a href="#about-anchor" class="smoothScroll"><img src="images/arrow.png" id="arrow" class="animated bounce"></a>
</div>

CSS:

#intro-image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/desk.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: repeat;
}

#intro-text {
    width: 1200px;
    max-width: 85%;
    margin: 0 auto;
    position: relative;
    top: 55%;
    transform: translateY(-50%);
}

.intro-head {
    font-family: 'Montserrat', sans-serif;
    font-size: 65px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin: 0;
    letter-spacing: 3px;
}

.intro-body {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    margin: 0;
    letter-spacing: 0.5;
}

#portfolio-button {
    margin: 50px auto 0 auto;
    padding-top: 18px;
    width: 185px;
    height: 38px;
    background-color: #ef3c5f;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    letter-spacing: 2px;
    transition: 0.6s;
    transform-style: preserve-3d;
}

#portfolio-button:hover {
    /*box-sizing: border-box;
    border-bottom: 5px solid #c42c50;*/
    transform: rotateX(360deg);
    cursor: pointer;
}

Javascript:

/* Smooth Scroll */

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

/* Background Image Scroll Speed */

$(document).ready(function(){
    var $win = $(window);

    $('#intro-image').each(function(){
        var scroll_speed = 2;
        var $this = $(this);
        $(window).scroll(function() {
            var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
            var bgPosition = 'center '+ bgScroll + 'px';
            $this.css({ backgroundPosition: bgPosition });
        });
    });
});

现在我只想让文本 (#intro-text div) 滚动得更慢。我怎样才能做到这一点(尽可能简单)?

为了记录,我几乎不知道 javascript/jQuery,我通过善良的人们的帮助实现了我迄今为止所拥有的。

提前致谢。

【问题讨论】:

  • 我无法测试您的代码,没时间了,但从我现在看到的情况来看,我会说给var scroll_speed 一个类似0.2 的值或低于1 的值
  • 感谢您的回复。抱歉,如果我不清楚,请参阅我对本杰明的回复。

标签: javascript jquery css text scroll


【解决方案1】:

正如预期的那样,更改 scroll_speed 值可以正常工作。

见上图: https://jsfiddle.net/ojsrfy1r/2/

/* Background Image Scroll Speed */

$(document).ready(function(){
    var $win = $(window);

    $('#intro-image').each(function(){
        var scroll_speed = 0.2; // modified value
        var $this = $(this);
        $(window).scroll(function() {
            var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
            var bgPosition = 'center '+ bgScroll + 'px';
            $this.css({ backgroundPosition: bgPosition });
        });
    });
});

【讨论】:

  • 感谢本杰明的回复。背景图像很好,滚动速度已经变慢了(尽管有趣的是,我没有尝试过低于 1 的值,现在效果更好)。这是我现在想要更改滚动速度的文本(#intro-text)。我曾尝试复制相同的代码并将#intro-image 更改为#intro-text,但它似乎不一样。
  • 有什么想法吗?谢谢。
  • 是的。您可以为 jquery (github.com/Prinzhorn/skrollr) 使用类似 skrollr 的 Lib,或为 Angular/React (github.com/gilbox/spark-scroll) 使用 SparkScroll 指令/组件。我在他们身上工作过,他们都很好。但是,今晚我可以向您发送一个手动执行的代码示例,无需库。要自己手动完成,您可以首先修改#intro-image 函数,以根据滚动位置更改#intro-text 分区的“顶部”样式参数。您还必须在#intro-text width css 上设置绝对位置。
猜你喜欢
  • 2016-03-14
  • 2011-01-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-08
  • 2021-05-20
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多