Кто поможет сделать такой же блок html, css, js

Trolllol228 · 13 апр 2025

У меня левая картинка растягивается

unleash · 13 апр 2025

ну этим занимается Nuboveresk можешь попросить у него помочь тебе

NeLoxBro · 29 апр 2025

В лс отпиши

okeeeguyyys · 30 апр 2025

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Before & After Slider (No jQuery)</title>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
background: #111;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.ba-slider {
position: relative;
max-width: 800px;
width: 100%;
overflow: hidden;
cursor: ew-resize;
}

.ba-slider img {
display: block;
width: 100%;
height: auto;
user-select: none;
pointer-events: none;
}

.resize {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
}

.resize img {
position: absolute;
top: 0;
left: 0;
}

.handle {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background: #fff;
z-index: 2;
transform: translateX(-50%);
}
</style>
</head>
<body>

<div class="ba-slider" id="slider">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-before.jpg" alt="Before">
<div class="resize" id="resize">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-after.jpg" alt="After">
</div>
<div class="handle" id="handle"></div>
</div>

<script>
const slider = document.getElementById('slider');
const handle = document.getElementById('handle');
const resize = document.getElementById('resize');

let dragging = false;

slider.addEventListener('mousedown', (e) => {
dragging = true;
});

document.addEventListener('mouseup', () => {
dragging = false;
});

document.addEventListener('mousemove', (e) => {
if (!dragging) return;
let rect = slider.getBoundingClientRect();
let offsetX = e.clientX - rect.left;

if (offsetX < 0) offsetX = 0;
if (offsetX > rect.width) offsetX = rect.width;

let percent = (offsetX / rect.width) * 100;

handle.style.left = percent + '%';
resize.style.width = percent + '%';
});

// Touch support
slider.addEventListener('touchstart', (e) => {
dragging = true;
});

document.addEventListener('touchend', () => {
dragging = false;
});

document.addEventListener('touchmove', (e) => {
if (!dragging) return;
let touch = e.touches[0];
let rect = slider.getBoundingClientRect();
let offsetX = touch.clientX - rect.left;

if (offsetX < 0) offsetX = 0;
if (offsetX > rect.width) offsetX = rect.width;

let percent = (offsetX / rect.width) * 100;

handle.style.left = percent + '%';
resize.style.width = percent + '%';
});
</script>

</body>
</html>

HTML
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Before & After Slider (No jQuery)</title>

  <style>

    * {

      box-sizing: border-box;

    }



    body {

      margin: 0;

      padding: 0;

      background: #111;

      font-family: sans-serif;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 100vh;

    }



    .ba-slider {

      position: relative;

      max-width: 800px;

      width: 100%;

      overflow: hidden;

      cursor: ew-resize;

    }



    .ba-slider img {

      display: block;

      width: 100%;

      height: auto;

      user-select: none;

      pointer-events: none;

    }



    .resize {

      position: absolute;

      top: 0;

      left: 0;

      height: 100%;

      width: 50%;

      overflow: hidden;

    }



    .resize img {

      position: absolute;

      top: 0;

      left: 0;

    }



    .handle {

      position: absolute;

      top: 0;

      left: 50%;

      width: 4px;

      height: 100%;

      background: #fff;

      z-index: 2;

      transform: translateX(-50%);

    }

  </style>

</head>

<body>



  <div class="ba-slider" id="slider">

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-before.jpg" alt="Before">

    <div class="resize" id="resize">

      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-after.jpg" alt="After">

    </div>

    <div class="handle" id="handle"></div>

  </div>



  <script>

    const slider = document.getElementById('slider');

    const handle = document.getElementById('handle');

    const resize = document.getElementById('resize');



    let dragging = false;



    slider.addEventListener('mousedown', (e) => {

      dragging = true;

    });



    document.addEventListener('mouseup', () => {

      dragging = false;

    });



    document.addEventListener('mousemove', (e) => {

      if (!dragging) return;

      let rect = slider.getBoundingClientRect();

      let offsetX = e.clientX - rect.left;



      if (offsetX < 0) offsetX = 0;

      if (offsetX > rect.width) offsetX = rect.width;



      let percent = (offsetX / rect.width) * 100;



      handle.style.left = percent + '%';

      resize.style.width = percent + '%';

    });



    // Touch support

    slider.addEventListener('touchstart', (e) => {

      dragging = true;

    });



    document.addEventListener('touchend', () => {

      dragging = false;

    });



    document.addEventListener('touchmove', (e) => {

      if (!dragging) return;

      let touch = e.touches[0];

      let rect = slider.getBoundingClientRect();

      let offsetX = touch.clientX - rect.left;



      if (offsetX < 0) offsetX = 0;

      if (offsetX > rect.width) offsetX = rect.width;



      let percent = (offsetX / rect.width) * 100;



      handle.style.left = percent + '%';

      resize.style.width = percent + '%';

    });

  </script>



</body>

</html>
код с инета в два клика нашел. картинки поменяешь и все

Bio сайт

Сделаю сайт бесплатно за отзыв

Проблема с клавиатурой IOS в telegram web app.

Персональная карточка Terminal

404 Okak

Фронтенд-разработка сайтов: HTML, CSS и JavaScript

Personal Card

Бесплатный ленд за отзыв

БЕСПЛАТНО создам ЛИЧНО ВАМ сайт за отзыв в тгк

Быстрые и современные веб-сервисы

Кряк DevExpress

Как удалить водяной знак lovable с сгенерированного сайта?

Выживание - Telegram Mini app

БЕСПЛАТНО сверстаю сайт, лендинг, страницу, визитку, под ****** и т.д.

Как прописать анимацию кнопок в QT DESIGNER? CSS

Анонимный чат Telegram Mini-app

Куда в фигме пропал css export?

Что не так в данном SVG файле? почему форум не принимает его?

{FREE} BackEnd/FrontEnd регчек/парс/запросы это я могу

Всем привет оцените первый сайт

Кто поможет сделать такой же блок html, css, js

Курс верстки|БЕСПЛАТНО|+в коммы

Typerscript Discord Plugin AutoMute [Vencord]

Как пользоватся VS CODE для написания кода?

FLS GULP 3.0 Документация

Разработка приложения для отслеживания финансовой статистики

Нужно воспроизвести код java

Чем сейчас занимаются java-программисты?

Нужно сделать сайт

Как удалить тег в index.html от нейросети lovable?

Кто поможет сделать такой же блок html, css, js