Может ли этот эффект Flash быть отменен с помощью JS и CSS?

Question

взгляните на первую панель (красного цвета) на главной странице.

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

Я бы хотел сделать что-то подобное с невидимым изображением и показать только частиоб этом, как мышь отслеживает.Возможно ли это без использования Flash?

Answer 1

Это может быть сделано довольно легко, используя некоторые CSS и позиционирование фона с помощью JavaScript.Вот 2 примера: http://jsbin.com/ococal/3

Исходный код довольно прост для понимания, и вы можете начать работать с этим.

Answer 2

Вы могли бы сделать это, используя прозрачное изображение PNG, которое было радиальным замиранием от прозрачного в центре до полупрозрачного по краям и заставляющего его следовать за мышью.

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';
}

Очевидно, что для этого вы также можете использовать jQuery и настроить функцию mousemove только на определенный div. Также убедитесь, что используемое изображение достаточно велико (по крайней мере, в два раза больше), чтобы края не отображались при перемещении к дальним сторонам элемента div (это означает, что для больших областей вам понадобится огромное изображение, поэтому это может стать большим отставанием). Поместите изображение в div и установите для параметра overflow значение none, чтобы обрезать все, что выпадает за пределы области.

Answer 3

Это возможно, но только в современных браузерах (Chrome, Safari, Firefox, Opera).

Вам понадобится два <div>

, как это ..

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

и CSS, как это

.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        
}

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


});

В связи с тем, как это работает, необходимо убедиться, что любой другой контент в.container имеет более высокий z-индекс, чем маска, чтобы гарантировать, что содержимое не маскируется.Для этого добавьте относительное расположение элементов в контейнере

следующим образом:

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

Изображения, используемые в масках, - это изображения, в которых сплошные цвета создают видимую область или область заполнения, а прозрачные области.маску или вырезать.

Демонстрация с кросс-браузерным кодом