他の画像の中に画像をスクロールするには？

Question

私は、コンピュータからそのイメージがちょうどイメージで見つかっただけで、このpage

のような効果をスクロール中に、私のサイトを促進するために、このような類似した何かを作りたい：

とサイトスクロール内部の画像もある：

だから私の質問は、インをスクロールする他の画像を作成する方法であり、 ideは、元のサイトのように、私が提供したコンピュータPC、おそらくいくつかのJS？

これは私が見つけたsolution似ています。

HTML：

<ul id="scroller"> 
<li><img src="https://i.stack.imgur.com/lPcRz.jpg" width="400" 
height="1000"></li> 
</ul> 

JS：

(function($) { 
     $(function() { //on DOM ready 
      $("#scroller").simplyScroll({ 
       customClass: 'vert', 
       orientation: 'vertical', 
       auto: true, 
       manualMode: 'end', 
       frameRate: 8, 
       speed: 3 
      }); 
     }); 
    })(jQuery); 

とCSS：

/* Container DIV */ 
    .simply-scroll { 
     width: 400px; 
     height: 1000px; 
     margin-bottom: 1em; 
    } 

この画像をパソコンの画像の中に入れて上下に移動するには？

Answer 1

ここに必要なのはすべてです。

.computer-empty { 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 540px; 
 
} 
 
.computer-screen { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    height: 247px; 
 
    width: 445px; 
 
    left: 50px; 
 
    top: 20px; 
 
} 
 
.screen-landing { 
 
    left: 0; 
 
    line-height: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    transition: all 6s; 
 
    -o-transition: all 6s; 
 
    -ms-transition: all 6s; 
 
    -moz-transition: all 6s; 
 
    -webkit-transition: all 6s; 
 
} 
 
.screen-landing:hover { 
 
    cursor: pointer; 
 
    margin-top: -1036px; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    width: auto\9; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    border: 0; 
 
    -ms-interpolation-mode: bicubic; 
 
} 
 
.computer-empty img.computer { 
 
    width: 100%; 
 
}

<div class="text-align-center computer-empty"> 
 
       
 
       <a target="_blank" href="http://irontemplates.com/demos/redirect.php?theme=The%20Rise" class=""> 
 
       <div class="computer-screen"> 
 
        <div class="screen-landing"> 
 
         <img src="http://fwrd.irontemplates.com/home/img/the_rise.jpg" alt="demo - the rise"> 
 
        </div> 
 
       </div> 
 
       <img class="computer" src="http://fwrd.irontemplates.com/home/img/computer.jpg" alt="computer"> 
 
       </a> 
 
       <h1>The Rise</h1> 
 
      </div>

Answer 2

これが最善の解決策ではないかもしれませんが、私は今考えることができる唯一の1：

1）あなたは、コンピュータの画像を編集画面を遮断し、可能性がありそれを透明にする。

2）2つのdivを1つずつ作成します。

3）最初に大きなものにはコンピュータの画像が含まれます。

4）2番目の画像は、コンピュータの画面の空白部分を正確に埋めます。

5）inner divのスタイルシートにoverflow: scroll;を必ず追加してください。今私は、このソリューションが応答させるのは難しいだろうことを認識していますが、それはある

.img-box{ 
     width: ???; 
     height: ???; 
     overflow: scroll; 
    } 

：

HTML：：

<div> 
    <img src="path to your picture of computer"> 
    <div class="img-box"> 
     <img src="path to your picture of inside screen"> 
    </div> 
</div> 

CSS

それは次のようになります私は今思うことができると思うだけです。