Can this Flash effect be receated with JS and css?

take a look at the first panel (in red) on the homepage.

http://www.boomtown.co.za/

I'd like to do something like this with an invisible image and only reveal parts of it as the mouse tracks over. Is开发者_如何学运维 this possible without using Flash?

---

This can be done quite easily using some css and background positioning with javascript. Here's 2 examples : http://jsbin.com/ococal/3

The source code is quite easy to understand and you can start working out with this.

---

You could do it by using a transparent png image that was a radial fade from transparent in the centre to semi-transparent at the edges and making it follow the mouse.

document.onmousemove=mousefollower
function mousefollower(e){
  x = (!document.all)? e.pageX : event.x+document.body.scrollLeft;
  y = (!document.all)? e.pageY : event.y+document.body.scrollTop;
  document.getElementById('myImage').style.left = x + 'px';
  document.getElementById('myImage').style.top = y + 'px';
}

Obviously you can use jQuery for this too, and set the mousemove function to occur only over a specific div. Also make sure the image you use is large enough (at least twice the size) so that the edges don't show up when you move to the far sides of the div (this means that for large areas you will need a huge image so it may get a big laggy). Put the image in the div and set overflow to none to clip anything that falls outside of the area.

---

It is possible yes, but only in modern browsers (chrome, safari, firefox, opera).

You would need to have two <div>'s

like so..

<div class="container">
    <div class="revealer"></div>
</div>

and CSS like so

.container {
    position: relative;
    background: url("images/your-background.jpg");
}
.revealer {
    position: absolute;

    //set the mask size to be the size of the container
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    z-index: 1;
    background: url("images/your-background-over-state.jpg");

    //css3 image masks, this is not cross browser, see the demo for 
    // cross browser syntax
    mask: url("images/mask-shape.png") no-repeat;

    //make sure the mask is off screen at first, by setting the mask position
    //to minus the width and height of your mask image
    mask-position: -300px -300px        
}

And the JS

window.addEventListener('load',function(){
    var background = document.querySelector('.container'),
        revealer = document.querySelector('.revealer');

    background.addEventListener('mousemove', function(e){

        //the minus represents the half the width/height of your mask image
        // to make the reveal centred to the mouse.
        var x = e.offsetX - 150,
            y = e.offsetY - 150; 

        // move the position of the mask to match the mouse offsets     
        revealer.style.maskPosition = x+'px '+y+'px';

        return false;
    });


});

Because of the way this works you need to ensure that any other content in the .container has a higher z-index than the mask to ensure the content is not masked. To do this add relative positioning to the elements in the container

like so

.container *:not(.revealer) {
    position: relative;
    z-index: 2;
}

Images used in masks are images where the solid colours create the visible or fill area, and the transparent areas are the mask or cut out.

Demo with cross browser code