Sliding 3D Image Gallery

Sliding 3D Image Gallery in HTML, CSS and JavaScript

Byjvcodes

Using HTML and CSS and JavaScript creates an attractive and innovative method to show images on your website. It offers a vibrant and trending approach that enables users to connect with the content creatively.

GitHub Source: Sliding 3D Image Gallery

This gallery will enable you to display many images in a sleek 3D slides that delivers an engaging user interface.

I will share source code so you can quickly add this gallery to your website.

Also check these valuable galleries:

Features

Here are some key features of the Sliding 3D Image Gallery:

  • Smooth 3D transition effects: The gallery provides pleasant and captivating 3D animations.
  • Responsive across all devices: Functions perfectly on all devices, desktops and mobiles.
  • Supports every current CMS: This gallery works together with WordPress and several CMS platforms.
  • Simple to integrate: This gallery can be easily integrated into any HTML project.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Gallery

Follow these quick steps to build your Sliding 3D Image Gallery:

  • Create project folder: Establish a new folder for your project.
  • Create images folder: Create a folder to hold your pictures.
  • Create index.html: This is the key HTML page.
  • Create style.css: Include this file to add your own styles.
  • Create script.js: Apply this file to enhance JavaScript features.
  • Copy & paste the code: Implement the given source code to finish the gallery.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliding 3D Image Gallery | JV Codes</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Commissioner&amp;family=Unica+One&amp;display=swap">
</head>
<body>
  <div class="slider">

    <div class="nav">
      <div class="next"></div>
      <div class="prev"></div>
      <div class="explore-btn">Explore</div>
    </div>
    <div class="item is-active">
      <div class="content">
        <div class="wrap">Travel To New York</div>
      </div>
      <div class="imgs">
        <div class="grid">
          <div class="img img-1"><img src="images/NewYork/1.jpg" /></div>
          <div class="img img-2"><img src="images/NewYork/2.jpg" /></div>
          <div class="img img-3"><img src="images/NewYork/3.jpg" /></div>
          <div class="img img-4"><img src="images/NewYork/4.jpg" /></div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div class="wrap">Travel To Sydney</div>
      </div>
      <div class="imgs">
        <div class="grid">
          <div class="img img-1"><img src="images/Sydney/1.jpg" /></div>
          <div class="img img-2"><img src="images/Sydney/2.jpg" /></div>
          <div class="img img-3"><img src="images/Sydney/3.jpg" /></div>
          <div class="img img-4"><img src="images/Sydney/4.jpg" /></div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="content">
        <div class="wrap">Travel To Liverpool</div>
      </div>
      <div class="imgs">
        <div class="grid">
          <div class="img img-1"><img src="images/Liverpool/1.jpg" /></div>
          <div class="img img-2"><img src="images/Liverpool/2.jpg" /></div>
          <div class="img img-3"><img src="images/Liverpool/3.jpg" /></div>
          <div class="img img-4"><img src="images/Liverpool/4.jpg" /></div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the gallery:

*,
    *:before,
    *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      font-family: "Commissioner", sans-serif;
      line-height: 1.65;
    }

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

    .slider {
      height: 100vh;
      width: 100vw;
      background-color: #0a0908;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      position: relative;
      overflow: hidden;
      transition: background-color 2s;
    }

    .slider .credits {
      position: absolute;
      top: 2rem;
      left: 2rem;
      line-height: 1.65;
      z-index: 10;
      max-width: 320px;
    }

    .slider .item .imgs {
      position: relative;
      width: 60%;
      padding-top: 60%;
    }

    .slider .item .imgs .grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
      grid-column-gap: 32px;
      grid-row-gap: 32px;
      transform: rotate(-20deg);
      opacity: 0.65;
    }

    .slider .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .slider .item .img {
      width: 100%;
      height: 100%;
      position: relative;
      will-change: transform;
      will-change: opacity;
    }

    .slider .item .img img {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      -webkit-filter: contrast(110%) brightness(110%) saturate(130%);
      filter: contrast(110%) brightness(110%) saturate(130%);
    }

    .slider .item .img img::before {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      pointer-events: none;
      mix-blend-mode: screen;
      background: rgba(243, 106, 188, 0.3);
    }
    .slider .item .img-1 {
      grid-area: 1/1/7/5;
    }

    .slider .item .img-2 {
      grid-area: 2/5/7/13;
    }
    .slider .item .img-3 {
      grid-area: 7/1/12/9;
    }
    .slider .item .img-4 {
      grid-area: 7/9/13/13;
    }

    .slider .item .content {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.15;
      font-size: 8rem;
      font-weight: 700;
    }

    .slider .item .content .wrap {
      text-align: center;
      text-shadow: 1px 1px 4px
       rgba(10, 9, 8, 0.2);
      width: 100%;
      max-width: 600px;
      line-height: 1;
    }

    .slider .item .content .wrap .letter {
      display: inline-block;
    }

    .slider .nav .next,
    .slider .nav .prev {
      height: 2rem;
      width: 2rem;
      position: absolute;
      top: calc(50% - 1rem);
      cursor: pointer;
      z-index: 3;
      transition: transform 0.3s;
    }

    .slider .nav .next {
      right: 2rem;
      background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M 19 8 L 19 11 L 1 11 L 1 13 L 19 13 L 19 16 L 23 12 L 19 8 z' fill='white'/%3E%3C/svg%3E");
    }

    .slider .nav .next:hover {
      transform: translateX(0.5rem);
    }

    .slider .nav .prev {
      left: 2rem;
      background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M 5 8 L 1 12 L 5 16 L 5 13 L 23 13 L 23 11 L 5 11 L 5 8 z' fill='white'/%3E%3C/svg%3E");
    }

    .slider .nav .prev:hover {
      transform: translateX(-0.5rem);
    }

    .slider .nav .explore-btn {
      z-index: 4;
      position: absolute;
      bottom: 2rem;
      left: calc(50% - 4rem);
      width: 8em;
      text-align: center;
      padding: 1rem 0;
      border: solid 2px white;
      background: transparent;
      color: white;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .slider .nav .explore-btn:hover {
      color: #0a0908;
      background: white;
    }

    .slider .item:not(.is-active) {
      opacity: 0;
      pointer-events: none;
    }

JavaScript

Here is the complete code for script.js file to function the gallery:

function init() {
    const slider = document.querySelector(".slider");
    const nextBtn = slider.querySelector(".slider .nav .next");
    const prevBtn = slider.querySelector(".slider .nav .prev");
    const items = slider.querySelectorAll(".slider .item");

    let current = 0;

    items.forEach((item) => {
      const textWrapper = item.querySelector(".wrap");
      textWrapper.innerHTML = textWrapper.textContent.replace(
        /\S/g,
        "<span class='letter'>$&</span>"
      );
    });

    function anim(current, next, callback) {
      const currentImgs = current.querySelectorAll(".img");
      const currentText = current.querySelectorAll(".content .letter");
      const nextImgs = next.querySelectorAll(".img");
      const nextText = next.querySelectorAll(".content .letter");

      const t = 400;
      const offset = "-=" + t * .4;
      const imgOffset = t * .8;

      const tl = anime.timeline({
        easing: "easeInOutQuint",
        duration: t,
        complete: callback
      });

      tl.add({
        targets: currentText,
        translateY: [0, '-.75em'],
        opacity: [1, 0],
        easing: "easeInQuint",
        duration: t,
        delay: (el, i) => 10 * (i + 1)
      })
        .add(
          {
            targets: currentImgs[0],
            translateY: -600,
            translateZ: 0,
            rotate: [0, '-15deg'],
            opacity: [1, 0],
            easing: "easeInCubic"
          },
          offset
        )
        .add(
          {
            targets: currentImgs[1],
            translateY: -600,
            translateZ: 0,
            rotate: [0, '15deg'],
            opacity: [1, 0],
            easing: "easeInCubic"
          },
          "-=" + imgOffset
        )
        .add(
          {
            targets: currentImgs[2],
            translateY: -600,
            translateZ: 0,
            rotate: [0, '-15deg'],
            opacity: [1, 0],
            easing: "easeInCubic"
          },
          "-=" + imgOffset
        )
        .add(
          {
            targets: currentImgs[3],
            translateY: -600,
            translateZ: 0,
            rotate: [0, '15deg'],
            opacity: [1, 0],
            easing: "easeInCubic"
          },
          "-=" + imgOffset
        )
        .add({
          targets: current,
          opacity: 0,
          visibility: 'hidden',
          duration: 10,
          easing: "easeInCubic"
        })
        .add(
          {
            targets: next,
            opacity: 1,
            visibility: 'visible',
            duration: 10
          },
          offset
        )
        .add(
          {
            targets: nextImgs[0],
            translateY: [600, 0],
            translateZ: 0,
            rotate: ['15deg', 0],
            opacity: [0, 1],
            easing: "easeOutCubic"
          },
          offset
        )
        .add(
          {
            targets: nextImgs[1],
            translateY: [600, 0],
            translateZ: 0,
            rotate: ['-15deg', 0],
            opacity: [0, 1],
            easing: "easeOutCubic"
          },
          "-=" + imgOffset
        )
        .add(
          {
            targets: nextImgs[2],
            translateY: [600, 0],
            translateZ: 0,
            rotate: ['15deg', 0],
            opacity: [0, 1],
            easing: "easeOutCubic"
          },
          "-=" + imgOffset
        )
        .add(
          {
            targets: nextImgs[3],
            translateY: [600, 0],
            translateZ: 0,
            rotate: ['-15deg', 0],
            opacity: [0, 1],
            easing: "easeOutCubic"
          },
          "-=" + imgOffset
        )
        .add(
          {
            targets: nextText,
            translateY: ['.75em', 0],
            translateZ: 0,
            opacity: [0, 1],
            easing: "easeOutQuint",
            duration: t * 1.5,
            delay: (el, i) => 10 * (i + 1)
          },
          offset
        );
    }

    let isPlaying = false;

    function updateSlider(newIndex) {
      const currentItem = items[current];
      const newItem = items[newIndex];

      function callback() {
        currentItem.classList.remove("is-active");
        newItem.classList.add("is-active");
        current = newIndex;
        isPlaying = false;
      }

      anim(currentItem, newItem, callback);
    }

    function next() {
      if (isPlaying) return;
      isPlaying = true;
      const newIndex = current === items.length - 1 ? 0 : current + 1;
      updateSlider(newIndex);
    }

    function prev() {
      if (isPlaying) return;
      isPlaying = true;
      const newIndex = current === 0 ? items.length - 1 : current - 1;
      updateSlider(newIndex);
    }

    nextBtn.onclick = next;
    prevBtn.onclick = prev;
  }

  document.addEventListener("DOMContentLoaded", init);

Download Source Code

You can download the full source code for the Sliding 3D Image Gallery using the button below. It includes all necessary files and images, free to use without copyright restrictions.

Download Source Code

Conclusion

The Sliding 3D Image Gallery in HTML is eye-popping and adds value to the sites making the visitor experience richer. You can use this code and if you are linking back to JV Source Codes that would be really appreciated.

If any of you have any questions or encounter any problems, feel free to write a comment; I will gladly help. Make sure to hit the subscribe button on our YouTube channel for more tutorials.

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

Responsive Drop Down Menu Bar with Sub Menu
| | |

Responsive Drop Down Menu Bar with Sub Menu in HTML, CSS and JavaScript

Improving website navigation is very important in order to provide visitors with the most optimal experience possible. Another free website menu design is the Responsive Drop Down Menu Bar with Sub Menu coded in HTML, CSS, and JavaScript. GitHub Source: Responsive Drop Down Menu Bar with Sub Menu A responsive menu provides users on a…

Responsive Mega Menu in HTML, CSS and JavaScript
| | |

Responsive Mega Menu in HTML, CSS and JavaScript

Responsive Mega Menu in HTML, CSS, JavaScript is the major part of modern web designs. It is useful in the arrangement of large website navigation by breaking it in several rows and ensuring it adapts to desktop, tablets, and mobile screen sizes. In this guide, I’ll show you how to create a responsive mega menu…

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

Navigation Menu Hover Animation
| | |

Navigation Menu Hover Animation in HTML and CSS

A navigation menu is one of the most important elements on any website. Navigation menus assist users in getting around various sections and pages that are in the website. Hover animations are another means through which you can enrich the user experience. The Navigation Menu Hover Animation in HTML, CSS enhances the look of any…

Leave a Reply

Your email address will not be published. Required fields are marked *