Adding text to the sliding doors/panels

I do not think I did this right: https://jsfiddle.net/98khsnge/

I added: <div class="sliding-doors"></div>

to the code, not sure if that is needed.

.sliding-doors p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.sliding-doors p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}
<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="wrap hide">
        <div class="video video-frame"></div>
      </div>
      <div class="sliding-doors">
        <div class="panel-left"></div>
        <div class="panel-right"></div>
        <p>added text here, added text here, added text here,</p>
      </div>

    </div>
  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

Why not? Does it not behave as you expected?

If there is a problem, then please explain what it is, rather than making vague statements and leaving people to guess whether or not there is an actual issue.

You must have had a reason for doing so. Why did you think it was required?

1 Like

The text is supposed to flow or slide with the curtains and it does not.

I added: <div class="sliding-doors"></div>

so that the text stays attached to the sliding doors.

I did something, or some things wrong or incorrectly.

The first issue I noticed is that the text does not stay in the middle, when the window gets bigger and smaller.

The second issue is that the text does not split apart with the sliding doors.

Would I need to attach half the text to one door, then then the other half to the other?

Makes sense to me. Why not try it? Whatever is successfully moving left and right, add the text to that element.

1 Like

Here was my attempt: https://jsfiddle.net/p872350m/1/

.panel-left p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: right;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-left p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}

.panel-right p {
  position: absolute;
  z-index: 0;
  width: 640px;
  height: 340px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  font-family: 'Roboto', sansleftserif;
  font-size: 12px;
  color: #00B0FE;
  box-sizing: border-box;
  /*padding:15px;*/
}

.panel-right p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  /*background: black;*/
  z-index: -1;
  width:640px;
  height:360px;
}
   <div class="panel-left">
        <p>added text to</p>
      </div>
      <div class="panel-right">
        <p>the curtain player.</p>
      </div>

You are already doing this with your split images that you have abput 1000 variations of already.

The simplest method is to add the text like this.

.panel-left::before,
.panel-right::before{
  content:"Added text goes here and is same for both panels";
  color:#fff;
  display:flex;
  text-align:center;
  align-items:center;
  justify-content:center;
}

Just add that code at the end of the css for testing. Don’t change anything else

The most complicated way would look like what?

I suppose that would be with the text inside the html?

1 Like

You would need to use divs instead of :before & :after and add the content in the html.

You only used before, not before and after.

Yes I meant the 2 befores :slight_smile:

This did not work: https://jsfiddle.net/xnjf8mag/

.panel-left,
.panel-right {
  color: #fff;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
}
   <div class="panel-left">
        <p>added text to</p>
      </div>
      <div class="panel-right">
        <p>the curtain player.</p>
      </div>

Why should it?

The left and right panels are separate.

It’s the before elements that overlap each other so you would replicate their code on inner elements.

e.g.


.panel-left p,
.panel-right p{
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  margin:0;
  pointer-events: none;
  color:#fff;
  display:flex;
  text-align:center;
  align-items:center;
  justify-content:center;
  z-index:0;/* adjust to put on top of arrow*/
}
.panel-right p {
  left: -100%;
}
      <div class="panel-left">
        <p>added text to the curtain player.</p>
      </div>
      <div class="panel-right">
        <p>added text to the curtain player.</p>
      </div>
1 Like

I did that here: https://jsfiddle.net/jg5twyua/

If I want the text to become smaller as the curtain becomes smaller, how would I do that?

If you make the text smaller it will start to move around as it will fit on one line and will look a bit odd…

e.g.

.panel-left p,
.panel-right p{
  transition:font-size 6s ease;
  
}

.slide .panel-left p,
.slide .panel-right p{
  font-size:0;
}

It would be better to scale the element to zero instead.

.panel-left p,
.panel-right p{
  transition:transform 6s ease;
  
}

.slide .panel-left p,
.slide .panel-right p{
  transform:scale(0);
}

I meant like, isn’t there a way to have the size of the font change depending on whether it is being viewed from a small screen vs a large screen?

Oh ok. You could just use media queries and change the size at the breakpoints you wanted.

Or you could use the vw unit and clamp() to scale based on width. It’s a little more complex though and is explained here.

1 Like

I got it.

viewport: 1280

60px = 4.688vw

On this one, there is no curtain.

I am trying to center and fade out the text here.

https://jsfiddle.net/ngakLqp0/1/

I tried this way also: https://jsfiddle.net/d7Ln2haz/2/

Putting the text inside it’s own div.

 <div class="text">
   <p>Center and fade out the text.</p>
 </div>

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: black;
  background-size: cover;
  background-repeat: no-repeat;
  animation: fadeOut 1s ease-in 3s forwards;
}

@keyframes fadeOut {
  to {
    background: transparent;
  }
}


.video-wrapper p {
  position: absolute;
  height: 360px;
  width: 640px;
  top: 0;
  left: 0;
  margin: 0 auto;
  pointer-events: none;
  color: #fff;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  z-index: 0;
  /* adjust to put on top of arrow*/
  font-size: 60px;
  /*1280 60px*/
  white-space: nowrap;
  animation: fadeOut2 1s ease-in 3s forwards;
}

@keyframes fadeOut2 {
  to {
    background: transparent;
  }
}
<div class="container">
  <div class="video-wrapper">
   <p>Center and fade out the text.</p>
    <div class="ratio-keeper">
      <div class="video video-frame"></div>
    </div>