С каждым днем веб страницы становятся все более интерактивными. Каждый сайт старается быть все более привлекательным для пользователя, чтобы удержать его на своих страницах подольше. А как Вам идея создания интерактивной фотогалереи, где пользователь может самостоятельно передвигать картинки с задних планов на передние, как-то группировать их и т.д. Заинтересовала? Смотрите, как это делается…
Идея будет следующей. Пользователь заходит на страницу Вашей галереи и попадает на, так называемую, деревянную доску, на которой и разложены наши фотографии. Он может двигать эти фото, перемещая на передний план более интересные ему или разложить их по кучкам… ну в общем все, что ему захочется. Я думаю, что такая страничка должна заинтересовать посетителя Вашего сайта. Давайте приступим к реализации этой идеи.
1. Начнем с того, что подготовим изображения. Изображения будут представлять собой как бы снимки с полороида разложенные на доске. Следовательно, снимки должны быть квадратной формы. Я подготовила 7 фото для этого примера, которые Вы можете найти в дополнительных материалах, а можете подготовить и свои изображения. В нашем примере размер изображений 250px на 250px. Располагаться они будут в созданной для них папке img.
2. После того как подготовили изображения и разместили их в нужной папке, создаете новый html файл и размещаете в нес следующий код:
<!doctype html> <html> <head> <meta charset="windows-1251"> <title>Интерактивная Фото галерея</title> </head> <body> <div id="doska"> <ul> <li><img src="img/01.jpg" width="250" height="250" alt="photo 1"><span>Описание к фото 1</span></li> <li><img src="img/02.jpg" width="250" height="250" alt="photo 2"><span>Описание к фото 2</span></li> <li><img src="img/03.jpg" width="250" height="250" alt="photo 3"><span>Описание к фото 3</span></li> <li><img src="img/04.jpg" width="250" height="250" alt="photo 4"><span>Описание к фото 4</span></li> <li><img src="img/05.jpg" width="250" height="250" alt="photo 5"><span>Описание к фото 5</span></li> <li><img src="img/06.jpg" width="250" height="250" alt="photo 6"><span>Описание к фото 6</span></li> <li><img src="img/07.jpg" width="250" height="250" alt="photo 7"><span>Описание к фото 7</span></li> </ul> <div id="description"> <h1>Эти забавные животные</h1> <p>Познакомьтесь с Этими смешными собаками...</p> </div> </div> </body> </html>
3. Теперь нам нужно подготовить еще одно изображение. Это изображение фона. Вы можете воспользоваться изображением из дополнительных материалов, а можете сделать свое изображение. Сохраните его в ту же папку, что и остальные картинки.
4. Давайте придадим основные стили для нашей страницы. Создадим файл таблицы стилей и подключим его к нашему html документу. Для этого в теге head пропишите следующую строчку:
<link rel="stylesheet" type="text/css" href="style.css">
Теперь в новом файле таблицы стилей прописываем следующие стили:
body{background: transparent url(img/bg.jpg) repeat top left; font-family:'Bad Script';} #doska{width:1000px; height:400px; position:relative; margin:auto;} #doska ul{margin:0; padding:0; position:relative; width:960px; height:400px;} #doska ul li{position:absolute; top:200px; left:460px; display:block; margin:0; padding:0; list-style:none; background:#fefefe; width:250px; height:250px; padding:20px 20px 40px 20px;} #doska ul li img{border:1px solid #CCC;} #doska ul li span{position:absolute; bottom:10px; left:20px;}
Если мы загрузим нашу страницу в браузере, то увидим нечто подобное:
5. Теперь давайте немного изменим наш шрифт. Сделаем так, чтобы он был как бы написан, а не напечатан. Для этого в html файле давайте вставим сразу после строчки подключения наших стилей следующую строчку:
<link href='http://fonts.googleapis.com/css?family=Just+Another+Hand|Bad+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
Результат будет вот таким:
6. Давайте с помощью CSS3 добавим тени для каждого нашего снимка. А также позаботимся о том, чтобы тени корректно отображались во всех браузерах. Для этого с стили фотографий добавим следующий код:
-webkit-box-shadow:0px 0px 10px #000; -moz-box-shadow:0px 0px 10px #000; -o-box-shadow:0px 0px 10px #000; -ms-box-shadow:0px 0px 10px #000; box-shadow:0px 0px 10px #000;
Сейчас если мы перезагрузим страницу, то она будет выглядеть так:
7. Пришло время заняться интерактивностью. И здесь нам поможет библиотека JQuery UI. Перейдите на сайт http://jqueryui.com. Там нажмите на вкладку Download. В этой вкладке оставьте галочки только на всех элементах заголовка UI Core, а также на чекбоксе Draggable.
После этого загрузите JQuery UI на свой компьютер. Откройте архиватором, перейдите в папку js и оттуда скопируйте два файла, как на скриншоте ниже:
Создайте папку с именем scripts и поместите туда эти два файла.
Теперь мы можем подключить их в html документе. Для этого в теге head пропишите следующий код:
<script src="scripts/jquery-1.9.1.js"></script> <script src="scripts/jquery-ui-1.10.3.custom.min.js"></script>
8. Итак, мы подготовились к тому, чтобы создавать наш собственный код. Давайте создадим новый файл java script и подключим его к нашему html файлу:
<script type="text/javascript" src="scripts/myscript.js"></script>
А внутри этого нового файла пропишем следующее:
$(document).ready(function(){ $("#doska ul li").draggable(); });
Можете перезагрузить страницу браузера и попробовать растащить фотографии по разным сторонам.
9. Итак, мы уже можем перетаскивать наши фото по экрану, но страница еще не идеальна. Нужно добавить дополнительных эффектов. И первое, что мы сделаем это добьемся того, чтобы фотографии при запуске страницы находились не в стопке как сейчас, а были разложенными по всей доске.
Для этого преобразуйте код java script следующим образом:
$(document).ready(function(){ $("#doska ul li").each(function() { xpos = Math.floor(Math.random()*920); ypos = Math.floor(Math.random()*420); $(this).delay(1000).animate({top:ypos,left:xpos}); }).draggable(); });
Попробуйте теперь перезагрузить страницу и Вы увидите как по истечению одной секунды стопка фотографий разложится по экрану в случайном порядке.
10. Когда все фотографии лежат ровно это выглядит немного неестественно, поэтому нужно придать им определенный наклон и опять же сделать так, чтобы наклон был разный. Для этого, преобразуйте наш код java script до следующего вида:
$(document).ready(function(){ $("#doska ul li").each(function() { xpos = Math.floor(Math.random()*920); ypos = Math.floor(Math.random()*420); rotation = Math.floor(Math.random()*15); if(Math.floor(Math.random()*11)>5){ rotation = rotation * -1; } $(this).data("rotation", rotation); $(this).delay(1000).animate({top:ypos,left:xpos}).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)"}); }).draggable(); });
Можете проверить в браузере что получилось:
11. Добавим дополнительный анимационный эффект. Для этого перейдите в файл стилей и пропишите для #doska ul li следующие стили:
-webkit-transition:0.2s -webkit-transform linear; -moz-transition:0.2s -moz-transform linear; -ms-transition:0.2s -ms-transform linear; -o-transition:0.2s -o-transform linear; transition:0.2s transform linear;
12. Теперь сделаем так, чтобы при выборе определенной фотографии, она немного увеличивалась в размере и меняла свой наклон (стояла прямо). Для этого в файле стилей пропишем новый класс со следующими параметрами:
.ui-draggable-dragging { -webkit-transform: rotate(0deg) scale(1.2) !important; -moz-transform: rotate(0deg) scale(1.2) !important; -ms-transform: rotate(0deg) scale(1.2) !important; -o-transform: rotate(0deg) scale(1.2) !important; transform: rotate(0deg) scale(1.2) !important; }
Если Вы обновите страницу и попробуете передвинуть какую-нибудь фотографию, то увидите этот эффект.
13. Как Вы можете видеть все работает хорошо. Есть только один маленький недостаток. Когда мы передвигаем какое-либо фото, оно загораживается другим фото, не выходит на передний план. Давайте исправим это положение. Для этого откройте файл с java script кодом и в самом верху пропишите такую строчку:
var zindex = 50;
А теперь исправьте .draggable(); на следующий код:
.draggable({ start: function(){ zindex = zindex + 1; $(this).css({zIndex:zindex}); }, stop: function(){ rotation = Math.floor(Math.random()*15); if(Math.floor(Math.random()*11)>5) { rotation = rotation * -1; } $(this).data("rotation",rotation); $(this).css({webkitTransform:"rotate("+rotation+"deg)",MozTransform:"rotate("+rotation+"deg)",msTransform:"rotate("+rotation+"deg)",transform:"rotate("+rotation+"deg)"}); } });
Попробуйте перезагрузить страницу браузера и подвигать фото. Вы увидите, что теперь выбранная фотография выходит на передний план.
14. Осталось совсем немного. Давайте придадим стилей нашей надписи с названием страницы и с кратким описанием. Для этого в стилях пропишите следующий код:
#description{position:absolute; top:10px; left:-200px; width:230px; padding:30px 50px; background: transparent #FFF top left; opacity:0.7; -webkit-transform:rotate(10deg) !important; -moz-transform:rotate(10deg) !important; -ms-transform:rotate(10deg) !important; -o-transform:rotate(10deg) !important; transform:rotate(10deg) !important; color:#006; font-size:1.2em; } #description p{font-size:18px; font-weight:600;}
Можете любоваться результатом.
Вы можете создавать такие галереи на различные тематики и с разным стилевым оформлением. И всегда это будет выглядеть интересно и притягивать пользователя.
Если урок оказался для Вас полезным, я буду очень рада если Вы оставите свой комментарий или порекомендуете этот пост друзьям.
Также хочу сказать, что в скором времени появится много новых статей о создании разных интерактивных элементов для веб и еще много чего интересного. Поэтому подписывайтесь на обновление блога сейчас, чтобы быть в числе первых, кто прочтет эти статьи и уроки и применит их на практике.
На этом Все. Всего доброго и до новых встреч в следующих уроках!