Wie Bild Scroll-Effekt in ein anderes Bild zu machen?

Question

Ich möchte etwas ähnliches wie dies machen, meine Seiten in diesem wie page

in Scrolling

Effekt zu fördern ich von Computer das Bild gefunden ist nur ein Bild:

und Website-Scrolling innen Bild auch:

Also meine Frage ist, wie anderes Bild machen in blättern IDE, dass Computer PC, wie auf der ursprünglichen Seite, die ich zur Verfügung stellte, vielleicht etwas JS?

Dies ist ähnlich solution i gefunden:

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); 

und CSS:

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

aber wie man dieses Bild in PC-Bild, und nach oben und unten bewegen?

Answer 1

Hier ist alles, was Sie brauchen.

.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

Dies könnte nicht die beste Lösung sein, aber die einzige, die ich von jetzt denken kann:

1) Man könnte das Bild von Computer bearbeiten, schneiden Sie den Bildschirm aus, und mach es transparent.

2) Machen Sie 2 divs, eine innerhalb andere.

3) Zuerst, größere wird ein Bild von Computer enthalten.

4) Zweite wird genau den leeren Platz im Bild des Computers ausfüllen, wo der Bildschirm wäre.

5) Achten Sie darauf, overflow: scroll; in Ihrem Stylesheet für innere div hinzuzufügen.

Es wäre in etwa so aussehen:

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:

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

Jetzt ich bin mir bewusst, dass diese Lösung schwierig sein wird, reaktionsfähiger zu machen, aber es ist die denke nur, dass ich jetzt sofort daran denken kann.