Blend a full background over sliding curtain

HTML & CSS
1

I’m not sure how this would be done.

What I want to do is have the whole screen be either an image, gradient, or just color.

Like this, but instead of the curtains being the whole height of the screen.

Full screen sliding curtains.
https://jsfiddle.net/z6r9wcaL/

The 640 x 360 section would be the only part that opens which would be blended in with the background.

640 x 360 Curtain code
https://jsfiddle.net/ekm234s7/

What I want to do is blend a background over the sliding curtains, where when you click on it, the only part that splits, is the 640 x 360 section.

To do this, would I be utilizing the 640 x 360 curtain code, and somehow, be able to place a background over the whole thing and be able to have just that section split apart?

1024×768 387 Bytes

2

I’m taking a guess you mean something like this effect?

It uses background-attachment fixed so is unlikely to work the same on a mobile device.

1 Like
3

Yes exactly.

5

Will I be able to keep absolute positioning, or it wont work with that?

So, I am thinking I should start off with the version that is currently working, then do piece by piece.

https://jsfiddle.net/dkwuo52v/

I was able to get this far.

Updated: https://jsfiddle.net/bfv5wahs/2/

968×471 128 KB

6

And so then, in the html I would put the video stuff before the curtain stuff?

<div class="outer">
  <div class="tcell">


    <div class="video-wrapper">
      <div class="video-ratio-keeper">

        <div class="wrap">
          <div class="video video-frame"></div>
        </div>

      </div>
    </div>

    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">


          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>

Then overflow hidden on the body

body {
  background: linear-gradient(to bottom right, #b968c5, skyblue);
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
}

And now I’m stuck.

https://jsfiddle.net/65eqdubn/8/

882×408 49.7 KB

7

The problem is that you keep building stuff on other stuff when the other stuff isn’t needed anymore.

When you change the fundamental principles of something you need to go back to scratch and design with the new target in mind. You have many divs that are not needed now and just get in the way. Based on this example you could get down to this.

Bear in mind this is just to show the technique and does not take onto account what may come next.

1 Like
8

So it can work like this.

Does

height: 
min-height:

Still need to be added to the body, and what do they do?

The code seems not to need them.

https://jsfiddle.net/e621rdzp/6/


html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;

}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 56.25%;

  /* overflow: hidden; */
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 3px solid red;
  box-sizing: border-box;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;

}

.slide-wrap:before,
.slide-wrap:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 5s linear;
  display: flex;
  align-items: center;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.slide-wrap:before {
  left: 0;
  justify-content: flex-end;
}

.slide-wrap:after {
  right: 0;
  justify-content: flex-start;
}

.slide .slide-wrap::before {
  transform: translateX(-100%);
}

.slide .slide-wrap::after {
  transform: translateX(100%);
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.jacket {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*width: 100%;
  height: 100%;*/
  margin: auto;
  cursor: pointer;
  /* background: red;*/
  cursor: pointer;

}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-width: 70px;
  min-height: 70px;
  max-width: 30%;
  max-height: 30%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;


}


.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.wrap,
.jacket {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);

}

.hide {
  display: none;
}


<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">

          <div class="video-wrapper">
            <div class="video-ratio-keeper">

              <div class="wrap">
                <div class="video video-frame"></div>
              </div>
            </div>
          </div>

          <div class="slide-wrap"></div>

        </div>

        <div class="jacket" title="Play">
          <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
          </svg></div>

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

They were to ensure the image covered the background in my demo or this happens.

Screen Shot 2021-07-23 at 14.03.40
Screen Shot 2021-07-23 at 14.03.401323×241 208 KB

However in your demo you removed the black background from the html element so that issue didn;t occur and you didn’t need the min-height.

I changed my demo to this.

html,
body {
  padding: 0;
  margin: 0;
}
body {
  height: 100vh;
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Of course it all depends on what comes next.

1 Like
10

… and why did you add the empty div of slide-wrap when I removed it from my demo?

Don’t keep adding empty divs for no reason as they only make your html harder to manage.

11

Easier to understand what everything is.

12

What are the proprieties that would go on these for the play image to split apart?

https://jsfiddle.net/0mqx35Lc/4/


.curtain.slide .j1 {
 left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

And I don’t think display block is working here.

Unless I did something wrong.


.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}
13

In relation to what?

That example doesn’t seem to be confined to the red border so are you talking about the whole viewport?

I already gave plenty of examples with the middle section confined to the player.

Again you have unnecessary divs and you don’t keep them in the same context so everything you try is awkward. I keep simplifying fo you but then you go and revert back to something else.

If you want the blue circle to be confined to that red bordered box then you will need to use that as the context and hide the overflow. Then the easiest way to hide the split circle would be to place each half in a 50% width container but with the circle pushed to the middle from each half. Then you can move the 50% container with a 100% translate and then it will clear the element it sits in.

Anyway I believe you already have your own examples of the play button splitting within the middle red border section.

I would need to know what the exact requirements are before I attempt to steer you in the right direction.

1 Like
14

As how it is in the full screen version: here

https://jsfiddle.net/z6r9wcaL/

Going across the whole screen.

15

How come the play image is disappearing when it is clicked on and not staying?

https://jsfiddle.net/s8gqeo31/

Isn’t that what display block is for?

This would need to be fixed first, before the other stuff can be figured out.


.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}


<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">

          <div class="video-wrapper">
            <div class="video-ratio-keeper">

              <div class="wrap">
                <div class="video video-frame"></div>
              </div>
            </div>
          </div>

          <div class="slide-wrap"></div>

          <div class="split-wrap">
            <div class="j1">
              <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 class="j2">
              <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>
      </div>
    </div>
  </div>
</div>
16

Well in the full screen version the distance would be half the viewport width for each side which is 50vw.

Because you are hiding it in JS.

// splitwrap.classList.add("hide");

1 Like
17

How do I set it up so that the play image is not attached to the curtains?

So then the play image can fly off the screen.

https://jsfiddle.net/p7Lj3o2t/1/

It shouldn’t stay within the border.

18

You’d need to move it out of the overflow:hidden context.

Move the html as shown in the codepen. Then change the js so that the slide class is added further up the html onto ratio-keeper. Then change the css to reflect that change.

All changes are in the codepen.

1 Like
19

I think you forgot to remove the overflow.

Add this in

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

I think only overflow needs to be added, and not the others, as the code works without them.

.curtain.slide {
  overflow: hidden;
}
20

I don’t see that code in my demo.

There is no .curtain.slide.

Look again.

… and stop moving stuff with left when I’ve told you to use transform.

…and you will probably need to hide the overflow on the body now otherwise the scrollbar will appear when the element goes wide.

That’s it from me today. Too many questions.:slight_smile:

21

Overflow?

Bottom scroll showing.

This doesn’t get added:

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

It doesn’t work to fix it.

or maybe overflow would be added to a different property?

What seems to be the issue there?

831×458 361 KB