| | | | | |

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

2019/01/14 Марат 258 0 CSS |

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

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

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

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

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

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

Появление блока из-за края монитора, края окна.

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
Скачать - архив
Все скрипты на одной страницеС вашими куками, что-то не то..., попробуете перезагрузить страницу..