—»     —»   Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery
  Раздел: Java-Скрипты, Руководства   Нет комментариев  

Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery

Хотите сделать по-настоящему уникальный и привлекательный эффект для вашего веб-сайта? Подумайте насчет анимации, которая бы увеличивала определенные фрагменты страницы, когда на них кликают!

Возможно, это звучит устрашающе, и вам кажется, что для этого нужно вложить много усилий, но на самом деле при помощи jQuery и Zoomooz.js это можно сделать в считанные минуты! Мы предлагаем вам пошаговое руководство по созданию впечатляющей галереи с возможностью увеличения.

Вот что мы будем разрабатывать

Живое демо: Посмотреть можно тут

Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery

Zoomooz.js: небольшое ознакомление

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

HTML-код: вкрапления

В головную часть этого проекта нужно много чего добавить. Первое, что вам нужно сделать – это перейти на главную страницу zoomooz.js и скачать библиотеку. Вы должны заметить, что архив содержит не одну, а сразу несколько библиотек javascript. К счастью, в скачанном файле вы обнаружите инструкцию по запуску скрипта, так что здесь всё просто (с этим вы разберётесь сами).

Далее для начала нам понадобится следующий код:

<head>
    <title>Zooming Test</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="sylvester.js"></script>
    <script type="text/javascript" src="purecssmatrix.js"></script>
    <script type="text/javascript" src="jquery.animtrans.js"></script>
    <script type="text/javascript" src="jquery.zoomooz.js"></script>
</head>

Код javascript

Далее скопируйте и вставьте нижеприведенный скрипт в ваш код HTML. Как видно, скрипт указывает на класс zoom и применяет метод «zoomTo» из бибиотеки. Далее, мы применяем то же к телу документа, что позволяет пользователям кликнуть где-то рядом с любым элементом для того, чтобы вернуть страницу в исходное положение.

$(document).ready(function() {
    $(".zoom").click(function(evt) {
        evt.stopPropagation();
        $(this).zoomTo();
    });
    $(window).click(function(evt) {
        evt.stopPropagation();
        $("body").zoomTo();
    });
    $("body").zoomTo();
});

Не нужно сильно ковырять код, если вы не совсем понимаете, как это работает. Просто помните, что нам нужно применить класс zoom к элементам, которые должны изменяться в размере. Этот отрывок кода будет применен в обоих сегодняшних примерах, поэтому скопируйте его себе куда-нибудь.

HTML-код

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

<body>
    <div id="container">
        <div id="outer" class="zoom">
            <div id="inner" class="zoom">
                <p><a href="#">Click here to zoom</a></p>
            </div>
        </div>
    </div>
</body>

Также учтите, что мы применили класс zoom и к внешним и к внутренним div’ам. Ссылка в данный момент выглядит просто как макет, по которому можно ориентироваться. Скрипт отлично работает и без него.

CSS-код

Далее для каждого элемента мы применим размеры и позиционирование. Опять же, определенные габариты контейнера способствуют правильной работе функции увеличения, так как здесь установлено положение position:absolute для внутреннего div’а. Скрипт может «брыкаться», так что будьте внимательны и выставляйте все корректно.

#container {
    width: 800px;
    height: 500px;
    margin: 0 auto;
}

#outer {
    width: 400px;
    height: 200px;
    background: #aaa;
    margin: 50px auto;
    padding: 70px;
}

#inner {
    width: 400px;
    height: 200px;
    background: #eee;
    margin: 0 auto;
    position: absolute;
}

CSS-код текста

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

#inner p {
    text-align: center;
    font: 25px/200px Helvetica, sans-serif;
}

#inner p a {
    color: #000;
    text-decoration: none;
}

#inner p a:hover {
    text-decoration: underline;
}

Демо

На этом разработка нашего простенького демо завершена! Запустите демо-страницу и посмотрите, каков скрипт в действии. Учтите также то, что клик по разным div’ам даёт разный эффект увеличения.

Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery

Zoomooz.js: галерея изображений

Используя тот же метод, мы можем создать великолепную галерею изображений с эффектом увеличения. Важно указать, что этот плагин, скорее всего, гораздо лучше работает с элементами, которые генерирует сам браузер. Когда мы используем его с изображениями (что мы собираемся сделать дальше), нужно будет загрузить все изображения в уже увеличенном размере.

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

Несмотря на это ограничение, всё ещё есть возможность уложиться в определенный лимит, и посмотреть, что у нас из этого получится.

HTML-код

HTML-код этого проекта будет крайне простым. Мы начнем с div’а, состоящего из некоторого описательного текста, нечто вроде шапки и абзаца для того, чтобы пояснить, что на самом деле происходит. Далее, мы создали большой неупорядоченный список, состоящий из изображений. И на этом, в принципе, всё!

Учтите, что мы применили класс zoom как к div’у gallery, так и ко всем и к каждому по отдельности изображению внутри div’а. Это даст нам два уровня увеличения, с которыми можно поиграть. Библиотека достаточно умна для того, чтобы автоматически управлять относительными уровнями увеличения на основе отношения элементов родительский/дочерний.

Также не забудьте перетащить код тэга head и код javascript из предыдущего примера. Мы используем абсолютно одинаковые настройки, отличия будут лишь в HTML и CSS.

<body>

    <div id="headline">
        <h1>Zoom Gallery</h1>
        <p>Click on an image below to zoom into it, then click outside to zoom out. Pretty neat eh?</p>
    </div>

    <div id="gallery" class="zoom">
        <ul>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/1"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/2"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/3"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/4"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/5"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/6"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/7"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/8"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/9"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/city/10"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/1"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/2"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/3"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/4"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/5"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/6"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/7"/></li>
            <li class="zoom"><img src="http://lorempixum.com/600/600/food/8"/></li>
        </ul>

    </div>
</body>

CSS заголовков

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

* {
    margin: 0;
    padding: 0;
}

/*Text Styles*/

#headline {
    text-align: center;
    margin: 20px 0;
}

h1 {
    font-family: 'Arvo', Georgia, Times, serif;
    font-size: 50px;
    line-height: 65px;
}

p {
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 25px;
}

Учтите, что мы использовали шрифты Arvo и PT Sans: оба эти шрифта принадлежат библиотеке Google, и поэтому требуется вписать немного дополнительного кода в HTML. Так что, если вы тоже хотите использовать, то просто добавьте код в тэг head в вашем документе:

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>


И на этом этапе ваши заголовки должны выглядеть примерно так:

Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery

CSS-код галереи

Теперь пришло время завершить наш проект оформлением самой галереи. Для начала, нам надо оформить div gallery – он будет служить контейнером для миниатюр. Мы задали ему значение ширины в 720 пикселей, высоты в 370 пикселей, а также серый цвет фона. Мы также включили небольшой отступ для того, чтобы миниатюры не выступали за края, а также установили поля на «0 auto» для того, чтобы div был выровнен по центру (это работает, только если вы задаете значение ширины).

#gallery {
    width: 720px;
    height: 370px;
    margin: 0 auto;
    padding: 10px;
    background: #383131;
}

После того, как вы закончите оформление контейнера с галереей, пришло время создать наш большой список изображений, выстроенных по сетке. Для того чтобы сделать это, объявите значение none в параметр list-style-type и задайте элементам li «плыть» по левому краю. Также помните о позиционировании контента и об эффекте при наведении курсора мыши. Что касается последнего, то мы просто сделали поля при наведении, чтобы границы не влияли на структуру верстки. Итак, начнем с того, что зададим каждой миниатюре поля в 10 пикселей, а затем, при наведении курсора мыши, поля становятся 7 пикселей и добавляется граница в 3 пикселя (7+3=10).

ul {
    list-style-type: none;
    position: absolute;
    width: 720px;
}

#gallery ul li {
    float: left;
    margin: 10px;
    background: white;
    height: 100px;
    width: 100px;
}

#gallery ul li:hover {
    border: 3px solid white;
    margin: 7px;
}

#gallery ul li img{
    height: 100px;
    width: 100px;
}

На этом мы завершили нашу работу! Нажмите здесь, чтобы посмотреть демо в режиме реального времени.

Разработка привлекательной веб-страницы с Zoom-эффектом посредством jQuery

Заключение

Сегодня мы совместно использовали HTML, CSS и javascript для создания впечатляющей веб-галереи, которая увеличивает изображения при нажатии. Как было показано в тестовом демо, тот же эффект можно задать любому элементу!

Итак, мы немного ознакомили вас с функциями Zoomooz.js. Обязательно посетите официальный веб-сайт, и постарайтесь придумать новые способы применения этого шикарного плагина!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, javascript, CSS
Опубликовал Mysterious Master   Прочитано (раз): 6126   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031