Adding sliding door page transition

JavaScript
1

I want to add this sliding door code.

How it would work:

After the play svg image is clicked, it would disappear, and the sliding doors would open to reveal what is behind them.

Sliding Door code by itself.

code: https://jsfiddle.net/eqrutdo8/

Most of the javascript removed so it is easier to work on the code.

Sliding Door

Added to
code: https://jsfiddle.net/jk9syn5h/

Removed from
code: https://jsfiddle.net/gmo8r6j5/1/

To implement this, I would be adding a new function here right?

Something similar to this?

Also, I believe I would be removing hover, and adding a ClickHandler in place of that, if I am correct about that.

(function iife() {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function hide(el) {
      el.classList.add("hide");
   }

   function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const thewrap = cover.parentNode.querySelector(".container");
      hide(cover);
      show(thewrap);
   }
   const cover = document.querySelector(".jacketa");
   cover.addEventListener("click", coverClickHandler);
}());
2

You could add a class to the container at the same time you remove the hide class.
e.g. document.querySelector(".container1").classList.add('slide');

It goes here:

   function show(el) {
      el.classList.remove("hide");
      document.querySelector(".container1").classList.add('slide');
   }

Then you would use that class in the css to toggle whatever you need.

e.g. Where you had hover for the doors you would use the class instead of hover.

.container1.slide .door-left {
  left: -50%;
}
.container1.slide .door-right {
  left: 100%;
}

.container1 {
  position: relative;
  width: 100%;
  height: 100%;
}
.container1.slide{height:auto;min-height:100%;overflow:hidden;}
.jacketa{z-index:3;}


.door-left,
.door-right {
  position: absolute;
  z-index:2;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  -moz-transition: all ease 8s;
  -webkit-transition: all ease 8s;
  -o-transition: all ease 8s;
  -ms-transition: all ease 8s;
}

.door-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.door-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}
.container1.slide .door-left {
  left: -50%;
}
.container1.slide .door-right {
  left: 100%;
}

The height:100% needs to be removed as I already told you or it will cut short the background. You also need to layer the elements properly or they will not stack in the right order. I have added the necessary code in the above snippet so look at it very carefully,

You don’t need those old prefixes for transition.

3

I don’t see the doors opening:

code: https://jsfiddle.net/xLcq0e2j/1/

I was initially thinking something written similar to this:

(function iife() {
   "use strict";
   
   function show(el) {
      el.classList.remove("hide");
   }

   function hide(el) {
      el.classList.add("hide");
   }

   function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const slide = cover.parentNode.querySelector(".sliding-door");
      hide(slide);
      show(slide);
   }
   const cover = document.querySelector(".container1");
   cover.addEventListener("click", coverClickHandler);
}());
4

You didn’t add the code I gave you properly!!!

It should have been here where you remove the hide class already.

(function iife() {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
     document.querySelector(".container1").classList.add('slide');
   }

   function hide(el) {
      el.classList.add("hide");
   }
etc... rest of code

Then you will need to add the CSS for the jacket as shown in my css or your doors will be underneath the revealed item.

I have your fiddle working perfectly with my code.

You must think things through properly.

5

Something similar to this?

    function coverClickHandler(evt) {
      const something here = evt.currentTarget;
      const something here = cover.parentNode.querySelector(".something here");
      hide(something here);
      show(something here);
   }
   const cover = document.querySelector("something here");
   cover.addEventListener("click", coverClickHandler);
}());
6

No No No.

I gave you the code.

You want the action to happen when you click the play icon and you already have functions for that. Just add the code I gave you.

7

Got it: https://jsfiddle.net/zrwbmqeL/2/

8

It should be like this:

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
    document.querySelector(".container1").classList.add('slide');
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container");
    hide(cover);
    show(thewrap);
  }
  const cover = document.querySelector(".jacketa");
  cover.addEventListener("click", coverClickHandler);
}());
1 Like
9

Fixed: https://jsfiddle.net/9kmdg7st/1/

Now, what do you mean by remove 100% height, from what?

Referring to what you said here:

The height:100% needs to be removed as I already told you or it will cut short the background.

10

You see this code I already gave you above.

That removes the height:100% when clicked and the page opens.

However you wouldn’t have had to do that if you had used the vh units that were in my examples and in the previous thread where I told you that you can’t base height:100% on anything unless the parent has an unbroken chain of height:100% all the way back to the html and body elements.

If you had used a min-height of 100vh on the container and set .outer to have a height:100vh then it would work without problem. The .outer is display:table and height is treated as a minimum for table elements and will expand with content.

The devil is in the detail.

11

You mean this:

This is another way of doing it.

.container1.slide {
  height: auto;
  min-height: 100vh;
  overflow: hidden;
}

.outer {
  display: table;
  height: 100vh;
  margin: 0 auto;
}
12

Yes except you don’t need the slide class on container1 anymore as it can be set up by default. These are the only rules you need for the container1.


.container1 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

That’s me finished for the day. Back tomorrow afternoon. Someone else can jump in now :slight_smile:

1 Like
13

But now I have 2 containers of the same class name.

What do I do about this?

Removing .slide gives me duplicate class names.

code: https://jsfiddle.net/2vg9n3ju/2/

.container1 {
  position: relative;
  width: 100%;
  height: 100%;
}

.container1 {
  position: relative;
  height: auto;
  min-height: 100vh;
  overflow: hidden;
}

I would then delete this one?
code: https://jsfiddle.net/2vg9n3ju/6/

.container1 {
  position: relative;
  width: 100%;
  height: 100%;
}
14

I didn’t think I could be any clearer.

.container1 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

Those are the only rules you need for .container1. Delete anything else.

15

Why not this?

.container1 {
  position: relative;
  overflow: hidden;
}

Removing these?

  height: auto;
  min-height: 100vh;

code: https://jsfiddle.net/4vozqpdt/1/

The code seems to work without them.

16

Post #10 seems to explain the reason for min-height. More details might be required though.
Does it make other things easier that @asasass isn’t yet aware of?

2 Likes
18

You don’t need the height:auto as I already told you that it was not necessary.

The min-height:100vh on .container1 is not really necessary now that ,outer has height:100vh as that element will create the height for the page (unless you absolutely place it as you are prone to do then the height on .outer will be zero).

1 Like
19

Is this how it would be written removing z-index from the code?

code: https://jsfiddle.net/r1vz2hwm/2/

Top:

<div class="container1 ">
   <div class="outer">
      <div class="tcell">
         <audio></audio>
         <div class="container hide">
            <div class="container-top">

Bottom:

<div class="door-left"> </div>
         <div class="door-right"> </div>
         <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
               <title>[ Enjoy The Music ]</title>
               <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
               <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
         </div>
      </div>
   </div>
</div>
20

Instead of naming it container 1, what other name could I use instead?

It’s the one that goes to the transition.

<div class="container1">

<div class="container hide">
<div class="container-top">
<div class="container-right">
<div class="container-left">
21

How about calling it slidingdoor?

1 Like