Zoom In Zoom Out Multiple div in JavaScript

Zoom In Zoom Out Multiple div in JavaScript
Code Snippet:Farsight in Vanilla JavaScript
Author: Ryan Yu
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 860
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X