Слайдер «Было — Стало» — это интерактивный инструмент, который позволяет зрителю сравнить две фотографии: одну до и одну после изменений. Он используется в веб-дизайне, рекламе, а также в фотографии, чтобы наглядно продемонстрировать качество работы или эффект от использования продукта. В этой статье мы рассмотрим, как создать слайдер для картинок «Было — Стало» с нуля, используя HTML, CSS и JavaScript.
Подготовка изображений
Перед началом работы вам потребуется подготовить два изображения:
- Изображение «Было»: показывает исходное состояние объекта или места.
- Изображение «Стало»: демонстрирует конечный результат после внесённых изменений.
Оба изображения должны быть одинаковых размеров для корректного отображения в слайдере.
Создание HTML-структуры
Создайте базовую HTML-структуру, которая будет содержать контейнер и два изображения:
<div class="slider"> <img src="before.jpg" alt="Before" class="before"> <img src="after.jpg" alt="After" class="after"> </div>
Стилизация с CSS
Чтобы слайдер работал корректно, необходимо правильно настроить CSS:
.slider {
position: relative;
width: 500px; /* Задайте нужную ширину */
overflow: hidden;
}
.slider img {
position: absolute;
width: 100%;
transition: transform 0.4s ease;
}
.slider .before {
z-index: 2;
}
.slider .after {
z-index: 1;
}
Добавление интерактивности с помощью JavaScript
JavaScript позволит пользователю перемещать ползунок и менять видимость картинок:
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const beforeImg = slider.querySelector('.before');
slider.addEventListener('mousemove', function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left; // Получаем положение курсора
beforeImg.style.width = x + 'px';
});
});
Проверка и тестирование
После реализации кода убедитесь, что все функционирует корректно в разных браузерах и на разных устройствах. Особое внимание уделите адаптивности и реакции на сенсорные управления.
Расширенные возможности интерактивности
Анимация для ползунка
Чтобы добавить плавное передвижение ползунка между изображениями «Было» и «Стало», вы можете использовать CSS-транзиции. Например, добавьте следующий CSS-код для анимации изменения ширины:
.slider img {
transition: width 0.5s ease-in-out;
}Это позволит ползунку плавно расширять или сужать видимую область изображения при перемещении курсора.
Автоматическое переключение
Для автоматического переключения можно добавить JavaScript-таймер:
let toggle = true;
setInterval(() => {
const beforeImg = document.querySelector('.slider .before');
beforeImg.style.width = toggle ? '100%' : '0%';
toggle = !toggle;
}, 3000); // Изменение происходит каждые 3000 мс (3 секунды)Этот скрипт будет чередовать «Было» и «Стало» каждые три секунды, позволяя пользователям увидеть изменения без взаимодействия.
Адаптивность
Медиазапросы для разных экранов
Чтобы слайдер корректно отображался на различных устройствах, важно использовать медиазапросы. Например, вы можете задать разные размеры для мобильных телефонов, планшетов и десктопов:
.slider {
width: 100%;
max-width: 600px;
}
@media (max-width: 768px) {
.slider {
max-width: 500px;
}
}
@media (max-width: 480px) {
.slider {
max-width: 300px;
}
}Эти стили позволят слайдеру адаптироваться к ширине экрана устройства, обеспечивая удобное просмотрение.
Сенсорное управление
Добавьте поддержку сенсорного управления, чтобы пользователи могли управлять на сенсорных устройствах. Используйте события touchstart и touchmove для этого:
slider.addEventListener('touchmove', function(e) {
e.preventDefault(); // Предотвратить стандартное поведение скроллинга
let touch = e.touches[0];
let rect = slider.getBoundingClientRect();
let x = touch.clientX - rect.left;
beforeImg.style.width = x + 'px';
});Этот код позволяет пользователю перемещать ползунок, касаясь экрана и перетаскивая палец влево или вправо.
Добавление этих функций сделает ваш слайдер более функциональным и удобным для всех пользователей, независимо от их устройства или предпочтений в управлении.
Готовый проект
Создание слайдера изображений «Было — Стало» с расширенными функциями, включая анимацию, автоматическое переключение, адаптивность и сенсорное управление, включает разработку HTML, CSS и JavaScript. Вот полный код проекта:
HTML (index.html)
Создайте HTML-структуру, которая будет включать два изображения в контейнере для слайдера:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Интерактивный Слайдер «Было — Стало»</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="slider" id="imageSlider"> <img src="before.jpg" alt="Before" class="before"> <img src="after.jpg" alt="After" class="after"> </div> <script src="script.js"></script> </body> </html>
CSS (styles.css)
Определите стили, включая адаптивные медиазапросы и базовую анимацию:
body, html {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.slider {
position: relative;
width: 100%;
max-width: 600px;
height: 400px; /* Высота по желанию */
overflow: hidden;
}
.slider img {
position: absolute;
width: 100%;
height: 100%;
transition: width 0.5s ease-in-out;
}
.slider .before {
z-index: 2;
}
.slider .after {
z-index: 1;
}
@media (max-width: 768px) {
.slider {
max-width: 500px;
}
}
@media (max-width: 480px) {
.slider {
max-width: 300px;
}
}
JavaScript (script.js)
Добавьте JavaScript для управления, включая сенсорное управление и автоматическое переключение:
document.addEventListener('DOMContentLoaded', function() {
const slider = document.getElementById('imageSlider');
const beforeImg = slider.querySelector('.before');
let toggle = true;
// Функция для изменения ширины изображения "Было"
function moveSlider(x) {
beforeImg.style.width = x + 'px';
}
// Обработчик движения мыши
slider.addEventListener('mousemove', function(e) {
moveSlider(e.clientX - slider.getBoundingClientRect().left);
});
// Обработчик сенсорного управления
slider.addEventListener('touchmove', function(e) {
e.preventDefault();
moveSlider(e.touches[0].clientX - slider.getBoundingClientRect().left);
});
// Автоматическое переключение
setInterval(() => {
const sliderWidth = slider.offsetWidth;
const newWidth = toggle ? sliderWidth : 0;
beforeImg.style.width = newWidth + 'px';
toggle = !toggle;
}, 3000); // Изменение происходит каждые 3 секунды
});
Заключение
Слайдер «Было — Стало» — отличный способ демонстрации визуальных изменений. Создав его самостоятельно, вы не только улучшите функциональность своего веб-проекта, но и получите уникальный опыт в веб-разработке. Этот проект можно дополнительно расширить, добавив функции, такие как поддержка мобильных устройств или динамическая загрузка картинок.
