ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Смена изображений при прокрутке на JS

Смена изображений при прокрутке на JS

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

В этом материале узнаете как создается такая оригинальная презентация с прокруткой изображений, которая производится с помощью Jquery. Как известно jquery, это и есть та библиотека JavaScript, поэтому она помещается в категорию JS.

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

Вашему вниманию созданная презентация при помощи JS Scrolling, и безусловно с участием HTML и CSS. Здесь изображение будет меняться при прокрутке вверх или вниз. Хоть использовали библиотеку jQuery для ее легкого создания, так как она идет для легкой работы. Где Jquery производит изменение изображения, когда появляется другой текстовый блок.

Проверялся на работоспособность, где все функций отлично действуют.

Изменение изображения при прокрутке через javascript

Для установки вам нужно создать 3 файла, где первый для HTML, второй для CSS и третий для JavaScript, а далее все по инструкций, которая в основе везде одинакова.

Первым делом нужно подключить библиотеку, если она у вас на сайте присутствует, то по установке проходим далее. У кого конструктор uCoz, то вам не нужно ее выставлять, так как по умолчанию библиотека в системе прошита.

HTML

Код

<section id="angrednsol1">
  <div class="in-iudinamensad">
  <div class="ferme-ntugiat">
  <div class="kapiscing">
  <p>Место под первое описание к изображению.
  </p>
  </div>
  </div>
  <div class="img-block">
  <div class="nanceg-panamen image-1 active"><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/b47sample3.jpg"/></div>
  </div>
  </div>
</section>
<section id="angrednsol2">
  <div class="in-iudinamensad">
  <div class="ferme-ntugiat">
  <div class="kapiscing">
  <p>Здесь идет второе описание к тематической картинке.
  </p>
  </div>
  </div>
  <div class="img-block">
  <div class="nanceg-panamen image-2 active"><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider4.jpg"/></div>
  </div>
  </div>
</section>
<section id="angrednsol3">
  <div class="in-iudinamensad">
  <div class="ferme-ntugiat">
  <div class="kapiscing">
  <p>Третье краткое пояснение, виде описания.
  </p>
  </div>
  </div>
  <div class="img-block">
  <div class="nanceg-panamen image-3 active"><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider3.jpg"/></div>
  </div>
  </div>
</section>
<section id="angrednsol4">
  <div class="in-iudinamensad">
  <div class="ferme-ntugiat">
  <div class="kapiscing">
  <p>Четвертое описание, которое закреплено под изображение.
  </p>
  </div>
  </div>
  <div class="img-block">
  <div class="nanceg-panamen image-4 active"><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider1.jpg"/></div>
  </div>
  </div>
</section>

CSS

Код

img {
  width: 200px;
  display: block;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 700px) {
  img {
  width: 500px;
  }
}
@media (min-width: 1000px) {
  img {
  width: 700px;
  }
}
.in-iudinamensad {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}

.ferme-ntugiat,
.img-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kapiscing {
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.nanceg-panamen {
  position: fixed;
  z-index: 100;
}
.image-1,
.image-2,
.image-3 {
  opacity: 0;
}
.image-1.active,
.image-2.active,
.image-3.active {
  -webkit-animation: myAni 1000ms ease forwards;
  animation: myAni 1000ms ease forwards;
  opacity: 1;
}
@keyframes myAni {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}
@-webkit-keyframes myAni {
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
}

Код

Как вы можете видеть в предварительном просмотре, доступно 4 изображения и текстовый блок. Где использовался тег HTML section для каждого раздела, в котором есть текст и изображение. Внутри раздела был размещен текст в div с именем класса текстового блока и поместил изображение в div с именем класса img-block.

Также задействовано много других типов div, где можете увидеть в основном коде. С помощью CSS был помещен текст и изображения в правильное положение, чтоб все смотрелось корректно. Это также все идет в адаптивном виде, где размещено изображение шириной только в 200 пикселей, но оно становится больше на больших экранах.

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

Видео обзор:

Для создания эффекта размера я использовал запрос CSS @media, с установкой на 2 условия, что после этого изображение станет 500px на устройствах, которые шире, чем 700px, где аналогично, когда устройства имеют ширину более 1000 пикселей.

01 Августа 2019 Загрузок: 5 Просмотров: 3302 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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