Zoom In Zoom Out Multiple div in JavaScript

This JavaScript code provides functionality to create a zooming effect for multiple div elements. It allows you to zoom in and out smoothly on various layers within a 3D scene. This code works by adjusting the z-position of these layers based on the user’s scroll, creating a dynamic visual experience. It is helpful for creating interactive web pages with immersive scrolling effects.

How to Create Zoom In Zoom Out Multiple Div In Javascript

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Now, let’s set up the HTML and CSS structure for our zooming effect. It set up a scene with layers, each having its own content. The layers are defined with the data-depth attribute, which will be used for zooming.

<header class="header">
  <nav class="menu">
    <a href="#layer1" class="menu__item">1</a>
    <a href="#layer2" class="menu__item">2</a>
    <a href="#layer3" class="menu__item">3</a>
    <a href="#layer4" class="menu__item">4</a>
    <a href="#layer5" class="menu__item">5</a>
    <a href="#layer6" class="menu__item">6</a>
  </nav>
</header>


<div class="wrapper">
  <div class="environment">
    <div class="scene">

      <div id="layer1" class="layer" data-depth="0">
        <h1>Layer 1</h1>
      </div>

      <div id="layer2" class="layer" data-depth="500">
        <h1>Layer 2</h1>
      </div>

      <div id="layer3" class="layer" data-depth="1000">
        <h1>Layer 3</h1>
      </div>

      <div id="layer4" class="layer" data-depth="1500">
        <h1>Layer 4</h1>
      </div>

      <div id="layer5" class="layer" data-depth="2000">
        <h1>Layer 5</h1>
      </div>

      <div id="layer6" class="layer" data-depth="2500">
        <h1>Layer 6</h1>
      </div>

    </div>
  </div>
</div>

<div class="scene__depth"></div>

3. In your CSS file (styles.css), you can add styles to make your layers visually appealing. The provided code includes CSS for grayscale and other styles, which you can modify to suit your design.

.greyscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.color {
  filter: none;
  -webkit-filter: grayscale(0%);
}

.cf {
  zoom: 1;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.flexbox {
  /* TWEENER - IE 10 */
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.ib {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
}

body {
  font-family: "open sans", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.heading,
p,
ul {
  margin: 0 0 10px;
}

.heading {
  font-weight: normal;
}

h1,
.h1 {
  margin: 0 0 10px;
  font-weight: normal;
  font-size: 2em;
}

h2,
.h2 {
  margin: 0 0 10px;
  font-weight: normal;
  font-size: 1.3em;
}

h3,
.h3 {
  margin: 0 0 10px;
  font-weight: normal;
  font-size: 1.2em;
}

h4,
.h4 {
  margin: 0 0 10px;
  font-weight: normal;
  font-size: 1em;
}

h5,
.h5 {
  margin: 0 0 10px;
  font-weight: normal;
  font-size: 0.9em;
}

strong {
  font-weight: bold;
}

small {
  font-size: 0.85em;
}

a {
  color: #fff;
  text-decoration: none;
}

hr {
  clear: both;
  height: 1px;
  border: none;
  border-top: 1px solid #ccc;
  margin: 0 0 10px;
}

body {
  background: #000;
}

.wrapper,
.environment,
.scene,
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wrapper {
  position: fixed;
  z-index: 10;
}

.environment {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(500px);
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -ms-perspective-origin: center center;
  -o-perspective-origin: center center;
  perspective-origin: center center;
}

.scene {
  top: 0;
  transform-style: preserve-3d;
}

.scene__depth {
  position: relative;
  z-index: 0;
}

.layer h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  font-size: 10px;
  color: #fff;
  padding: 5px;
}

#layer1 h1 {
  -o-box-shadow: 0 0 0 600px #4cc1e3;
  box-shadow: 0 0 0 600px #4cc1e3;
}

#layer2 h1 {
  -o-box-shadow: 0 0 0 600px #4ba0bf;
  box-shadow: 0 0 0 600px #4ba0bf;
}

#layer3 h1 {
  -o-box-shadow: 0 0 0 600px #497f9a;
  box-shadow: 0 0 0 600px #497f9a;
}

#layer4 h1 {
  -o-box-shadow: 0 0 0 600px #465d76;
  box-shadow: 0 0 0 600px #465d76;
}

#layer5 h1 {
  -o-box-shadow: 0 0 0 600px #46455b;
  box-shadow: 0 0 0 600px #46455b;
}

#layer6 h1 {
  -o-box-shadow: 0 0 0 600px #442b3f;
  box-shadow: 0 0 0 600px #442b3f;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
}

.menu {
  display: inline-block;
  margin: 0 auto;
}

.menu__item {
  display: block;
  float: left;
  text-decoration: none;
  padding: 10px;
}

.menu__item:hover,
.menu__item.menu__item--active {
  color: #F704C7;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding: 10px;
  color: rgba(180, 180, 180, 0.7);
  font-size: 12px;
}

4. Now, let’s integrate the JavaScript code into your HTML. Place the following CDN links at the end of your HTML file, just before the closing </body> tag.

<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/ScrollToPlugin.min.js'></script>

5. Finally, initialize and render the zoom in/zoom out effect by adding the following JavaScript code between <script> tag.

const farsight = (() => {
  const selectors = {
    anchor: 'a[href^="#"]',
    depth: '.scene__depth',
    layers: '.layer',
    menu: '.menu',
    scene: '.scene',
  };

  const classes = {
    activeMenu: 'menu__item--active',
  };

  const distance = 500;

  /**
   * DO NOT EDIT BELOW. THE SKY WILL FALL.
   */
  const layers = [...document.querySelectorAll(selectors.layers)];

  const current = {
    layer: 0,
    progress: 0,
    menu: ''
  };

  let windowDepth = '';

  const setActive = () => {
    // update menu
    let position = current.layer + Math.round(current.progress);

    if (position !== current.menu) {
      const menuContainer = document.querySelector(selectors.menu);
      let menuActive = menuContainer.querySelector(`.${classes.activeMenu}`);
      let layer = document.querySelector(`.layer[data-depth="${position * distance}"]`);

      if (typeof menuActive !== 'undefined' && menuActive !== null) {
        menuActive.classList.remove(classes.activeMenu);
      }

      menuContainer.querySelector(`a[href="#${layer.getAttribute('id')}"]`).classList.add(classes.activeMenu);

      current.menu = position;
    }
  };

  const zoomScene = () => {
    let scroll = this.scrollY;

    // get scroll, cap within bounds
    scroll = scroll >= 0 ? (scroll <= windowDepth ? scroll : windowDepth) : 0;

    // set currents
    current.layer = (scroll / distance) | 0;
    current.progress = (scroll - (current.layer * distance)) / distance;
    current.overallProgress = (scroll / (distance * layers));

    const scene = document.querySelector(selectors.scene);

    // adjust scene
    setZPosition(scene, scroll);

    // update menu and layer
    setActive();
  };

  const setZPosition = (element, z) => {
    element.style.transform = `translate3d(0, 0, ${z}px)`;
  };

  const setDepth = () => {
    const depth = document.querySelector(selectors.depth);

    windowDepth = (distance * (layers.length - 1)) + document.body.clientHeight;
    depth.style.height = `${windowDepth}px`;
  };

  const scrollToLayer = (target) => {
    console.log(target);
    TweenLite.to(window, 1, {
      scrollTo: target,
    });
  };

  return {
    render: function() {
      // set environment depth
      setDepth();

      // set layer z position
      layers.map(layer => {
        const layerDepth = layer.getAttribute('data-depth');

        setZPosition(layer, layerDepth * -1);
      });

      // set initial position
      zoomScene();

      // zooming
      var throttledZoom = _.throttle(zoomScene, 25);

      window.addEventListener('scroll', throttledZoom);

      // resize
      window.addEventListener('resize', setDepth);

      // anchors
      const anchors = [...document.querySelectorAll(selectors.anchor)];

      anchors.map(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          const targetAnchor = this.getAttribute('href');
          const target = document.querySelector(targetAnchor).getAttribute('data-depth');

          scrollToLayer(target);
        });
      });
    }
  }
})();

farsight.render();

That’s all! hopefully, you have successfully created Zoom In Zoom Out Multiple Div In JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.