숨겨진 요소로 스크롤

Question

Google지도와 마찬가지로 작동합니다. 어떤 요소를 클릭하면 마커 (좌표)에 부드럽게 움직입니다.

HTML :

<div id="wrapper"> 
    <div id="inner"> 
     <div id="marker"><!-- --></div> 
    </div> 
</div> 
<div class="overflow">Hover to disable overflow</div> 

CSS : 그것이 작동되도록하는 방법

#wrapper { 
    width: 300px; 
    height: 300px; 
    border: 3px solid #999; 
    position: relative; 
    overflow: hidden; 
    margin: 50px auto 0; 
    z-index: 1; 
} 

#inner { 
    width: 600px; 
    height: 600px; 
    background: url("http://i50.tinypic.com/25aq6iu.jpg") no-repeat 0 0 #fff; 
    position: absolute; 
    top: -150px; 
    left: -200px; 
} 

#marker { 
    width: 20px; 
    height: 26px; 
    background: url("http://i50.tinypic.com/29kujo3.png") no-repeat 0 0 transparent; 
    position: absolute; 
    top: 123px; 
    left: 153px; 
} 

.overflow { 
    display: inline-block; 
    background-color: #ccc; 
    margin: 20px auto 0; 
    padding: 10px; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    z-index: 9999; 
} 

? 여기

는 바이올린입니다 : http://jsfiddle.net/xRbR8/1/

Answer 1

당신이 #inner의 배경 위치와 #marker의 왼쪽 상단/애니메이션을해야합니다.

배경 위치에 애니메이션을 적용하는 방법은 Background Position animation in jQuery not working in Firefox을 참조하십시오.