자바 스크립트를 사용하여 마우스 오버시 모든 방향으로 배경 이미지 패닝

페이지의 배경 이미지에 패닝 효과를 추가하려고합니다. 이미지는 1800 x 1067 크기이므로 기본적으로 창보다 커집니다. 하고 싶습니다. 마우스가 창 끝에 도달하면 배경을 모든 방향으로 이동하십시오. 패닝을 수행하는 자바 스크립트 코드를 발견했지만 수평으로 만 이동하여 수직 패닝을 사용하려고했습니다. didnt는 일한다. http://jsfiddle.net/v662t/자바 스크립트를 사용하여 마우스 오버시 모든 방향으로 배경 이미지 패닝

// HTML

<div id="pageBg"> 
</div>

// CSS

#pageBg { 
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll; 
    background-size: cover; 
    height: auto; 
    left: 0; 
    min-height: 768px; 
    min-width: 1024px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

// 자바 스크립트

$(document).ready(function(){ 
    $('#pageBg').mousemove(function(e){ 
     var mousePosX = (e.pageX/$(window).width())*100; 
     $('#pageBg').css('background-position-x', mousePosX +'%'); 
    }); 
});

출처

2013-01-23 Rami Sarieddine

jsfiddle에서 문제의 모의를 할 수 있습니까? http://jsfiddle.net –

방금했습니다. 덕분에 –

제거: 여기

는 JSFiddle에 코드입니다 mousePosY에 대한개 및 추가 몇 자바 스크립트 라인 : 여기

var mousePosY = (e.pageY/$(window).height())*100; 
$('#pageBg').css('background-position-y', mousePosY +'%');

체크 아웃 작업 바이올린 : http://jsfiddle.net/georgedyer/XWnUA/2/

출처

2013-01-23 20:58:10 georgedyer

대단해! 고마워. 나는 여전히 한가지 더 질문한다. 가장자리에 도달했을 때 어떻게 단 냄비를 만들 수 있는가? (창 마지막 50px)? –

가장자리에서 패닝에 대한 다른 대답을 참조하십시오. – georgedyer

내가 더 나은 서식을 포함하려면 여기를 가장자리에서 패닝에 대한 코멘트에 대답하고있다.

정확히의 가장자리에서 패닝 작업을 수행하는 방법에 따라 다릅니다. 마우스가 가장자리 위로 이동하거나 마우스가 움직이지 않지만 가장자리 위로 움직이는 경우에만 이미지가 이동합니까?

첫 번째 경우 : 동일한 피들 코드를 사용하여 mousePosX 또는 mousePosY이 < 10 또는> 90 (또는 가장자리로 정의하려는 비율)인지 확인하십시오. 그렇다면 이미지를 윈도우의 비율로 이동하는 대신 가장자리의 비율로 이동하십시오.

그건 좀 너무 민감 끝낼 수 있습니다, 그래서 당신은 당신이 대신 mouseEnter 및 mouseLeave 이벤트를 사용하는 것이 경우 단지 호버에 이동의 대안으로 이동하고 단지 var interval = setInterval(moveImage,250);를 사용하여 (mouseEnter에 간격을 시작할 수 있기 때문에), 그런 다음 해당 간격 (clearInterval(interval);)을 mouseLeave에서 지우십시오.

the fiddle을 직접 수정하고 원하는 방식으로 작업 할 수 있는지 확인해 드리겠습니다.

출처

2013-01-24 14:35:27 georgedyer

mousePosX 또는 mousePosY가 < 10 or > 인 지 확인하기 위해 옵션 1을 시도했지만 이미지가 점프하고있는 것처럼 보입니다. 그 위치에서 가장자리까지 이미지를 패닝하는 것처럼 부드럽게 전환 할 수 없습니까? –

나는 더 나은 방법 # 2를 위해 바이올린을 만들었다 : http://jsfiddle.net/georgedyer/RRPsa/ ... 스크롤 감도/속도를 'scrollSpeed' 변수로 설정할 수있다 – georgedyer

깔끔한 코드 !!! 고맙습니다 ! –

자바 스크립트를 사용하여 마우스 오버시 모든 방향으로 배경 이미지 패닝

답변

관련 문제