2016-10-16 4 views
1

のスクロール速度は、私のHTMLです:変更はここでのdiv

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

今、私は単にテキスト(#イントロテキストが欲しいですdiv)をスクロールします。できるだけ簡単にこれを達成するにはどうすればいいですか?

私は今までほとんどのjavascript/jQueryを知りませんでしたが、これまでのところ親切な人の手助けをしています。

ありがとうございます。

+0

を私は、もう時間をあなたのコードをテストしていないが、私は今、私はvarが '0.2'または'以下の何かのように値をscroll_speed' '与える言う見えるものからできません1' – Thielicious

+0

お返事ありがとうございます。申し訳ありませんが私が不明な場合は、私のベンジャミンへの返事を参照してください。 –

答えて

0

期待通り、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 }); 
     }); 
    }); 
}); 
+0

応答に感謝、ベンジャミン。背景画像はすでにスクロールしていたので、既にスクロールしていました(値段は1以下でしたが、もっとうまくいきました)。スクロール速度を変更したいテキスト(#イントロテキスト)です。私は同じコードを複製し、#イントロテキストの#イントロ画像を変更しようとしましたが、同じことをするようには見えません。 –

+0

アイデアをお探しですか?ありがとう。 –

+0

はい。 jquery(https://github.com/Prinzhorn/skrollr)にはskrollr、Angular/React(https://github.com/gilbox/spark-scroll)にはSparkScrollディレクティブ/コンポーネントのようなLibを使用できます。私はそれらに取り組んで、彼らはすべて良いです。 しかし、今夜はlibなしで手動でコードを実行するコードの例を送れます。 自分で説明するには、#イントロイメージ関数を変更して、スクロール位置に基づいて、#イントロテキスト部門の 'top'スタイルパラメータを変更することから始めてください。また、#イントロテキスト幅cssに絶対位置を設定する必要があります。 – Benjamin

関連する問題