쿼리 창 스크롤에 jQuery 애니메이션 배경 이미지 위치



스크롤 플러그인 (5)

여기 있습니다. 배경은 10 % 스크롤로 설정됩니다. 코드에서 10을 변경하여 배경 스크롤 속도를 변경할 수 있습니다.

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
}

<div class="bg">
   <span>..</span>
</div>

자바 스크립트

$('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});

http://jsfiddle.net/Vbtts/ 에서 작업 예제를 확인하십시오.
전체 화면 예 : http://jsfiddle.net/Vbtts/embedded/result/ 이 링크를 클릭하십시오.

jQuery를 사용하여 스크롤 효과를 얻으려고합니다. overflow가 숨겨진 100 % 브라우저 창 크기로 설정된 배경 div가 있습니다. 이것은 대략적인 큰 배경 이미지를 가지고 있습니다. 1500px x 2000px.

내가 원하는 결과는 사용자가 스크롤 한 거리의 백분율로 배경 이미지가 움직이는 페이지를 아래로 스크롤 할 때입니다. 따라서 200px 스크롤 할 때마다 페이지 아래로 스크롤하면 이미지가 같은 방향으로 10px 이동합니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까? 이것은 가능한가? :) 사전에 많은 감사드립니다.

최신 정보

이후 오티스 (Otis)의 제안에 대한 변형을 시도했지만 아직까지 내가 놀고있는 코드를 고민하고있다.

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});     

누구든지 내가 뭘 잘못하고 있는지 밝힐 수 있습니까?


Answer #1

사용자가 페이지에서 얼마나 멀리 스크롤했는지 보여주는 예를 보려면 여기 를보십시오. $(this).scrollTop() 하시겠습니까?

$ (this)를 참조하는 대신 백그라운드 div를 사용해보십시오. 그런 다음 .scroll 함수를 사용하여 배경 이동 정도를 결정하십시오.

코드는 다음과 같이 보일 것입니다.

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});

Answer #2

이렇게 할 수 있습니다.

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})

Answer #3

CSS에 두 부분이있을 때 + = 또는 - =를 사용할 수 있다고는 생각하지 않습니다. 할 수있는 일이 있습니다. 조금 까다 롭지 만 작동합니다.

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        var bgpos = $("#div").css("background-position");
        var bgposInt = 0;
        if(bgpos.indexOf("px")!=-1) {
            bgpos = bgpos.substr(bgpos.indexOf("px")+3);
            bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
        }
        bgposInt += 10;
        $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
    }
});

이 코드는 div의 배경 위치 (최상위 위치)에서 두 번째 숫자 만 가져 와서 int로 변환하고 10 씩 증가시킵니다. 그러면 div가 새 위치에 애니메이션으로 나타납니다.


Answer #4

이것은 나를 위해 일했다 :

js에서 :

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});

CSS에서 :

#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;

#main은 내가 배경 이미지를 가지고 싶었던 div입니다. 신장이 필요 없음 : html, body의 경우 100 %.

이것은 여러 배경 이미지에 대한 변형입니다.





jquery-animate