Эффектное добавление нового содержания на странице
Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в 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
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 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 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp