Focusing in on a PARTICULAR SECTION of the picture

Question

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it.

To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots.

The goal is to zoom in on each paragraph individually so that viewers can see corresponding paragraphs from both articles clearly.

In my attempts to achieve this effect, I initially used offset: path() with a transition on the width attribute. However, this resulted in an unintended rotation of the screenshot, displaying it horizontally regardless of the width attribute adjustment.

Subsequently, adding a transition to the top: 0; attribute came close to the desired effect.

Finally, I experimented with applying a transition using two negative margins: margin-top: -20% & margin-bottom: -20%. Though successful in the upper areas of the screenshot, this method posed a challenge as the negative margin values persisted.

Despite various attempts with negative margins, none seemed to produce the desired zoom effect effectively.

Looking into alternative solutions, I discovered the existence of a zoom property. Could this potentially offer the effect I am seeking? Perhaps JavaScript could provide a better alternative?

Below is the code snippet:

body {
  overflow-x: hidden;
}

.drag-container {
  display: flex;
  min-height: 100vh;
}

[class^="panel"] {
  padding: 0px 0px;
  background-color: white;
}

.panel-one {
  width: 48.9%;
}

.panel-two {
  flex: 1;
  width: 52.1%;
}

.dragbar {
  position: relative;
  padding: 2px;
  cursor: pointer;
  background-color: rgb(25, 0, 75);
}

.slider {
  position: relative;
  z-index: 9;
  cursor: pointer;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
}

.reference-image {
  position: relative;

  width: 100%;
  height: 100%;

  transition-property: width , top , margin-top;
  transition-duration: 1s;

  margin-top: 0;
  margin-bottom: 0;
}

.reference-image:hover {
  width: 179.1%;

  margin-top: -20%;
  margin-bottom: -20%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" ; href="COPY.css">

  <title>History of Africa</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;

      text-align: center;
    }
  </style>

</head>

<body>
  <!-- DRAG BAR (IMAGE) -->
  <div class="drag-container">
    <div class="panel-one" ; id="drag-left">

      <img src="https://i.sstatic.net/QSr5pLZn.png" ; style="display: block; width: 100%;">

      <h1 style="text-decoration: underline;">Safkfsdf Akslefos Alpsdfd</h1>

      <br>
      <br>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam reprehenderit modi eius
        numquam.Quia saepe nulla aliquid nesciunt et a pariatur expedita mollitia. Suscipit
        necessitatibus temporibus architecto ea rerum eveniet.
        Vitae quis sint tenetur impedit corrupti esse error amet minima enim. Eos quas similique
        aperiam itaque autem. Veritatis optio deleniti, deserunt animi soluta, nam ab aut maxime
        inventore quis voluptate.
        Ipsam, corporis earum. Ipsa quasi ipsum eius, dolor dolore assumenda! Eum quod fugit iste
        dignissimos exercitationem libero, numquam reprehenderit, rerum totam, delectus expedita
        voluptas nam unde! Magnam corrupti ratione amet.
        Quaerat quasi qui pariatur earum nobis velit, nemo consectetur laborum tenetur sed! Modi
        ipsa temporibus mollitia dolor inventore. Sapiente molestias alias nesciunt! Dolor non
        quas soluta eaque repellendus enim ipsam.
      </p>
    </div>

    <div class="dragbar" ; id="dragbar">
      <div class="slider"></div>
    </div>

    <div class="panel-two" ; id="drag-right">

      <img class="reference-image" ; src="https://i.sstatic.net/jN8q6WFd.png" ; width="100%" ; height="100%">
      
    </div>
  </div>

</body>

</html>

javascript html css

Answer 1

Answer №1

To create zoom effects using a background image, adjust the background-size and background-position.

const d2 = document.querySelector('.d2')
document.addEventListener('click', evt => {
  if (!evt.target.dataset.index) return
  d2.className = "d2"
  switch(Number(evt.target.dataset.index)) {
    case 1:
      d2.classList.add('zoom','cyan')
      break
    case 2:
      d2.classList.add('zoom','yellow')
      break
    case 3:
      d2.classList.add('zoom','green')
      break
    case 4:
      d2.classList.add('zoom','blue')
      break
    case 5:
      d2.classList.add('zoom','red')
      break
    case 6:
      d2.classList.add('zoom','navy')
      break
  }
})

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.d1 {
  padding: 1em;  
}

.d2 {
  height: 100vh;
  background: url(https://i.sstatic.net/jN8q6WFd.png);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

.d2.zoom {
  background-size: 150%;
}

.d2.cyan {
  background-position: right 16%;
}

.d2.yellow {
  background-position: right 30%;
}

.d2.green {
  background-position: right 44%;
}

.d2.blue {
  background-position: right 58%;
}

.d2.red {
  background-position: right 72%;
}

.d2.navy {
  background-position: right 86%;
}

<div class="d1">
  <p>Explore different sections by clicking on the buttons below</p>
  <button data-index="0">Reset</button>
  <button data-index="1">Cyan</button>
  <button data-index="2">Yellow</button>
  <button data-index="3">Green</button>
  <button data-index="4">Blue</button>
  <button data-index="5">Red</button>
  <button data-index="6">Navy</button>
</div>
<div class="d2"></div>

Answer 2

To create zoom effects using a background image, adjust the background-size and background-position.

const d2 = document.querySelector('.d2')
document.addEventListener('click', evt => {
  if (!evt.target.dataset.index) return
  d2.className = "d2"
  switch(Number(evt.target.dataset.index)) {
    case 1:
      d2.classList.add('zoom','cyan')
      break
    case 2:
      d2.classList.add('zoom','yellow')
      break
    case 3:
      d2.classList.add('zoom','green')
      break
    case 4:
      d2.classList.add('zoom','blue')
      break
    case 5:
      d2.classList.add('zoom','red')
      break
    case 6:
      d2.classList.add('zoom','navy')
      break
  }
})

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.d1 {
  padding: 1em;  
}

.d2 {
  height: 100vh;
  background: url(https://i.sstatic.net/jN8q6WFd.png);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

.d2.zoom {
  background-size: 150%;
}

.d2.cyan {
  background-position: right 16%;
}

.d2.yellow {
  background-position: right 30%;
}

.d2.green {
  background-position: right 44%;
}

.d2.blue {
  background-position: right 58%;
}

.d2.red {
  background-position: right 72%;
}

.d2.navy {
  background-position: right 86%;
}

<div class="d1">
  <p>Explore different sections by clicking on the buttons below</p>
  <button data-index="0">Reset</button>
  <button data-index="1">Cyan</button>
  <button data-index="2">Yellow</button>
  <button data-index="3">Green</button>
  <button data-index="4">Blue</button>
  <button data-index="5">Red</button>
  <button data-index="6">Navy</button>
</div>
<div class="d2"></div>

Focusing in on a PARTICULAR SECTION of the picture

Answer №1

Similar questions

JavaScript bug with URL encoding in Internet Explorer 11

Is it possible for an Express app.get() function to identify and handle requests for specific file extensions

Delivering objects from controller in AngularJS

Simulating a JavaScript constructor using Sinon.JS

How can I transfer data from a C# code to a JavaScript file in asp.net?

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

Arranging JavaScript object by object properties (name)

Failed commitments in Protractor/WebDriverJS

Connecting different jQuery methods to create a chain

Display the current language in the Vue language dropdown

PostgreSQL dynamic query with Node.js

"Enhance Your Website with Various Hover Effects Using CSS across Multiple Elements

What is the best way to horizontally align Font Awesome icons in the center?

Enhance the impact of "dialogs" to the fullest extent or minimize it to achieve the

Challenges with form validation

Sidebar content alignment vertically

Is the Three.JS camera update causing issues with the shader?

What is the method to group a TypeScript array based on a key from an object within the array?

Display a message in jQuery when the same option is chosen more than once

The Threejs Blender exporter is exporting in an incorrect format