jquery 가로 패닝 구름

Question

나는 화면의 100 % 너비를 차지하도록 설정된 구름 이미지가 있습니다. 나는 "Spritely"플러그인이 구름을 계속 팬 할 수있는 방식과 비슷하게 그것을 펼칠 수 있기를 원합니다. 그러나 Spritely를 사용하지는 않습니다. 왜냐하면 이것이 "배경 이미지"가 아니기 때문입니다. 나는 이것이 의미가 있기를 바랍니다. 이미지에 대한

내 코드 :

<div id="clouds" style="position:absolute; z-index:99; width:100%; top:56.5%;"> 
    <div id="clouds1" style="width:auto;overflow:hidden; position:relative; z-index:99; left:0%;"> 
    <img src="Images/clouds.png" style="width:100%" /> 
    </div> 
    </div> 

이 방법으로 할 수 있습니다 이미지를 사용하여 나 브라우저의 크기가 확장해야합니다.

누군가이 이미지를 계속 팬하는 방법을 알아낼 수 있습니까?

감사합니다.

• 제임스

Answer 1

난 당신이 '수평 스크롤을 paralax'라는 용어를 사용하여 솔루션을 검색에서 도움이 될 것 같아요.

당신은 응답 할 수 불통 될 수

http://www.egstudio.biz/easy-parallax-with-jquery/

등의 튜토리얼을 찾을 수 있어야합니다.

Answer 2

나는 이와 똑같은 문제가있었습니다. 나는 그것을 구름과 함께 사용하지는 않았지만, 쉽게 구현할 수 있으며, 단지 4 줄의 코드만을 사용할 수있다.

HTML

<div class="slideshow"> 
     <ul> 
      <li><img src="img1.jpg" alt="jQuery" width="350" height="200" /></li> 
      <li><img src="img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li> 
      <li><img src="img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li> 
      <li><img src="img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li> 
     </ul> 
    </div> 

CSS

/* slideshow styles */ 
.slideshow { 
    width: 350px; 
    height: 200px; 
    margin: 3em auto; 
    overflow: hidden; 
    border: 3px solid #f2f2f2; 
} 
.slideshow ul { 
    width: 400%; 
    height: 200px; 
    padding:0; margin:0; 
    list-style:none; 
} 
.slideshow li { float: left; } 

$(function(){ 
    setInterval(function(){ 
     $(".slideshow ul").animate({marginLeft:-350},800,function(){ 
     $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first")); 
     }) 
    }, 3500); 
}); 

소스 JQuery와 - http://creativejuiz.fr/blog/doc/infinite-slideshow/