Эффектное добавление нового содержания на странице
Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в DOM приведет к его немедленному появлению. В некоторых случаях такой "выход" приемлем, но можно сделать процесс эффектнее. Наверняка, когда вы добавляете на страницу блок новой информации, то хотите, чтобы люди обратили внимание на него. Анимация поможет вам. Технически можно замедлить процесс появления блока, но визуальный эффект ярким пятном выделит новинку.
Уже имеющееся содержание
Допустим, что у вас есть страница со следующей структурой:
<section class="main" id="main"> <div class="module"> ... </div> <div class="module"> ... </div> </section> <aside class="sidebar" id="sidebar"> <div class="module"> ... </div> <div class="module"> ... </div> </aside>
Добавляем новый блок
В стиле jQuery:
$("<div />", { class: "module", html: newContent // из Ajax запроса или другого источника }).prependTo("#sidebar");
Опция 1: задаем новому блоку класс
Если есть возможность, то лучшим методом будет добавление класса к новому блоку информации, чтобы можно было его указывать специально. В нашем примере определяем класс newly-added
.
$("<div />", { class: "module newly-added", html: newContent // из Ajax запроса или другого источника }).prependTo("#sidebar");
CSS код эффекта
Новый класс имеет анимацию эффекта. Она запускается сразу после добавления блока в DOM.
.newly-added { animation: flyin 1.2s ease forwards; opacity: 0; transform: scale(2); filter: blur(4px); } @keyframes flyin { to { filter: blur(0); transform: scale(1); opacity: 1; } }
Примечание: в примере опущены префиксы. Все директивы animation
, transform
, filter
, и @keyframes
должны иметь префиксы браузеров. можно использовать Prefix Free, для автоматического добавления префиксов.
Опция 2: указываем все новые блоки без класса
Вероятно, что у вас не будет контроля над классами для нового содержания. В таком случае, можно указать на все содержание страницы и задать для него класс без эффекта появления.
$(function() { $(".module").addClass("old-school"); });
А затем можно указать новые блоки с помощью селектора :not
.
.module:not(.old-school) { /* анимации */ }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/C3KtNUpZ-6w/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.