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

Всегда в теме

Статистика


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

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

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 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 | Просмотров: 802 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.