Home Web Programming Tutorials Building 3D Slide Show Using HTML, CSS and JavaScript

Building 3D Slide Show Using HTML, CSS and JavaScript

0
1013
3D Slide Show

Herein, we are going to start building a 3D slide show which will be represented by a cube. Behind the cube, there will be a background image. On the left and right sides, we’ll have controls (arrows). When we hover on these arrows, the cube will be slightly rotated, but when we click on them, the slide show starts working. Also, we have another control at the bottom which allows the cube to work automatically. We can also pause the slide show by clicking it. This is the way how our cube will work.
In this project, we are going to use HTML, CSS and JAVASCRIPT.

So, let’s get started with the HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport "content ="device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" href="style.css" >
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Montserrat|Ubuntu" rel="stylesheet">
    
    <title>cube</title>
    
</head>

<body>
    <div class="container">
    <div class="viewport">
       <div class="control left-arrow"><i class="fas fa-arrow-left"></i></div>
        <div class="cube cube-1">
            <div class="face front"></div>
             <div class="face back "></div>
             <div class="face left"></div>
             <div class="face right"></div>
        </div>
       
          <div class=" control right-arrow"><i class="fas fa-arrow-right"></i></div>
          <div class=" control play-pause"><i class="fas fa-play"></i></div>
    </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Required CSS is here:

*{
    margin: 0;
    padding: 0;
}
.container{
    height:100vh;
    width:100%;
    background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)), url(image/a.jpeg) no-repeat;
    background-size: cover;
}
.viewport{
    width:42vw;
    height: 21vw;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    perspective: 1300px;
}
.cube{
    width:100%;
    height: 100%;
    background-color: #ccc;
    transform-style: preserve-3d;
    position: relative;
   
}
.face{
    width:100%;
    height: 100%;
    position: absolute;
  }

.front{
    transform: translateZ(21vw);
}
.cube-1 .front{
    background: url(image/1.jpeg) no-repeat 50% 0;
    background-size: cover;
    }
.back{
    transform: translateZ(-21vw) rotateY(180deg);
}
.cube-1 .back{
    background: url(image/2.jpeg) no-repeat 50% 0;
    background-size: cover;
    }
.left{
    transform: translateX(-21vw) rotateY(-90deg);
}
.cube-1 .left{
    background: url(image/3.jpeg) no-repeat 50% 0;
    background-size: cover;
    }
.right{
    transform: translateX(21vw) rotateY(90deg);
}
.cube-1 .right{
    background: url(image/4.jpeg) no-repeat 50% 0;
    background-size: cover;
    }
.control{
    position: absolute;
    transform: translate(-50%,-50%);
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    background-color: rgba(59,52,50,.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 100%;
    cursor: pointer;
    z-index: 100;
    transition: background-color .3s;
}
.control:hover{
    background-color: rgba(42,38,36,.8);
}
.control i{
    pointer-events: none;
}
.left-arrow{
    top: 50%;
    left: -35%;
}
.right-arrow{
    top:50%;
    left:135%;
}
.play-pause{
    top: 140%;
    left: 120%;
}

It’s time to add some JavaScript to our project and make this cube working.

When we hover on the left and right arrows, the cube should be rotated (by 25 degrees) and when we click them, slide show should be started (rotated by 90 degrees). On each click, the cube will be rotated once.

Play-Pause button will run slide-show automatically and then pause it on click.

And here is the Javascript:

let x = 0, bool = false, interval;

const rotate =() =>{
    const cubes=document.querySelectorAll('.cube');
    Array.from(cubes).forEach(cube => cube.style.transform = `rotateY(${x}deg)`);
}
const changeplaypause =() => {
    const i = document.querySelector('.play-pause i');
    const cls = i.classList[1];
    if(cls ==='fa-play'){
        i.classList.remove('fa-play');
         i.classList.add('fa-pause');
    }
    else{
        i.classList.remove('fa-pause');
         i.classList.add('fa-play');
    }
}

const playpause = () =>{
    if(!bool){
       interval=setInterval(() =>{
        x -=90;
        rotate();
    },1000); 
        changeplaypause();
  bool=true;
    }else{
        clearInterval(interval);
        changeplaypause();
        bool = false;
    }
   
}
document.querySelector('.left-arrow').addEventListener('click',() =>{
    x += 90;
   rotate();
})
document.querySelector('.right-arrow').addEventListener('mouseover',() =>{
    x-= 25;
    rotate();
 })
document.querySelector('.left-arrow').addEventListener('mouseover',() =>{
    x+= 25;
    rotate();
 })
document.querySelector('.left-arrow').addEventListener('mouseout',() =>{
    x-= 25;
    rotate();
 })
document.querySelector('.right-arrow').addEventListener('mouseout',() =>{
    x+= 25;
    rotate();
 })
document.querySelector('.right-arrow').addEventListener('click',() =>{
    x -= 90;
    rotate();
 })

document.querySelector('.play-pause').addEventListener('click',() =>{
   playpause();

 })

 

OUTPUT:

Output when we hover on left arrow

Output when we hover on left arrow

Output when we hover on the right arrow

Output when we hover on right arrow

Output when we click on Play-Pause button

Output when we click on Play-Pause button

In the meantime, if you are interested in building various projects such as Hamburger Menu, Slideshow, Profile Cards and others using HTML, CSS & JavaScript then you can opt for this online tutorial.

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Become An Insider!

Discover latest news, tech updates, fresh 
arrivals, sale announcements and exciting offers!
I'm In!
Hurry up! Offer valid till stocks last.
close-link