Главная
Друзья!
Мы находимся в процессе большой чистки!
Возможны ошибки и кривизна страниц
Просмотреть всё и быстро не возможно!
Если нашли какую-то ошибку, то если вам не трудно напишите здесь адрес...
Сейчас вы здесь :
http://dwweb.ru/page/css/024_plavnoe_poyavlenie_bloka_css_pri_zagruzke_stranitsyi.html

Плавное появление блока css при загрузке страницы

CSS |

Когда вы ищите появление блока, то что именно вы имеете ввиду!? Потому, что появление блока можно понимать по-разному! Мы сегодня рассмотрим три случая появление блока, для это понадобятся живые примеры, как это выглядит и где используется появление блока.

1. Появление и исчезните блока при нажатии … данный пункт перенесен на следующую страницу...

2. Появление блока из-за края монитора, края окна.
См.пример на отдельной странице
3 Постепенное появление блока.
См.пример на отдельной странице

Внимание! Вариаций на разные темы и в том числе не появление или скрытие блока может быть просто огромным! На этой странице – это всего лишь несколько примеров. Как это может быть реализовано!

1.

К первому пункту – пример оставим как затравку…

Живой пример + он же будет в архиве...

<Появление блока из-за края монитора, края окна./h2> 2. Появление блока из-за края монитора, края окна.

Как это работает!?

Появление блока с помощью css

У нас есть основной блок. Который с позиционирован абсолютно, вы его положения видите после загрузки страницы.

Нас прежде всего интересует:

1.1.position: absolute;

div.main .center {

position: absolute;

top: 37%;

left: 0;

right: 0;

text-align: center;

text-transform: uppercase;

z-index: 15;

}

Далее у нас идет блок. Который будет появляться – это заголовок, который появляется слева из позиции left – 100%

Здесь нас интересует, позиция

1.2. position: relative;

Анимация

1.3. animation: showLeft(имя) 1s(время);

Весь код:

div.main .center h1 {

color: #fff;

font-size: calc(16px + 1.2vw);

font-weight: 700;

margin-bottom: 30px;

position: relative;

animation: showLeft 1s;

z-index: 1;

}

Задаем начальный и конечный кадр анимации…

1.4. keyframes

@keyframes showLeft {

from {left:-100%;}

to {left:0;}

}

1.5. Появление блока справа...

@keyframes showRight {

from {right:-100%;}

to {right:0;}

}

Как сделать плавное появление блока css

Для второго варианта применена абсолютно та же схема, единственное отличие блок будет появляться не двигаясь, т.е. от невидимого состояния в видимое…

Здесь по-моему и объяснять нечего…

.container { animation: show 2s;

}

@keyframes show {

from {opacity: 0;} to {opacity: 1;}

}

Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 39.1
Название скрипта и номер :Появление блока CSS
Пример - Появление блока CSS
Скачать - архив
Все скрипты на одной странице