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

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

Вот некоторые идеи, которые можно использовать при создании шапки сайта.

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

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

Код 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 основы. Добавьте в закладки постоянную ссылку.

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

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

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

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

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

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

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

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

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