Проскальзывающие ячейки изображения
В данном уроке мы создадим эффект проскальзывающих ячеек изображения. Он будет похож на маленькую фотогалерею. Для урока приготовлены 3 демонстрации с разными эффектами. В качестве основы функционирования используются свойства CSS3.
Шаг 1. Разметка HTML
Для нашей демонстрации используется следующий код. В примере задействованы 5 изображений, и имеется такое же количество элементов навигации.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Эффект проскальзывания с помощью jQuery | Материалы сайта RUSELLER.COM</title> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="container" id="container"> <ul class="nav"> <li id="m1">Pic 1</li> <li id="m2">Pic 2</li> <li id="m3">Pic 3</li> <li id="m4">Pic 4</li> <li id="m5">Pic 5</li> </ul> <ul class="grid"> <li id="g1"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> <li id="g2"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> <li id="g3"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> <li id="g4"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> <li id="g5"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> <li id="g6"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </li> </ul> <ul class="demos"> <li><a href="/index.html">Демо 1</a></li> <li><a href="/index2.html">Демо 2</a></li> <li><a href="/index3.html">Демо 3</a></li> </ul> </div> </body> </html>
Шаг 2. CSS
Теперь стили для демонстрации. В представленном ниже коде оставлены только самые важные свойства для наглядности:
css/main.css
.nav { background-color:#DDD; list-style:none outside none; overflow:hidden; padding:5px 140px; } .nav li { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:2px outset #000000; color:#000; cursor:pointer; float:left; font-size:18px; font-weight:bold; margin-right:5px; padding:10px; } .demos { background-color:#DDD; list-style:none outside none; overflow:hidden; padding:5px 165px; } .demos li { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:2px outset #000000; color:#000; float:left; font-size:18px; font-weight:bold; margin-right:5px; padding:10px; } .demos li a { color:#000; cursor:pointer; display:block; font-size:20px; font-weight:bold; height:30px; line-height:30px; text-decoration:none; } .grid { background-color:#DDD; list-style:none outside none; width:100%; } .grid li { border:1px solid #777777; float:left; height:240px; width:211px; transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; } .grid li div { transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; float:left; } .grid li .d1 { background:transparent url(../images/grid1.jpg) no-repeat top left; height:100%; width:211px; } .grid li .d2 { background:transparent url(../images/grid2.jpg) no-repeat top left; height:100%; width:0; } .grid li .d3 { background:transparent url(../images/grid3.jpg) no-repeat top left; height:100%; width:0; } .grid li .d4 { background:transparent url(../images/grid4.jpg) no-repeat top left; height:100%; width:0; } .grid li .d5 { background:transparent url(../images/grid5.jpg) no-repeat top left; height:100%; width:0; } .grid li#g2 div { background-position:-211px 0; } .grid li#g3 div { background-position:-422px 0; } .grid li#g4 div { background-position:0 -240px; } .grid li#g5 div { background-position:-211px -240px; } .grid li#g6 div { background-position:-422px -240px; }
Каждый элемент ячейки (LI) имеет собственный фон с определенным положением. Для анимации сдвига положения будет использоваться jQuery при переключении изображения.
Шаг 3. JavaScript
js/main.js
$(function(){ $(".nav li").hover( function () { $('.grid li div').stop().animate({width:"0"},0); var ind = $(".nav li").index(this); $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0); $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50); $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100); $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150); $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200); $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250); } ); });
Заключение
Две остальные демонстрации очень похожи по принципу действия, некоторые свойства и код JavaScript немного изменены.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/X8eudZ2oyOM/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 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
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.