Страница с тройным слайдшоу
В данном уроке мы построим веб страницу, на которой используется три разных слайдшоу, которые объединены в один динамический элемент дизайна. Такой эффект отлично работает в портфолио дизайнера или фотографа. Для создания такой страницы понадобятся начальные знания HTML, CSS и jQuery.
Реальный пример использования такого элемента.
Для тех, кому есть что показать миру, очень важно представить свои работы в интересном и компактном виде. Эффект, который мы будем строить, успешно используется на сайте фотографа Jessica Kripp. Три независимых друг от друга слайдшоу действуют как один элемент. В итоге портфолио очень эффектно выглядит и запоминается посетителю.
Шаг 1. Разметка HTML.
В таких проектах основной шаблон страницы лучше всего начинать строить со статическими изображениями, а после завершения дизайнерской части работы приступать к играм с JavaScript и добавлению функционала слайдшоу.
Создаем основной контейнер, в котором располагаются три элемента div
, которые содержат по одному изображению. Плагин jQuery, который мы будем использовать позже, требует, чтобы каждое слайдшоу имело свой собственный контейнер.
<div id="container"> <div id="bigPhoto"> <img src="http://lorempixum.com/800/300/city/1" /> </div> <div id="smallPhoto1"> <img src="http://lorempixum.com/400/200/city/4" /> </div> <div id="smallPhoto2"> <img src="http://lorempixum.com/400/200/city/7" /> </div> </div>
Для изображений используем сервис LoremPixum, который предоставляет изображения любого размера для наполнения демонстрационных страниц. В вышеприведенном коде мы получаем три картинки: одну размером 800x300px и две - 400x300px.
На данном этапе наш элемент будет выглядеть так:
Шаг 2. Базовый код CSS.
Сначала установим стили для раздела body
. Проводим общий сброс, устанавливаем цвет фона и центрируем контейнер. Для контейнера используется ширина самого большого изображения (800 px), смещение 50px от верха страницы. Левое и правое поле получают значение “auto”, что центрирует наш контейнер по горизонтали.
* { margin: 0; padding: 0; } body { background: #291616; } #container { width: 800px; margin: 50px auto; }
Теперь установим стили для элементов div
фотографий. Важный момент - установить смещение smallPhoto1 влево, а smallPhoto2 - вправо. Таким образом, они разместятся в нужном положении рядом друг с другом. Также устанавливаем для каждого высоту, чтобы исключить возможные проблемы с шаблоном.
#bigPhoto { height: 300px; } #smallPhoto1 { height: 200px; float: left; } #smallPhoto2 { height: 200px; float: right; }
Теперь наша заготовка будет выглядеть следующим образом.
Шаг 3. Дополнительные инструменты.
Теперь внешний вид нашей страницы в целом готов и пора приступать к созданию динамики. Для этого нужно загрузить два инструмента JavaScript.
Первый - библиотека jQuery, которая не нуждается в представлении.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
А механизм нашего слайдшоу будет обеспечивать плагин jQuery Cycle, с помощью которого можно просто и быстро построить элемент для демонстрации слайдов.
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
Также добавим плагин Modernizr, который делает нашу страницу максимально совместимой с IE при использовании HTML5 и CSS3.
Шаг 4. Оживляем слайдшоу
Использование плагина jQuery Cycle очень простое. У него есть множество опций и эффектов, но в нашем уроке мы будем использовать минимум функционала.
Сначала модифицируем немного наш код HTML. Плагин jQuery Cycle ищет элементы с классом “slideshow” и создает слайдшоу из их потомков. Добавим класс "slideshow" к нашим элементам div
для фотографий и добавим изображений. Таким образом, каждое слайдшоу будет содержать три слайда.
<div id="container"> <div id="bigPhoto" class="slideshow"> <img src="http://lorempixum.com/800/300/city/1" /> <img src="http://lorempixum.com/800/300/city/2" /> <img src="http://lorempixum.com/800/300/city/3" /> </div> <div id="smallPhoto1" class="slideshow"> <img src="http://lorempixum.com/400/200/city/4" /> <img src="http://lorempixum.com/400/200/city/5" /> <img src="http://lorempixum.com/400/200/city/6" /> </div> <div id="smallPhoto2" class="slideshow"> <img src="http://lorempixum.com/400/200/city/7" /> <img src="http://lorempixum.com/400/200/city/8" /> <img src="http://lorempixum.com/400/200/city/9" /> </div> </div>
Теперь нужно определить для каждого слайдшоу модель работы. Используем ID элементов и устанавливаем для них разные наборы свойств: задержку, скорость и эффект перехода.
<script type="text/javascript"> $(document).ready(function() { $('#bigPhoto').cycle({ delay: 300, speed: 2000, fx: 'fade' }); $('#smallPhoto1').cycle({ delay: 3000, speed: 2000, fx: 'fade' }); $('#smallPhoto2').cycle({ delay: 5000, speed: 2000, fx: 'fade' }); }); </script>
Шаг 5. Завершающие штрихи
Добавим заголовок и ярлык перед элементом div
bigPhoto:
<h1>Пример множественного слайдшоу</h1> <div id="slideshowTag">Стена фотографий</div> <div id="bigPhoto" class="slideshow"> <img src="http://lorempixum.com/800/300/city/1" /> <img src="http://lorempixum.com/800/300/city/2" /> <img src="http://lorempixum.com/800/300/city/3" /> </div>
Для ярлыка устанавливаем абсолютное размещение и отрицательное значение для правого поля, чтобы ярлык выступал за границы слайдшоу. Кроме того, необходимо учесть порядок наложения элементов на странице. Поэтому мы устанавливаем свойство для ярлыка и для элемента bigPhoto так, чтобы ярлык оказался сверху.
/*Заголовок страницы*/ h1 { color: #00bdf2; margin: 0 0 20px 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: #291616 0px 0px 5px; } /*Ярлык*/ #slideshowTag { background: #00bdf2; color: #fff; font: 20px Helvetica, sans-serif; margin: 50px 0 0 -10px; padding: 15px; position: absolute; z-index: 1; /*Тени*/ -webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); } /*Фотографии слайдшоу*/ #bigPhoto { z-index: -1; height: 300px; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/WIM66n0VHz8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
"В будущем на рынке останется два вида компаний: те, кто в Интернет и те, кто вышел из бизнеса." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.