BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?

Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?

2016-06-02 / Вр:01:06 / просмотров: 1372

Здравствуйте, друзья!
Трудно себе представляете, в чем заключается этот эффект?
Заголовок, который прилипает к верхней части окна просмотра, при прокрутке страницы, будет уменьшаться и прилепляться к левой части экрана.
Мда, тяжело объяснить эффект на словах, поэтому для вас, читатели BlogGood.ru, есть демонстрация эффекта. Будьте любезны перейти и посмотреть, как все должно выглядеть в конечном результате.

[демонстрация  экрана]

Хочу заметить, что даю уже готовый код, и не буду объяснять для начинающих, что и куда нужно вставлять, так как если вы не в курсе, тогда милости прошу на основы HTML.
Теперь готовый код:

В HTML:

<header>
<h1>Просто заголовок</h1>
</header>
<p>куча инфы</p>

В CSS:

header {
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;

-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
position: fixed;
font-size: 24px;
line-height: 48px;
height: 48px;
width: 100%;
background: #efc47D;
text-align: left;
padding-left: 20px;
}

/* Вспомогательные стили */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
header { display: block; }
body {
background-color: #f5f5f5;
line-height: 1;
text-align: center;
}

JS (как подключить библиотеку jquery читайте тут):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?

  1. Александр

    Классный эффект, надо записать. :idea: Спасибо Степан.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Александр!

    Ответить

  2. Trash

    Можете сказать, как поместить в этот список? Спасибо!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Что поместить?

    Ответить

    Trash отвечает:

    я хотел сказать, когда прокручиваешь страницу вниз, чтобы в header появился список, на подобе меню

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Не знаю, правильно ли я Вас понял, но можете просмотреть эффект вот здесь http://bloggood.ru/effekty-dlya-sajta-2/vydvigayushhayasya-panel-pri-prokrutke-stranicy.html/

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010