JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<img id="foreg" src="http://www.jquery4u.com/demos/jquery4u-parallax-demo/butterflies3.png">

<img id="backg" src="http://www.mochimochiland.com/blogimages/grass2.jpg">

CSS

#foreg{
    position:absolute;
  z-index:2;  
    height:400px;
}

#backg{
 position:absolute;
  z-index:1;  
    height:1000px;
    
}

JavaScript

foreg_x = $('#foreg').offset().left;
foreg_y = $('#foreg').offset().top;
foreg_width = $('#foreg').width();
foreg_height = $('#foreg').height();
backg_x = $('#backg').offset().left;
backg_y = $('#backg').offset().top;
mouse_hover = false;

$(document).mouseover(function(e){
    if (mouse_hover !=true){
    mouse_x = e.pageX - (foreg_width/2);
   mouse_y = e.pageY - (foreg_height/2);
  
 
    

    $('#foreg').animate({
        'left' : mouse_x,
        'top' : mouse_y
    },300,function(){
        mouse_hover = true;
        
    });
}

});

    $(document).mousemove(function(e){
        if(mouse_hover == true){
        mouse_dx = -(e.pageX);
        mouse_dy = -(e.pageY);
            $('#foreg').css({
                
                'left': mouse_dx,
                'top' : mouse_dy
            });
        
   mouse_dx = (mouse_dx)/2;
   mouse_dy = (mouse_dy)/2;

            $('#backg').css({
                
                'left': mouse_dx,
                'top': mouse_dy
            
            });
       } 
    });