Question

这是我的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，到目前为止我通过善良的人帮助实现了我的目标。

提前致谢。

Answer 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 });
        });
    });
});

更改div的滚动速度

1 个答案: