[자바 스크립트] jQuery를 통해 배치 할 때 크롬의 배경 이미지 트 위치

를 사용하여 background-attachment: fixed실제 시차 효과를 만드십시오. 아래 데모를 확인할 수 있지만 원하는대로 CSS를 수정해야합니다. 그러나 보시다시피 스크롤이 부드럽습니다.

function initParalx(options) {
        if(typeof options == "undefined"){
                var options = {
                            'class': 'smplParalax',
                                        'q': 2
                                                }
                                                    }
                                                    
                                                        function _handleParalax(options){
                                                                var relPos = 0;
                                                                        $(".smplParalax").each(function() {
                                                                                    relPos = $(window).scrollTop() - $(this).offset().top;
                                                                                                $(this).css("background-position", "0 " + (relPos / options.q) + "px");
                                                                                                        });
                                                                                                            }
                                                                                                            
                                                                                                                $(window).on("load scroll resize", function() {
                                                                                                                        _handleParalax(options);
                                                                                                                            });
                                                                                                                            }
                                                                                                                            
                                                                                                                            $(window).ready(function() {
                                                                                                                                initParalx({
                                                                                                                                        'q': 1.5
                                                                                                                                            });
                                                                                                                                            });

body {
            font:100%/1.5 arial;
                    padding:0;
                            margin:0;
                                    color:#fff;
                                      height:100%;
                                      }
                                      .smplParalax {
                                          height: 100%; 
                                             position: relative;
                                                 background-attachment: fixed;
                                                     background-position: center;
                                                         background-repeat: no-repeat;
                                                             background-size: cover;
                                                             
                                                             }
                                                             .content {
                                                                     border-bottom:solid 1px #f00;
                                                                            
                                                                            }
                                                                            .content .inner {
                                                                                    padding:20px;
                                                                                    }
                                                                                    #footerSectionOne {
                                                                                            background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/1.jpg);
                                                                                                    
                                                                                                    }
                                                                                                    #footerSectionTwo {
                                                                                                            background-image:url(http://lab.dev-nook.de/_test/paralax/paralax/2.jpg);
                                                                                                            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="smplParalax content" id="footerSectionOne">
        <div class="inner">
                  <h1>Lorem Ipsum</h1>
                            <h1>Lorem Ipsum</h1>
                                      <h1>Lorem Ipsum</h1>
                                                <h1>Lorem Ipsum</h1>
                                                          <h1>Lorem Ipsum</h1>
                                                                    <h1>Lorem Ipsum</h1>
                                                                              <h1>Lorem Ipsum</h1>
                                                                                        <h1>Lorem Ipsum</h1>
                                                                                                  <h1>Lorem Ipsum</h1>
                                                                                                            <h1>Lorem Ipsum</h1>
                                                                                                                  </div>
                                                                                                                    </div>
                                                                                                                      <div class="smplParalax" id="footerSectionTwo">
                                                                                                                          <div class="inner">
                                                                                                                                    <h1>Lorem Ipsum</h1>
                                                                                                                                              <h1>Lorem Ipsum</h1>
                                                                                                                                                        <h1>Lorem Ipsum</h1>
                                                                                                                                                                  <h1>Lorem Ipsum</h1>
                                                                                                                                                                            <h1>Lorem Ipsum</h1>
                                                                                                                                                                                      <h1>Lorem Ipsum</h1>
                                                                                                                                                                                                <h1>Lorem Ipsum</h1>
                                                                                                                                                                                                          <h1>Lorem Ipsum</h1>
                                                                                                                                                                                                                    <h1>Lorem Ipsum</h1>
                                                                                                                                                                                                                              <h1>Lorem Ipsum</h1>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                      </div>

스 니펫 확장

더 많은 정보

출처
https://stackoverflow.com/questions/39916951