배경 이미지 스크롤

배경 이미지를 끝 픽셀까지 스크롤 한 다음 이미지의 시작 부분으로 뒤로 이동하고 싶습니다. 그 순서를 계속 반복하고 싶습니다.배경 이미지 스크롤

코드가 있지만 배경 이미지를 한 방향으로 연속적으로 스크롤합니다.

내가 원하는대로이 코드를 어떻게 변경할 수 있습니까?

CSS :

body{margin:0; border:0; background:url(ejemplo3.jpg) repeat-x;}

HTML :

<body></body>

JQuery와 : 나는 당신이 필요로 이해하고 이미지의 높이 경우에 따라

var scrollSpeed = 50; 

// set the default position 
var current = 0; 

// set the direction 
var direction = 'h'; 

function bgscroll() { 
    // 1 pixel row at a time 
    current -= 1; 

    // move the background with backgrond-position css properties 
    $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px"); 
} 

//Calls the scrolling function repeatedly 
setInterval(bgscroll, scrollSpeed);

출처

2014-03-03 user3375954

때를 background repeat-x를 가지고 있으면 루프 안으로 들어가서 한 방향으로 만 회전하는 이미지를 볼 수 있습니다.

이

/* (이미지 assing) 배경 이미지 * 추가 /

body{margin:0; border:0; background:url(dsc01549.jpg) no-repeat;}

/* 추가 : 더 반복으로 설정 이미지를 유지하는 경우 아래와 같이 그러나 다음 코드를 수정할 수 있습니다 스크립트 */

// Global Variables 

var scrollSpeed = 50; 
// set the default position 
var current = 0; 
// image height & rotation complete 
var _ht,_finishNRot=false; 
// set the direction 
var direction = 'h'; 
// create hidden image element to grab height of it for calculation purpose 
var url = $('body').css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); 
var bgImage = $('<img />'); 
bgImage.hide().bind('load', function(){ _ht = $(this).height(); }); 
$('body').append(bgImage); 
bgImage.attr('src', url); 

function bgscroll() { 
// while rotation not completed 
if(_finishNRot==false){ current -= 1;} else {current+=1; } ; 
// -ve Rotation completed 
if(-(current)==_ht)_finishNRot = true; 
// +ve Rotation completed 
if((current)==0)_finishNRot = false; 
// move the background with backgrond-position css properties 
$('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px"); 
} 

//Calls the scrolling function repeatedly 
setInterval(bgscroll, scrollSpeed);

희망이 있습니다.

건배, 아쇽

출처

2014-03-03 19:47:34

아쇽 덕분에 정말 감사합니다! 코드가 완벽하게 작동합니다. – user3375954

안녕하세요, 1024 또는 1480과 같은 화면 해상도가 배경 이미지가 최종 픽셀 (가로)에 도달하지 않거나 최종 픽셀 (가로)을 초과 할 때 코드에 문제가 있습니다. 어떻게 해결할 수 있습니까? 다음은 온라인 예입니다. http://www.ideas-web.net63.net/prueba/prueba.html – user3375954

; 'background-repeat y'를 사용하고 CSS에서 배경 이미지를 수정하지 마십시오. 이것은 당신이

출처

2014-03-03 18:04:13 mojowebia

는이 같은 우아한 것을 의미보기 동안 이미지를 스크롤 할 수 있도록해야한다 : 나는 그런 페이지에서 읽어 그것을 사랑해야합니다 것 http://jsfiddle.net/NicoO/fMHL4/ 를)

@keyframes move-body-bg 
{ 
    0% { background-position:left top; } 
    50% { background-position:left bottom; } 
    100% { background-position:left top; } 
} 

html,body 
{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background-image: url(http://www.placehold.it/800x2000); 
    transition-property: background-position; 

    -webkit-animation: move-body-bg 2s infinite; 
    -moz-animation: move-body-bg 2s infinite; 
    -o-animation:  move-body-bg 2s infinite; 
    animation:   move-body-bg 2s infinite; 
}

출처

2014-03-03 18:13:33

배경 이미지 스크롤

답변

관련 문제