Who will help to make the same HTML, CSS, JS block

Trolllol228 · Apr 13, 2025

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

unleash · Apr 13, 2025

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

NeLoxBro · Apr 29, 2025

В лс отпиши

okeeeguyyys · Apr 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>
код с инета в два клика нашел. картинки поменяешь и все

How to remove white stripes on top and bottom on safari?

Purple theme for lolz.guru and zelenka.guru

Is it worth giving up learning JavaScript to first learn HTML and CSS & SASS for Web/Frontend?

Fast and modern web services

How do you like simple billing?

Tell me, where can I find approximate tutorials on creating liquid glass, like IOS26?

Frontender at a startup

Assess Telegram Mini App

Can a web app use the island on an iPhone?

How can you make SDA on a website?

Has anyone worked with SSO Keycloak?

[VITE] Protect your project in Telegram WebApp

Where can you hone your frontend skills?

Nawaib coded

Im making an animated rocket casino in WebApp, I need design advice

Give the layout of the authorization to TG

How practical is it to use zoom in CSS?

Layout course|FREE|+in comms

What is the best way to implement an AI chat bot?

Help the front -enders

What are the norms

Beginner Web3 front-end developer-I will make a site/business card for free for portfolio

How to create an exact copy of the site?

I will make a simple site | For review

Free will create a site for you for a review in TGK

I am looking for a brow who knows how to do anems Lottiefiles

Web for review | FrontenD | sites |

How to fix it?

Figma neuron

How to prescribe the animation of buttons in QT Designer? CSS

Who will help to make the same HTML, CSS, JS block