How can I slide a image up and down over a background image to create a scanning effect?


Tags: javascript,jquery,css

Problem :

I can across a nicely done scanning effect (on GTmetrix), where the image moves up and down over a background image.

They are using JavaScript to do this, but I wonder if this can be done with CSS, or if not how can I make this with JavaScript?

My code would be:

<style>
  #screenshot {
    margin: 8px auto 0 auto;
    border-radius: 8px;
    border: 2px solid #e4e4e4;
    width: 300px;
    height: 225px;
    background: url("background-box.png") no-repeat center center;
    position: relative;
  }

  #scanner {
    position: absolute;
    top: -7px;
    left: -19px;
  }
</style>

<div id="screenshot">
  <img src="scanner.png" alt="" id="scanner" />
</div>


Solution :

If you want to do it with javascript here is an working example for you what i made it. You must use jquery for catch scanner div. Its endless animation and you can change speed and height.Speed must be miliseconds(1000ms is 1 sec) animatescanner(height,speed);

Link : http://jsfiddle.net/kfg9nutx/1/

Javascript :

x = 0;
xstate=0;
function animatescanner(height,speed){
setInterval(function(){ animateit(height); },speed);
}
function animateit(height){
    if(x==0){xstate=0}
    if(xstate==0){x++}
    if(xstate==1){x--}
    if(x==height){xstate=1}
    $("#scanner").css("top",x);
}
animatescanner(225,5);

Dont forget to include jquery.


    CSS Howto..

    how to give multiple colors in the same cell in a full calendar?

    How to remove white border from blur background image

    How to have the class=“selected” depending on what the current page/url is

    How to access two Ids in one css selector

    How to reload CSS after ajax call

    How to define alternative font-family corresponding to font-size CSS

    How to get image info from css into MasterPage'gridview?

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to style a