Is there a way to have a div grow in size as I move the viewport?

Question

Is there a way to have a div grow in size as I move the viewport?

My goal is to create a smooth panning effect within a viewport using a child <div>. However, I want the child <div> to always fill the viewport completely, without any edges visible. Essentially, I am looking for a way to make the panning experience "endless" by continuously adding onto the child <div> when the user approaches the edge of the viewport.

UPDATE: Just to clarify, my intention is for the child <div> to remain stationary while allowing users to pan around freely. The idea is to create an illusion of an infinite plane that users can explore without any fixed elements in play.

javascript jquery html css

Answer 1

Answer №1

After some trial and error, I managed to resolve this issue by introducing a separate element that mirrors the grid background, while also ensuring that the background moves along with the child <div>. Take a look at the snippet below:

var isDragging = false;
var lastMouseX;
var lastMouseY;

$("#viewport").mousedown(function(ev) {
  if (ev.which == 1) {
    isDragging = true;
  }
});

$("html").mouseup(function(ev) {
  if (ev.which == 1) {
    isDragging = false;
  }
});

$("#viewport").mousemove(function(e) {
  var deltaX = lastMouseX - e.clientX;
  var deltaY = lastMouseY - e.clientY;

  lastMouseX = e.clientX;
  lastMouseY = e.clientY;

  if (isDragging) {
    $("#view").css({
      left: "-=" + deltaX,
      top: "-=" + deltaY
    });
    $("#grid").css({
      'background-position-x': "-=" + deltaX,
      'background-position-y': "-=" + deltaY,
    });
  };
});

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#viewport {
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#view {
  position: relative;
  width: 100%;
  height: 100%;
}

#grid {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: 24px 24px;
  background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="viewport">
  <div id="grid"></div>
  <div id="view"></div>
</div>

Answer 2

After some trial and error, I managed to resolve this issue by introducing a separate element that mirrors the grid background, while also ensuring that the background moves along with the child <div>. Take a look at the snippet below:

var isDragging = false;
var lastMouseX;
var lastMouseY;

$("#viewport").mousedown(function(ev) {
  if (ev.which == 1) {
    isDragging = true;
  }
});

$("html").mouseup(function(ev) {
  if (ev.which == 1) {
    isDragging = false;
  }
});

$("#viewport").mousemove(function(e) {
  var deltaX = lastMouseX - e.clientX;
  var deltaY = lastMouseY - e.clientY;

  lastMouseX = e.clientX;
  lastMouseY = e.clientY;

  if (isDragging) {
    $("#view").css({
      left: "-=" + deltaX,
      top: "-=" + deltaY
    });
    $("#grid").css({
      'background-position-x': "-=" + deltaX,
      'background-position-y': "-=" + deltaY,
    });
  };
});

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#viewport {
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#view {
  position: relative;
  width: 100%;
  height: 100%;
}

#grid {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: 24px 24px;
  background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="viewport">
  <div id="grid"></div>
  <div id="view"></div>
</div>

Answer 3

Answer №2

Experiment with adjusting the dimensions and location of the container

if (isDragging) {
  $("#container").css({
    left: "-=" + deltaX,
    top: "-=" + deltaY,
    width: "+=" + deltaX,
    height: "+=" + deltaY
});

Answer 4

Experiment with adjusting the dimensions and location of the container

if (isDragging) {
  $("#container").css({
    left: "-=" + deltaX,
    top: "-=" + deltaY,
    width: "+=" + deltaX,
    height: "+=" + deltaY
});

Is there a way to have a div grow in size as I move the viewport?

Answer №1

Answer №2

Similar questions

Struggling to resolve issues with out-of-Viewport elements in my code while using Python 3.7 and Selenium

The functionality of the jQuery script is not operating optimally, causing the expected alert to not be displayed

How can I customize the border color in Bootstrap with a specific hex code?

Reload the precise URL using JavaScript or jQuery

Results from various calculations for time retrogression will remain constant once they are shown

Removing OTP user input upon pressing the Backspace key can be achieved through the following steps

Enhancing your react-slick carousel with a captivating full-screen background

Incorporating components into Vue while utilizing Flask poses a challenge

Secure Routes with Moralis for React Router v6 - A Powerful Combination

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

How to implement scroll spy in Bootstrap 4 to highlight parent li elements?

Table data is being displayed from form data in another file using only JavaScript

My collection consists of objects arranged in this manner

The sidebar appears to be hovering above the footer section

The Canvas feature does not support saving server side PHP code

Identifying Seating Arrangements at the Poker Table - Sit-and-Go Events

Setting up meta tags in React for optimal search engine optimization

Discovering the absent objects within an array of objects through comparison

Tips for modifying a data entry in LocalStorage within React functional components?

Radiant UI: Radio Button featuring a stylish svg circle