Отображение триггерного изображения с CSS3

Question

Я вроде как ноб с переходом css3, я хотел бы вызвать изображение в позиции прокрутки (или когда видимо) с помощью анимации css3 от непрозрачности: от 0 до 1. У меня есть отличный пример здесь : http://bonvalletromain.com/projects/citroen-creative-awards

Я хочу сделать то же самое с изображениями и вызвать их в положении прокрутки.

Любая идея?

Answer 1

Я думаю, вам придется использовать какой-то javascript для запуска событий. Вот простое решение, которое использует JQuery для прослушивания события прокрутки в окне:

$(window).scroll(function(){ 
    if ($(document).height() - $(window).height() < 20) 
    {   
    $('#DivWithImage').fadeIn(); 
    } 
}); 

(выше на основе Scroll to reveal content jQuery Plugin).

Вы можете изменить выше, чтобы добавить класс к DIV, как показано здесь: http://www.impressivewebs.com/css3-transitions-javascript/

и, следовательно, сделать анимацию с помощью CSS3, но если вы уже используете JQuery, зачем?