Is it possible to have content boxes that fly in when a button is clicked

Question

Is it possible to have content boxes that fly in when a button is clicked

I am exploring the idea of creating two dynamic boxes that appear when a button is clicked, much like the effect seen when "About Me" is selected on . After struggling to decipher how it was achieved, I opted for utilizing modals. However, I encountered difficulties in synchronizing the animation of both boxes when using separate modal elements. I managed to make it work by incorporating two different divs within a single modal:

<div id="myModal" class="modal col-xs-12 col-lg-6">
  <!-- Modal content -->
  <div class="modal-content1">
    <span class="close">&times;</span>
    <h2>About Me</h2>
    <p>blah blah>
  </div>
  <div class="modal-content2 col-xs-12 col-lg-6">
    <span class="close">&times;</span>
    <h2>Super powers</h2>
    <p>blah blah>
  </div>
</div>

However, this setup results in individual animations and lacks the seamless integration seen in the desired example (where they enter from different directions). Should I stick with modals for this task, or is there a more effective approach? Despite my search for relevant examples, I have yet to come across any demonstrations featuring dual boxes. Any guidance you can provide would be greatly appreciated. Thank you in advance!

javascript html css svg modal-dialog

Answer 1

Answer №1

Feel free to experiment with this code and try to make it align more closely with your desired outcome. I've made some modifications to provide you with an example and a space for refining your solution. Best of luck on your coding journey!

Check out the updated code snippet below: Javascript Section:

var test = document.getElementById('test');
var test1 = document.getElementById('test1');

function move(elem, x, y) {
  var left = parseInt(getStyle(elem, 'left'), 10),
    top = parseInt(getStyle(elem, 'top'), 10),
    dx = left - x,
    dy = top - y,
    i = 1,
    count = 20,
    delay = 20;

  function animate() {
    if (i >= count) {
      return;
    }
    i += 1;
    elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
    elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';
    setTimeout(animate, delay);
  }

  animate();
}

function getStyle(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onclick = function(e) {
  if (e.target.nodeName === 'BUTTON') {
    test.style.cssText = 'visibility:visible;';
    move(test, +50, +50);
    test1.style.cssText = 'visibility:visible;';
    move(test1, +200, +50);
  }
};

HTML Markup:

<button title="100 100">Translate to (100, 100)</button>

  <!-- Modal content -->
  <div id="test">
    <span class="close">&times;</span>
    <h2>About Me</h2>
    <p>blah blah>
  </div>

  <div id="test1">
    <span class="close">&times;</span>
    <h2>Super powers</h2>
    <p>blah blah>
  </div>

CSS Styling:

#test {
  position: absolute;
  left: 50px;
  top: 500px;
  visibility: hidden;
}
#test1 {
  position: absolute;
  left: 100px;
  top: -500px;
  visibility: hidden;
}

Answer 2

Feel free to experiment with this code and try to make it align more closely with your desired outcome. I've made some modifications to provide you with an example and a space for refining your solution. Best of luck on your coding journey!

Check out the updated code snippet below: Javascript Section:

var test = document.getElementById('test');
var test1 = document.getElementById('test1');

function move(elem, x, y) {
  var left = parseInt(getStyle(elem, 'left'), 10),
    top = parseInt(getStyle(elem, 'top'), 10),
    dx = left - x,
    dy = top - y,
    i = 1,
    count = 20,
    delay = 20;

  function animate() {
    if (i >= count) {
      return;
    }
    i += 1;
    elem.style.left = (left - (dx * i / count)).toFixed(0) + 'px';
    elem.style.top = (top - (dy * i / count)).toFixed(0) + 'px';
    setTimeout(animate, delay);
  }

  animate();
}

function getStyle(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onclick = function(e) {
  if (e.target.nodeName === 'BUTTON') {
    test.style.cssText = 'visibility:visible;';
    move(test, +50, +50);
    test1.style.cssText = 'visibility:visible;';
    move(test1, +200, +50);
  }
};

HTML Markup:

<button title="100 100">Translate to (100, 100)</button>

  <!-- Modal content -->
  <div id="test">
    <span class="close">&times;</span>
    <h2>About Me</h2>
    <p>blah blah>
  </div>

  <div id="test1">
    <span class="close">&times;</span>
    <h2>Super powers</h2>
    <p>blah blah>
  </div>

CSS Styling:

#test {
  position: absolute;
  left: 50px;
  top: 500px;
  visibility: hidden;
}
#test1 {
  position: absolute;
  left: 100px;
  top: -500px;
  visibility: hidden;
}

Is it possible to have content boxes that fly in when a button is clicked

Answer №1

Similar questions

The closure in question received an undefined Angular parameter

How do I retrieve the NodesValue from the childNodes in an HTML tag?

`Moving smoothly with a slider and then reversing direction`

Steps to perform a double click on a word within a webpage using JavaScript in the browser's console

Safari iOS does not properly support responsive images when using srcset and sizes

Create a single CSS style rather than using multiple CSS styles

Using Javascript to extract the initials of names

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

Verify whether a group of div elements overlaps a fixed div while scrolling

How can you sift through an array of objects by looking at the elements within another nested array? Are you utilizing Vanilla JS, lodash, or another tool from the

Is it possible to add values to a select dropdown using the developer console in a web browser?

Working with session ID and Ajax in JavaScript

Tips for clearing object values without deleting the keys: Resetting the values of an object and its

Moving elements upwards and downwards using CSS transitions

Having trouble getting the toggle button JavaScript code to function properly in React JS?

Collecting the timestamp when the page is loaded and then comparing it with the timestamp when the form is

Having trouble with the installation of js-bson

Transforming an object containing methods into a string using Javascript specifically for Photoshop

What steps can I take to stop my Details element from moving a nearby Div?

Internet Explorer 8 comes with excess padding at the top and bottom, causing un