<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

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

Как сделать индикатор прокрутки на CSS3.

Как сделать индикатор прокрутки на CSS3.

Всем привет! В этой статье мы рассмотрим, как сделать индикатор прокрутки на чистом CSS3.

Думаю, вы могли видеть индикатор загрузки страницы в YouTube. Он находится сверху и представляет из себя просто бегущую красную линию.

Сегодня мы сделаем такой же индикатор, который будет показывать, сколько содержимого страницы вы просмотрели. По мере прокрутки он будет так же двигаться вправо, но будет синенький и на чистом CSS3. Естественно, если вам будет нужно, вы сможете сами поменять его настройки.

HTML

Для начала напишем HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Индикатор прокрутки</title>
</head>
<body>
  <header>
   <h1>Индикатор прокрутки</h1>
  </header>
  <main>
   <h2>Заголовок</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia perspiciatis quis, laudantium, quod quibusdam, maxime error expedita
quidem consequatur autem laboriosam saepe earum illum atque reprehenderit! Reiciendis, ipsa aperiam, quod rem culpa tempora, dolorum quaerat cumque eaque dolores dolore nisi sit sapiente quidem ipsam esse numquam assumenda, aut laudantium fugiat aliquam dignissimos. Perferendis, eveniet, adipisci. Earum, soluta ducimus doloremque sed non blanditiis minima corrupti libero quo, facilis temporibus. Mollitia magni iure eveniet harum perspiciatis, inventore facere aliquam cumque fugit natus repudiandae error unde aliquid fugiat distinctio obcaecati cupiditate beatae excepturi ipsa quaerat illum voluptas. Adipisci ullam aliquid tempora ea error.</p>
  </main>
</body>
</html>

Тут все просто: есть сам индикатор, который находится в header, там же находится заголовок страницы. Дальше идет тег main с основным содержимым страницы. В нем у нас находится заголовок и параграф текста. Конечно, содержимое может быть другим. Чтобы не загромождать код, я не стал писать еще много текста, поэтому просто продублируйте все содержимое страницы(что находится в теге main) около 7 раз для наблюдения работы индикатора прокрутки.

CSS

Теперь перейдем к CSS коду:

html,body{margin:0;}
header{
  position: fixed;
  top:0;
  height: 125px;
  width: 100%;
  background: white;
}

main{
  margin-top: 128px;
}

@supports (height: 100vh) {
  body{
   background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
   background-size: 100% calc(100% - 100vh + 129px);
   background-repeat: no-repeat;
  }

  body:before{
   content:'';
   position: fixed;
   top: 128px;
   bottom: 0;
   width: 100%;
   z-index: -1;
   background: white;
  }
}

Тут тоже нет ничего сложного. Сначала мы убираем внешние отступы у тегов html и body, дальше фиксируем header, чтобы он не прокручивался, прижимаем его к верху страницы, задаем высоту и ширину, а также цвет заднего фона. У тега main мы делаем отступ сверху, чтобы содержимое страницы не уходило под блок, когда страница находится вверху. Теперь с помощью CSS3 мы высчитываем, насколько процентов была прокручена страница, и рисуем градиент в виде полосочки.

И это все! Если вы не очень хорошо знаете CSS3 и вам не понятно, как работает код нового стандарта, то рекомендую приобрести видеокурс HTML5 и CSS3 с Нуля до Гуру, после просмотра которого вопросов у вас просто не останется!

А у меня на этом все. Спасибо за внимание!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

white-hot white-hot 09.08.2016 02:08:53

прикольно,спасибо!

Ответить

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