Блог

Главная - Вопросы по программированию - Изменение скорости прокрутки div

Изменение скорости прокрутки div

#javascript #jquery #css #text #scroll

#javascript #jquery #css #текст #прокрутка

Вопрос:

Вот мой 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(/^//,'') amp;amp; 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, я достигаю того, что у меня есть, благодаря помощи добрых людей.

Заранее спасибо.

Комментарии:

1. Я не могу протестировать ваш код, нет времени, но из того, что я вижу прямо сейчас, я бы сказал, дайте var scroll_speed значение, подобное 0.2 или что-то ниже 1

2. Спасибо за ответ. Извините, если я был неясен, см. Мой ответ Бенджамину.

Ответ №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. Спасибо за ответ, Бенджамин. Фоновое изображение было в порядке, оно уже прокручивалось медленнее (хотя, как ни странно, я не пробовал использовать значение ниже 1, и теперь оно работает лучше). Теперь я хочу изменить скорость прокрутки для текста (#intro-text). Я попытался просто дублировать тот же код и изменить #intro-image на #intro-text, но, похоже, это работает по-другому.

2. Есть идеи? Спасибо.

3. ДА. Для jquery можно использовать библиотеку, подобную skrollr ( github.com/Prinzhorn/skrollr ) или директива / компонент SparkScroll для Angular / React ( github.com/gilbox/spark-scroll ). Я работал над ними, и все они хороши. Но сегодня вечером я могу отправить вам пример кода, чтобы сделать это вручную, без библиотеки. Чтобы сделать это самостоятельно вручную, вы можете начать с изменения вашей функции #intro-image, чтобы изменить параметр стиля «top» вашего раздела #intro-text на основе положения прокрутки. Вы также должны установить абсолютную позицию в #intro-ширина текста css.

Метки: