| Меню сайта |
|
 |
| Категории раздела |
|
|
| Популярное |
|
|
|
| Мини-чат |
|
|
|
| Наш опрос |
Оцените мой сайт
Всего ответов: 7
|
|
| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
|
Смена изображений при прокрутке на JS
| 19.10.2020, 21:59 |
Смена изображений при прокрутке на JS
В статье подробно разберем, как создать прокручиваемую презентацию на странице с текстовой анимацией, где задействуем JavaScript, HTML и CSS3. Когда нам нужно показать разные типы вещей, и все это как то уместить корректно на одной веб-странице, то здесь можно создать отличную презентацию. Где изначально присутствует дизайн, только с текстом и тематическими изображениями, но как раз прикрепленный эффект создает это как красиво созданную презентацию.
В этом материале узнаете как создается такая оригинальная презентация с прокруткой изображений, которая производится с помощью Jquery. Как известно jquery, это и есть та библиотека JavaScript, поэтому она помещается в категорию JS.
В основном она имеет несколько разделов, где уже в каждом разделе располагается собственный текст под разные картинки с изображением. И вот когда начинаем прокрутку, тогда другой текстовый блок идет с прикрепленной к нему фотографией.
Вашему вниманию созданная презентация при помощи JS Scrolling, и безусловно с участием HTML и CSS. Здесь изображение будет меняться при прокрутке вверх или вниз. Хоть использовали библиотеку jQuery для ее легкого создания, так как она идет для легкой работы. Где Jquery производит изменение изображения, когда появляется другой текстовый блок.
Проверялся на работоспособность, где все функций отлично действуют.
Для установки вам нужно создать 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;
}
}
JS
Код
Код var angrednsol1 = $('#angrednsol1').offset().top;
var angrednsol2 = $('#angrednsol2').offset().top;
var angrednsol3 = $('#angrednsol3').offset().top;
var angrednsol4 = $('#angrednsol4').offset().top;
var scrollOffset = 300;
$(window).scroll(function() {
var scroll = $(window).scrollTop() + scrollOffset;
if ( scroll < 500 ) {
$('.nanceg-panamen img').attr('src', 'http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/b47sample3.jpg');
}
if ( scroll > angrednsol2 ) {
$('.nanceg-panamen img').attr('src', 'http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider4.jpg');
}
if ( scroll > angrednsol3 ) {
$('.nanceg-panamen img').attr('src', 'http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider3.jpg');
}
if ( scroll > angrednsol4 ) {
$('.nanceg-panamen img').attr('src', 'http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/image-slider1.jpg');
}
});
Как вы можете видеть в предварительном просмотре, доступно 4 изображения и текстовый блок. Где использовался тег HTML section для каждого раздела, в котором есть текст и изображение. Внутри раздела был размещен текст в div с именем класса текстового блока и поместил изображение в div с именем класса img-block.
Также задействовано много других типов div, где можете увидеть в основном коде. С помощью CSS был помещен текст и изображения в правильное положение, чтоб все смотрелось корректно. Это также все идет в адаптивном виде, где размещено изображение шириной только в 200 пикселей, но оно становится больше на больших экранах.
Демонстрация
Для создания эффекта размера я использовал запрос CSS @media, с установкой на 2 условия, что после этого изображение станет 500px на устройствах, которые шире, чем 700px, где аналогично, когда устройства имеют ширину более 1000 пикселей.
| После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
|
Категория: Скачать Скрипты для Ucoz | Добавил: Marco |
| Просмотров: 127 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Вход на сайт |
|
|
| Поиск |
|
|
| Популярное |
|
|
| Популярное |
|
|
|
|
