ZorNet.Ru — сайт для вебмастера » HTML и CSS » Полноэкранный слайдер для сайта через CSS

Полноэкранный слайдер для сайта через CSS

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

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

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

Сначала мы создадим структуру HTML нашего документа, она будет состоять из бокового фиксированного меню навигации:

HTML

Код

И каждый из средств, которые будут занимать общее количество экрана, с выбранным выше меню слева, используется для перемещения между каждым из средств, которые мы определяем ниже:

Код

Важно отметить, что в меню, которое мы определяем в атрибуте, hrefидентификатор (атрибут id) средств, что означает, что мы используем назначение этих ссылок, представляет собой начало этих контейнеров для основной операции, которую позволяет HTML API.

CSS

Следующий CSS будет использоваться , чтобы зафиксировать боковое меню в левом боковом и помещен в центре, для него свойств , как используется position, display, justify-content и так делее.

Код

nav {
  position: fixed;
  left: 40px;
  top: 0;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
}

nav li {
  padding: 10px 0;
}

nav li a {
  position: relative;
  display: block;
}

nav li a:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #FFF;
  transition: 0.2s;
}

nav li.active a:after {
  background: #FFF;
}

nav.dark li a:after {
  border: 2px solid #444;
}

nav.dark li.active a:after {
  background: #444;
}

Теперь мы определяем CSS так, чтобы средства занимали 100% экрана, где для этого CSS определяется в polyscape-background:

Код

.polyscape-background {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.polyscape-background > div {
  position: absolute;
}

#polyscape-1 {
  background-image: url(../images/polyscape-1/mountain.jpg) ;
}

#polyscape-2 {
  background-image: url(../images/polyscape-2/mist.jpg) ;
}

#polyscape-3 {
  background-image: url(../images/polyscape-3/space.jpg) ;
}

#polyscape-4 {
  background-image: url(../images/polyscape-4/lake.jpg) ;
  filter: grayscale(25%);
}

#polyscape-5 {
  background-image: url(../images/polyscape-5/mountain.jpg) ;
}

Перключатели и активация:

Для этого мы используем следующий код jQuery:

Этот код захватывает события щелчка бокового меню и отменяет поведение по умолчанию и прокручивает фон программно с помощью анимации:

Код

menuItems.click(function(e){
  var href = $(this).attr("href"),
  offsetTop = href === "#" ? 0 : $(href).offset().top;
  $('html, body').stop().animate({
  scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

Этот код регистрирует в массиве высоту каждого контейнера, который содержит фон в полноэкранном режиме:

Код

scrollItems = menuItems.map(function(){
  var item = $($(this).attr("href"));
  if (item.length) { return item; }
  });

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

Код

// Bind to scroll
$(window).scroll(function(){
  // Get container scroll position
  var fromTop = $(this).scrollTop();


  // Get id of current scroll item
  var cur = scrollItems.map(function(){
  if ($(this).offset().top-100

Вы можете ознакомиться с исходным кодом эксперимента.

Вот список всех доступных фильтров CSS:

1. Полутоновой;
2. Оттенок поворота;
3. Инвертировать;
4. Контрастировать;
5. Пятно;
6. Яркость;
7. Помутнение;
8. Насыщать;
9. Сепия;
10. Раскрывающаяся тень;

Появляется возможность объединить сразу несколько фильтров, пока не получим желаемый результат:

В демонстрациях изначально используется несколько экспериментальных свойств стилистики CSS, что большая вероятность не работать во всех браузерах, а точнее на старых версиях.

Демонстрация

12 Сентября 2018 Загрузок: 1 Просмотров: 1316 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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