Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 16 » Эффектное добавление нового содержания на странице


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

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

Допустим, что новый модуль с информацией нужно вывести на странице. Простое добавление модуля в DOM приведет к его немедленному появлению. В некоторых случаях такой "выход" приемлем, но можно сделать процесс эффектнее. Наверняка, когда вы добавляете на страницу блок новой информации, то хотите, чтобы люди обратили внимание на него. Анимация поможет вам. Технически можно замедлить процесс появления блока, но визуальный эффект ярким пятном выделит новинку.

demosourse

 

Уже имеющееся содержание

Допустим, что у вас есть страница со следующей структурой:

01

<section class="main" id="main">

02

  <div class="module">

 

03

     ...

04

  </div>

 

05

  <div class="module">

06

     ...

 

07

  </div>

08

</section>

 

09

 

10

<aside class="sidebar" id="sidebar">

 

11

  <div class="module">

12

    ...

 

13

  </div>

14

  <div class="module">

 

15

    ...

16

  </div>

 

17

</aside>

 

Добавляем новый блок

В стиле jQuery:

1

$("<div />", {

2

  class: "module",

 

3

  html: newContent // из Ajax запроса или другого источника

4

}).prependTo("#sidebar");

 

Опция 1: задаем новому блоку класс

Если есть возможность, то лучшим методом будет добавление класса к новому блоку информации, чтобы можно было его указывать специально. В нашем примере определяем класс newly-added.

1

$("<div />", {

2

  class: "module newly-added",

 

3

  html: newContent // из Ajax запроса или другого источника

4

}).prependTo("#sidebar");

CSS код эффекта

Новый класс имеет анимацию эффекта. Она запускается сразу после добавления блока в DOM.

01

.newly-added {

02

  animation: flyin 1.2s ease forwards;

 

03

  opacity: 0;

04

  transform: scale(2);

 

05

  filter: blur(4px);

06

}

 

07

 

08

@keyframes flyin {

 

09

   to {

10

     filter: blur(0);

 

11

     transform: scale(1);

12

     opacity: 1;

 

13

   }

14

}

Примечание: в примере опущены префиксы. Все директивы animation, transform, filter, и @keyframes должны иметь префиксы браузеров. можно использовать Prefix Free, для автоматического добавления префиксов.

 

Опция 2: указываем все новые блоки без класса

Вероятно, что у вас не будет контроля над классами для нового содержания. В таком случае, можно указать на все содержание страницы и задать для него класс без эффекта появления.

1

$(function() {

2

  $(".module").addClass("old-school");

 

3

});

А затем можно указать новые блоки с помощью селектора :not.

1

.module:not(.old-school) {

2

  /* анимации */

 

3

}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/fly-in-newly-added-content-to-a-page/
Перевел: Сергей Фастунов

Категория: CSS//HTML//JS | Просмотров: 754 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди