Раздвижные панели для изображений
Приветствую всех посетителей сайта! Сегодня мы рассмотрим, как создать аккуратные раздвижные панели для изображений на чистом CSS. Я предпочитаю там, где можно, обходится без скриптов, нынче это вполне реально. Все современные браузеры поддерживают CSS3 и, соответственно, корректно отображают переходы и анимацию, созданную таким образом.
В чем изюминка данных панелей? В отличие от большинства слайдеров, в которых картинки меняются целиком, панели разбивают изображение на равные фрагменты, в нашем примере - на четыре и при нажатии на номер внизу каждого фрагмента происходит смена картинки. В архив включены 4 стиля для эффекта смены изображений:
1. Скольжение вправо, все фрагменты движутся в одном направлении.
2. Скольжение влево/вправо, т.е. первый и второй фрагменты движутся навстречу другу, так же как третий и четвертый.
3. Скольжение вниз/вверх, первый и третий фрагменты движутся вверх, второй и четвертый - вниз.
4. Масштабирование, все фрагменты плавно меняются с эффектом небольшого зума.
При этом для каждого изображения отображаются название и описание, которые также меняются с заданным эффектом.
На странице демо вы можете посмотреть все это в действии и выбрать понравившийся вариант. Реализовать CSS-панели на своем сайте вовсе не сложно, как это может показаться на первый взгляд. Достаточно разместить html-код на странице в том месте, где хотите установить панели и подсоединить стили, вписав их в файл стилей сайта style.css либо создав для него отдельный файл.
Ниже скриншот панелей на одном из моих сайтов.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Проект для новичков
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
2010 - 2018 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Не забудь заглянуть в свою почту и подтвердить подписку!
Посмотрели, понравилось? Тогда давайте перейдем к установке. Процесс установки довольно прост и состоит всего из трех шагов.
ШАГ 1.
Подготовка. Распаковываем архив, в нем две папки: с изображениями и стилями и файл с html-кодом. По умолчанию размер слайдера с панелями 600Х400рх, поэтому следует подготовить четыре картинки или фотографии именно такого размера. Готовые изображения загрузить в папку images на своем сайте. Названия картинок не менять, оставить исходные (1.jpg, 2.jpg, 3.jpg, 4.jpg), чтобы не вносить правки в стили.
Если такие изображения (1.jpg, 2.jpg, 3.jpg, 4.jpg) уже имеются в папке images, то можно закинуть их в папку imagepanels (о ней чуть позже) либо внести поправки в стили. Для этого открываете текстовым редактором тот файл стилей, демо которого вам больше понравилось и меняете названия для всех четырех изображений на свои.
Не забываем, что названия для изображений должны быть на латинице, без пробелов и с маленькой буквы. Ниже скриншот того участка кода, где меняются названия, находится он приблизительно посредине файла стилей.
ШАГ 2.
Добавление кода на страницу сайта. Напоминаю, в Пейдже любой html-код добавляется через меню Вставка → Вставить HTML-код. Затем просто перетягивается в нужное место страницы. В самом коде вам нужно сделать небольшие правки, в частности, прописать названия и описания к картинкам.
HTML-код состоит из трех основных частей: переключатели и ярлыки, контейнер с панелями и фрагментами для каждого изображения и надписи. Вносить правки нужно как раз в третьей части, т.е. в последнем абзаце кода. Вместо моих названий и описаний впишите свои.
После того как код вставлен и отредактирован, не забудьте загрузить страницу на сервер. Чтобы слайдер с панелями стал корректно отображаться, останется лишь подключить стили.
ШАГ 3.
Подключение стилей. Стили подключаются на странице между тегами <head> и </head> такой строкой кода:
<link rel="stylesheet" href="imagepanels/css/style1.css">
Поскольку на моем сайте накопилось много разных полезностей в виде меню, галерей, слайдеров, то я стили и картинки для каждого из них держу в отдельной папке, так мне удобней и быстрей их найти, если потребуется что-то подредактировать. Поэтому для слайдера с панелями я создала папку в корневой директории imagepanels, в которую и перетянула из архива папку css и папку images с фотографиями.
Вы можете поступить также, а можете просто добавить скопированные стили в уже имеющийся на хостинге файл со стилями, который чаще всего так и называется - style.css, а в строке подключения после href прописать путь к нему.
В примере показано подключение стилей для первого демо. Если вам понравился эффект на втором, третьем или четвертом демо, то именно эти стили и подключаете, т.е вместо style1 пишите style2, style3 или style4.
После того, как стили подключены, код вставлен, страница загружена, проверяем результат. Если все сделано правльно, вы увидите рабочий слайдер с панелями, как у меня на демо-странице.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат отличную подборку красивых бэкграундов. В архиве 40 фонов высокого разрешения в 4 стилях с одного из стоков стоимостью 4 доллара.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
