Эффект фотографирования

В сегодняшней фотосессии принимают участие красивые пейзажи, а Вы будете в качестве фотографа, пытающегося заснять самое интересное... Будем создавать эффект фотографирования с помощью jQuery плагина PhotoShoot 1.0.

Проблемы с которыми столкнулись:

  • Эффект размытия, заблюривания. Решили данную проблему накладыванием множества DIV-ов с фоновым изображением и прозрачностью, каждый из которых смещается случайным образом на несколько пикселей.
  • Скрытие курсора. Решили проблему с помощью назначения пользовательского курсора в качестве которого используем просто прозрачный файл курсора .cur, а для Chrome пришлось сделать отдельный прозрачный курсор, но с одним белым пикселем, т.к. этот браузер отказывается работать с полностью пустым курсором, возможно в следующих версия проблема исчезнет. В Opera, к сожалению, от курсора избавиться не получилось, браузер в целом не поддерживает пользовательские курсоры, но всё остальное работает прекрасно.
  • Отсутвие поддержки масок. Эту проблему за нас решает плагин.

Разметка HTML

В шапке подключаем все необходимые нам файлы:

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="photoShoot/jquery.photoShoot-1.0.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="photoShoot/jquery.photoShoot-1.0.js"></script>
<script type="text/javascript" src="script.js"></script>

По сути всю работу за нас выполняет плагин, но несколько настроек сделать придеться.
Создать контейнер #main и при желании добавить заголовок:

<div id="main">
    <h1>Эффект фотографирования на jQuery и CSS</h1>
</div>

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

<div id="main">
    <h1>Эффект фотографирования на jQuery и CSS</h1>
    <div class="blur" style="......"></div>
    <div class="blur" style="......"></div>
    <!--  Более 8 прозрачных div-ов -->
    <div class="overlay" style="opacity: 0.2;"></div>
    <div style="......" class="viewFinder">
        <img src="photoShoot/viewfinder.png" width="300" height="200">
    </div>
    <!-- Дополнительный  html для съемки вставляется тут . Не является частью плагина.  -->
</div>

Тут, как и говорилось выше, эффект размытия достигается наложением прозрачных DIV-ов.
Добавляется видоискатель, который следует за движением мыши по области и фокусирует фоновое изображение.
Плагин предоставляет пользовательскую настройку функции нажатия. Данной возможностью мы и воспользовались для имитации вспышки и вставки новой миниатюры (полученной фотки) в DIV - это не является частью плагина.

CSS

Плагин уже включает собственный файл стилей photoShoot/jquery.photoShoot-1.0.css, поэтому мы оформим оставшуюся часть страницы:

#main{
    /* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
    margin:0 auto;
    width:960px;
    height:600px;
}

.shot{
    /* These contain a scaled down version of the background image: */

    border:3px solid #FCFCFC;
    float:right;
    position:relative;
    margin-left:10px;
    overflow:hidden;

    /* Adding a CSS3 shadow below the shots: */

    -moz-box-shadow:0 0 2px black;
    -webkit-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.shot img{
    display:block;
}

.album{
    /* This div holds the shots */
    bottom:50px;
    height:110px;
    overflow:hidden;
    position:absolute;
    right:20px;
    width:490px;
}

.album .slide{
    /* The slide div is contained in album  */
    width:700px;
    height:110px;
    position:relative;
    left:-210px;
}

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

jQuery

photoShoot плагин сам по себе здесь не описывается, о нём можно почитать на официальном сайте.
Нам нужно сделать свой дополнительный код jQuery, который:

  • Вставляет .album в #main div
  • Выбирает случайное изображение из массива (со стороннего сайта или из локальной папки)
  • Создает опции объекта
  • Определяет пользовательскую функцию съемки, которая вызывается по клику.
  • Вызывает плагин методом .photoshoot()

script.js

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    // Assigning the jQuery object to a variable for speed:
    var main = $('#main');    

    // Setting the width of the photoshoot area to 
    // 1024 px or the width of the document - whichever is smallest:
    
    main.width(Math.min(1024,$(document).width()));
    
    // Creating an array with four possible backgrounds and their sizes:
    
    var pics = new Array(                         
                            { url:'http://farm4.static.flickr.com/3595/3405361333_77f2a5e731_b.jpg', size:{x:1024,y:677}},
                            { url:'images/1.jpg', size:{x:1024,y:640}},
                            { url:'images/2.jpg', size:{x:1024,y:640}},
                            { url:'images/3.jpg', size:{x:1024,y:640}}
    );
    
    // Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:
    
    var bg = pics[parseInt(Math.random()*4)];
    
    // Creating an options object (try tweeking the variables):
    
    var opts = {
        image        :    bg.url,
        onclick        :    shoot,
        opacity        :    0.8,
        blurLevel    :    4
    }
    
    // Converting the #main div to a photoShoot stage:
    
    main.photoShoot(opts);

    // Adding the album holder to the stage:
    $('<div class="album">').html('<div class="slide" />').appendTo(main);


    // Our own shoot function (it is passed as onclick to the options array above):
    
    function shoot(position){
        // This function is called by the plug-in when the button is pressed
        
        // Setting the overlay's div to white will create the illusion of a camera flash:
        main.find('.overlay').css('background-color','white');
        
        // The flash will last for 100 milliseconds (a tenth of the second):
        setTimeout(function(){main.find('.overlay').css('background-color','')},100);
        
        // Creating a new shot image:
        var newShot = $('<div class="shot">').width(150).height(100);

        newShot.append( $('<img src="'+bg.url+'" width="'+(bg.size.x/2)+'" height="'+(bg.size.y/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );
        
        // Removing the fourth shot (the count starts from 0):
        $('.shot').eq(3).remove();
        
        // Adding the newly created shot to the album div, but moved 160px to the right.
        // We start an animation to slide it in view:
        
        newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');    
    }

});

При каждом клике по области изображения, новый кадр добавляется к div-у слайдеру с отрицательным margin с правой стороны. После этого начинается анимация - последний кадр подталкивает снимки находящиеся левее, при этом прячя крайний левый.
Важно, чтобы кадры, которые не видны, удалились с помощью метода remove(), что предотвратит захламленность DOM не нужными элементами.
Вот и всё. Удачи.
СКАЧАТЬСкачек: 256
423,95 Kb
Кто скачал?

ДЕМОПосмотреть
пример