<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Уменьшение баннера при прокрутке страницы вниз

Уменьшение баннера при прокрутке страницы вниз

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


HTML разметка

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

<div class="banner"></div>
<div class="content">Здесь будет контент</div>

CSS код

Растянем на весь первый экран большое изображение и зафиксируем его, чтобы изображение не прокручивалось вместе со страницей.

.banner {
    background: url('banner.jpg') no-repeat center center;
    background-size: cover; // без потери пропорций
    position: fixed; // фиксация картинки наверху
    height: 100vh; // высота на весь экран
    width: 100%; // по ширине на весь экран
}

.content {
    background-color: #fff; // цвет фона под контент
    height: 2000px; // высота блока с контентом
    position: relative;
    top: 100vh;
}

JavaScript код

Нам нужно отследить событие прокрутки, поэтому первым аргументом вешаем слушатель addEventListener на событие scroll. Вторым аргументом через запятую передаем функцию. Внутри function объявляем переменную scroll (название дается по смыслу) и присваиваем ей свойство pageYOffset (отступ сверху). Находим наш баннер по селектору и присваиваем его второй переменной.

Что делает свойство pageYOffset?

Оно возвращает число пикселей, на которое была прокручена страница по вертикали.

window.addEventListener('scroll', function () {
    let scroll = window.pageYOffset;
    let banner = document.querySelector('.banner');
    banner.style.transform = ('translate3d(0,' + (scroll / 100) + '%,0) scale(' + (100 - scroll / 100) / 100 + ')');
});

В последней строке мы указываем, что при прокрутке для баннера в стилях следует применить свойство 3d-трансформации transform со значениями translate3d (плавно менять местоположение) и scale (плавно уменьшать баннер). Внутри translate3d передадим три параметра:

  • X - 0
  • Y - текущая позиция прокрутки поделенная на 100 и плюс проценты.
  • Z - 0

Если вас заинтересовало, как с помощью JavaScript можно создавать много чего полезного для сайта, то приглашаю вас познакомиться с моим видеокурсом. Курс помимо всей необходимой теоретической информации, содержит много практических примеров и упражнений. За более подробной информацией, переходите прямо сейчас!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.