Эффектное добавление нового содержания на странице

Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффектное добавление нового содержания на странице | | 2012-12-03 22:04:12 | | Статьи Web-мастеру | | Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в DOM приведет к его немедленному появлению. В некоторых случаях такой выход приемлем, но можно сделать | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: