Шапки сайта с анимацией на javascript. Анимированные шапки


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

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

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

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

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

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

 

Астра

Код 2:

 

Звездопад

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

Код 3:

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

Код 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> <h2>Название сайта</h2> <p>Описание сайта Описание сайтаОписание сайта Описание сайтаОписание сайта Описание сайта</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> <p>Название сайта</p> <ul> <li></li> <li></li> <li></li> <li></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

%MINIFYHTMLaa9f36e9308e474c611a45fac8794aa19%%MINIFYHTMLaa9f36e9308e474c611a45fac8794aa110%

<div> <p>Название сайта</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></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

%MINIFYHTMLaa9f36e9308e474c611a45fac8794aa111%%MINIFYHTMLaa9f36e9308e474c611a45fac8794aa112%

<div> <div>Safari</div> <div>Africa</div> <div>Egypt</div> <div></div> <div></div> <div></div> <div> <div><div></div></div> <div><div></div></div> <div><div></div></div> </div> <div></div> </div>

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

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

starper55plys.ru

Шапки сайта с анимацией на javascript

В первую же секунду, когда пользователь попадает на сайт, он видит изображение, расположенное в шапке сайта. Именно поэтому необходимо уделить особое внимание этой части страницы. Шапка может иметь разный размер, быть динамичной или статичной. Ее главная  задача — удержать внимание посетителя на сайте и заставить его заинтересоваться содержательной частью. Следовательно, в дизайне все средства хороши.

В данной статье мы представили несколько способов, которые помогут разнообразить шапку сайта и сделать его запоминающимся.

Перейдя по следующей ссылке, Вы сможете изучить предложенные варианты оформления.

ДемоСкачать

Шапки сайта с анимацией на javascript: как настроить

Итак, для того чтобы сделать анимированную шапку, обратимся к HTML.

В имеющийся код страницы необходимо поместить следующие строчки:

<div>

    <canvas></canvas>

</div>

Блок <div> содержит идентификатор и класс large-header. Здесь же тег <canvas> отвечает за анимацию. В самом же блоке <div> находится  изображение, которое должно быть на фоне.

Далее разберемся с Javascript. В начале статьи мы разместили исходные файлы. Папка js содержит необходимые библиотеки для создания анимаций. Подключите эти библиотеки в конце страницы.

Так, для первой анимации используйте эти библиотеки:

<script src="js/TweenLite.min.js"></script>

<script src="js/EasePack.min.js"></script>

<script src="js/rAF.js"></script>

<script src="js/demo-1.js"></script>

Для второй анимации:

<script src="js/rAF.js"></script>

<script src="js/demo-2.js"></script>

Для третьей анимации:

<script src="js/TweenLite.min.js"></script>

<script src="js/EasePack.min.js"></script>

<script src="js/rAF.js"></script>

<script src="js/demo-3.js"></script>

Для того чтобы реализовать четвертую анимацию, используйте:

<script src="js/rAF.js"></script>

<script src="js/demo-4.js"></script>

На скриншотах, представленных ниже, виден эффект:

Первый пример наиболее интересен, поскольку при перемещении мыши эффект движется на заднем плане, что очень интересно и красиво. В заключение следует сказать, что ширина шапок — это ширина окна браузера посетителя сайта.  В данных примерах используются Canvas и Javascript. Помните, что не все гаджеты распознают тег Canvas, однако это не повод для паники. В таких случаях в шапке будет изображена статическая картинка.

Возможно, Вам будет интересно ↓↓↓

2web-master.ru

Как создать анимированную шапку для YouTube?

Главная / Статьи / Как создать анимированную шапку для канала YouTube?

284 25.01.2016

YouTube – это видеохостинг, а более простым языком – страница, где любой может поделиться видеоинформацией с широкой публикой в интернете. Для большей привлекательности такой страницы нужно продумать, как сделать анимированную шапку для канала youtube. Это поможет привлечь внимание большего количества подписчиков.

Содержание

    • Советы по созданию анимированной картинки
    • Технические характеристики изображения

Обычно в ютубе выставляются видеоблоги с забавными моментами, которые смогут просматривать друзья и случайные подписчики. На этом ресурсе делятся также серьезными бизнес-проектами, цель которых – приносить прибыль. Поэтому важность создания привлекательной страницы немаловажна, если необходимо, чтобы вашу страницу посещали и становились подписчиками как можно больше людей.

Советы по созданию анимированной картинки

Красивой и интересной личную страничку на ютубе можно сделать самостоятельно.

Ежедневно создается огромное количество схожих тем, которые выставляются в видеоблогах. Чтобы ваша страница привлекала внимание оригинальным и красивым видом, выделялась и отличалась от других, важно позаботиться о ее достойном оформлении. В этом вопросе не нужно перегибать палку и создавать слишком необычную шапку. Так можно распугать потенциальных подписчиков. Желательно, чтобы внешний вид шапки был ярким, понятным для людей и лаконичным.

Воспользовавшись несколькими советами оформления верха страницы, вы без проблем сделаете отличную шапку, которая понравится каждому посетителю:
  • фон шапки не должен рябить в глазах, избегайте перенасыщения множеством деталей;
  • текст должен хорошо читаться, для этого нужно подобрать подходящий стиль;
  • сделайте картинку яркой, но без кислотных цветов, на которые долго смотреть не очень приятно;
  • текстовой информацией шапку также не стоит перенасыщать;
  • указывайте только название блога и опишите его несколькими словами;
  • картинка должна соответствовать тематике канала.

Смотрите видео по теме:

Технические характеристики изображения

Youtube обычно делает запрос на картинку с высоким разрешением: 2569х1440 пикселей. Если картинка будет иметь другое разрешение, ее вид будет размытым, соответственно качество низкое и выглядеть это будет непривлекательно. Кроме того нужно учесть, что под разные устройства картинка подходит по-разному и ее изображение не везде одинаковое.

Шапка с разными полями для разных устройств должна иметь соответствующие размеры:
  • вид полной картинки при просмотре канала на большом телевизоре – 2560х1440;
  • для больших мониторов, имеющих высокое разрешение – 2560х423;
  • вид прямоугольника шапки для планшетов – 1855х423;
  • просмотр YouTube с телефона – 1546х423.

Лучшим вариантом будет размещение анимированной шапки в размерах 1546х423. Они подойдут практически для всех вышеперечисленных устройств.

По весу изображение должно быть меньше 2 Мб.

lifeha.ru


Смотрите также