Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

Анимированная шапка для сайта примеры

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем экспериментировать с анимацией.

Вот некоторые идеи, для создания шапки сайта.

Можно использовать так как есть, а можно взять только некоторые действия и применить в разработке своего варианта оформления шапки или рекламного баннера.

Выплывающие заголовок и описание сайта.

Название сайта

Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта

Код 1: Чтобы посмотреть работу этой анимации ещё раз — обновите страницу.

 

Астра

Название сайта

Код 2:

 

Звездопад

Название сайта

Код 3:

Смена дня и ночи

Safari
Africa
Egypt

Код 4:

код 1

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/* Шапка сайта */
.main-header {
/* Задаём относительное позиционирование */
position: relative;
/* Размер шапки сайта */
width: 100%;
height: 250px;
overflow: hidden;
/* Фон шапкм сайта */
background: steelblue;
/* Подключаем анимацию */
animation: main-hed 15s linear;
}
/* Название сайта */
.main-title{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
left: -2em;
right: -2em;
top: 30%;
/* Оформляем шрифт */
color: #fff;
font-family: Monotype Corsiva;
letter-spacing: 0.3em;
text-align: center;
text-transform: uppercase;
/* Подключаем анимацию */
animation: main-titl 15s linear;
}
/**/
.main-description{
/* Позиционируем абсолютно, относительно блока main-header */
position: absolute;
right: -2em;
left: -2em;
top: 50%;
/* Оформляем шрифт */
color: #fff;
font-family: Georgia;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
font-style: italic;
/* Подключаем анимацию */
animation: main-descript 15s linear;
}

/* Анимация фона шапки сайта */
@keyframes main-hed {
0% {
/* Начальный цвет */
background: #28014D;
}
/* Конечный цвет */
100% {
background: steelblue;
}
}

/* Анимация названия сайта */
@keyframes main-titl{
0% {
/* Полная прозрачность */
opacity: 0;
/* Масштабируется по вертикали и горизрнтали с нуля */
transform: scale(0);
}
100% {
/* Полная непрозрачность */
opacity: 1;
/* Конечный масштаб 1 х 1 */
transform: scale(1);
}
}

/* Анимация описания сайта */
@keyframes main-descript {
0% {
/* Начало анимации в точке внизу шапки сайта */
transform: translateY(6em);
/* Полная прозрачность */
opacity: 0;
}
/* Возрастание непрозрачности */
50% {
opacity: 0.1;
}
75% {
opacity: 0.3;
}
100% {
/* Завершение анимации в точке позиционирования */
transform: translateY(0);
/* Полная непрозрачность */
opacity: 1;
}
}
</style>
</head>
<body>
<div class="main-header">
<h1 class="main-title">Название сайта</h1>
<p class="main-description">Описание сайта Описание сайта
Описание сайта Описание сайта
Описание сайта Описание сайта</p>
</div>
</body>
</html>

В этом примере обратите внимание на то, что анимация описания сайта начинается за пределами блока main-header.

По такому же принципу можно сделать выплывающим любой блок — картинку, меню и т.д.

Код 2

Идею этой анимации я нашёл на сайте css.yoksel.ru. Вот уж кладезь экспериментов с CSS.

CSS

.man-header {
margin: 0;
overflow: hidden;
/* Цвет фона в формате hsl, радиальный градиент */
background: radial-gradient(white 80px, hsl(30, 100%, 60%) 50em);
position: relative;
height: 200px;
width: 600px;
}
/* Позиционируем эффект по центру*/
.astra {
position: absolute;
left: 50%;
top: 50%;
/* Убираем маркеры списка */
list-style: none;
/* Подключаем анимацию вращения */
animation: 30s rotate infinite linear;
}
/* Границы с тенью при помощи псевдоэлементов */
.luh,
.luh:before,
.luh:after {
position: absolute;
border: 0 solid transparent;
border-width: 2em 20em;
width: 0px;
height: 0px;
box-shadow: 0 0 2em .5em white;
}
/* Разбег лучей */
.luh {
left: -20em;
top: 50%;
margin-top: -2em;
transform: rotate(.3deg);
}
/* Длина лучей зависит от позиции*/
.luh:before,
.luh:after {
left: -20em;
top: -2em;
display: block;
content: "";
}

.luh:before {
transform: rotate(60deg);
}
.luh:after {
transform: rotate(-60deg);
}
/* Добавляем смещение для каждой группы лучей с помощью псевдокласса */
.luh:nth-child(2){
transform: rotate(15deg);
}
.luh:nth-child(3){
transform: rotate(30deg);
}
.luh:nth-child(4){
transform: rotate(45deg);
}

@keyframes rotate {
100% {
transform: rotate(90deg);
}
}

.name {
z-index: 1;
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: bold 40px 'Monotype Corsiva';
color: hsl(70, 100%, 70%);
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px #EE8A08,
-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08,
}

HTML

<div class="man-header">
<p class="name">Название сайта</p>
<ul class="astra">
<li class="luh"></li>
<li class="luh"></li>
<li class="luh"></li>
<li class="luh"></li>
</ul>
</div>

Код 3

Код очень простой, поэтому я не стал перегружать его комментариями. Если что кому-то не понятно спросите к комментах.
CSS

.space {
width: 600px;
height: 200px;
/* Фон - размноженная картинка */
background-image: url(images/129a.jpg);
position: relative;
}
/* Мигающие и падающие звёзды */
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10
{
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px;
height: 3px;
}
/* Позиционируем звёзды по верху блока */
.stars1 {
top: 8%;
left: 3%;
/* Подключаем анимации с разным временем срабатывания */
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}

.name {
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: 30px Impact;
color: hsl(240, 20%, 15%);
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
/* Обводка текста тенями */
text-shadow: -1px -1px hsl(50, 50%, 50%),
-2px -2px hsl(50, 50%, 50%),
-1px 1px hsl(50, 50%, 50%),
-2px 2px hsl(50, 50%, 50%),
1px 1px hsl(50, 50%, 50%),
2px 2px hsl(50, 50%, 50%),
1px -1px hsl(50, 50%, 50%),
2px -2px hsl(50, 50%, 50%);
}

/* Мигающие */

@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}

/* Падающие */

@keyframes stars1 {
0% {
width: 1px;
}
7% {
width: 6px;
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}

HTML

<div class="space">
<p class="name">Название сайта</p>
<div class="stars1"></div>
<div class="stars2"></div>
<div class="stars3"></div>
<div class="stars4"></div>
<div class="stars5"></div>
<div class="stars6"></div>
<div class="stars7"></div>
<div class="stars8"></div>
<div class="stars9"></div>
<div class="stars10"></div>
</div>

Код 4

CSS

.panorama{
width: 900px;
height: 300px;
left: 0;
top: 0;
overflow: hidden;
background: #4FC3F7;
position: relative;
animation: main-layout 40s linear infinite;
}
.ground { /* Полоска земли */
display: block;
position: absolute;
width: 100vw;
height: 40px;
left: 0;
bottom: 0;
background: #F4511E;
z-index: 10;
}
.sun { /* Солнышко */
position: absolute;
width: 150px;
height: 150px;
top: 250px;
left: 750px;
background: #FFF;
border-radius: 50%;
z-index: 1;
animation: main-sun 40s linear infinite;
}
.selen{ /* Луна */
position: absolute;
top: 0;
left: 800px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
animation: main-selen 40s linear infinite;
}
.selen::before { /* Затемнение для плумесяца */
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #030104;
}
.safari,
.africa,
.egipet
{ /* Слова на пирамидах */
font-family: Impact;
position: absolute;
color: #fff;
transform: rotate(40deg);
z-index: 5;
text-shadow: 1px 1px #050505,
2px 2px #050505,
3px 3px #050505,
4px 4px #050505;

}
.safari{
top: 150px;
left: 310px;
font-size: 35px;
letter-spacing: 0.4em;
z-index: 5;
}
.africa {
top: 190px;
left: 630px;
font-size: 30px;
letter-spacing: 0.3em;
z-index: 5;
}
.egipet {
top: 205px;
left: 105px;
font-size: 22px;
letter-spacing: 0.3em;
z-index: 5;
}
.shadow { /* Тени пирамид */
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.pyramid { /* Блоки пирамид */
display: block;
position: absolute;
width: 950px;
height: 300px;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0px);
z-index: 2;
}
.pr1,
.pr2,
.pr3
{ /* Грани пирамид */
display: block;
position: absolute;
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%, 50%);
}
.pr1 {
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.pr2 {
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.pr3 {
width: 300px;
height: 300px;
bottom: 0;
left: 30px;
z-index: 4;
}
/* Анимации */
@keyframes main-sun{
0% {
transform: translateY(-10px);
background: #FF5F00;
}
25%{
transform: translateY(-260px);
background: #fff;
width:80px;
height:80px;
}
35%{
transform: translateY(-260px);
}
40% {
background: #fff;
}
60%{
transform: translateY(10px);
width:150px;
height:150px;
background: #FF5F00;
}
}
@keyframes main-layout{
0% {
background: #333333;
}
10%{
background: #4FC3F7;
}
40%{
background: #4FC3F7;
}
50% {
background: #333333;
}
55% {
background-image: url(images/129a.jpg);
}
100% {
background-image: url(images/129a.jpg);
}
}
@keyframes main-selen {
0% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

HTML

<div class="panorama">
<div class="safari">Safari</div>
<div class="africa">Africa</div>
<div class="egipet">Egypt</div>
<div class="night"></div>
<div class="sun"></div>
<div class="selen"></div>
<div class="pyramid">
<div class="pr1"><div class="shadow"></div></div>
<div class="pr2"><div class="shadow"></div></div>
<div class="pr3"><div class="shadow"></div></div>
</div>
<div class="ground"></div>
</div>

О том как сделать смену фоновых изображений в шапке сайта, читайте в следующей статье: Слайдер CSS.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы, Новости. Добавьте в закладки постоянную ссылку.
А так же:

4 комментария на «Анимированная шапка для сайта примеры»

  1. Александр говорит:

    Автору Респект!!!

  2. Влад говорит:

    Спасибо за звездопад. Оказывается так просто.

  3. stariс говорит:

    Озадачил! Я посмотрел в трёх браузерах IE, Chrome, Mozilla, и везде анимация работает. У Вас что, вообще ничего не показывается в начале статьи? Вообще-то в блоке а-ля шапка сайта сиреневого цвета, медленно появляются название и описание сайта. Если Вы как-то просмотрели это появление, то перезагрузите страницу.
    Сегодня-завтра будет ещё пара других примеров там же.

  4. виталий говорит:

    а где демонстрация анимации?

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *