How to fadeout the play svgs

HTML & CSS
84

That’s another non-issue really as who is going to squeeze their screen that small and then suddenly scroll after they have clicked?

You can stop it by changing the min-height to the height of the buttons.

.playButtonContainer {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 310px;/* was 100% */
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 310px;
  padding: 0 10px; /* stop shadow cut off*/
  gap: 10px;
  transition: opacity 5s linear 10s;
  opacity: 1;
}

However it may give a vertical scrollbar when none is needed if the videos are smaller than that height.

Yes because the z-index ensures the element is below any other elements as it is still on the page. You just can’t see it.

1 Like
85

I had noticed this, what is the benefit of adding the background to .playButtonContainer:before instead of body?

body {
  /*background:#353198;*/
}

.playButtonContainer {
}

.playButtonContainer:before {
  background: #353198;
}
86

It is easier to manage because you can fade just the :before element rather than fading everything in the body (which would affect everything). It just keeps them all separate and makes the cross fade easier to manage.

If for example you set the body to opacity:0 then everything is gone and you can’t fade something else in at the same time.

Its often easier when you are changing displays if you can have some sort of separation especially if you fade one in as the other is fading out.

1 Like
87

I did that here, it creates a white flash.

If I don’t want that, I should add it back to the body.
https://jsfiddle.net/L9vfzpqj/1/

.outer:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #353198;
}
88

It does not create any flash. You are effectively fading it from blue to white.

If you don’t want the blue to change then apply blue to the body.

You don’t seem to be grasping any of these concepts and are blindly copying one set of code into another when they are not appropriate.

My code was engineered for the cross fade effect and a separate playcontainer. It greatly simplified and reduced the css and the js and avoided the unnecessary spaghetti of code that you are now adding back in.

Why have you moved the playbuttons back into .outer? That means you have to change the styles of outer each time you switch between the buttons and the videos! In my demo they were separate and the code was separate and could basically be left alone. Outer can’t contain the video and the playbuttons without changing its code each time you click.

I don’t understand why you have changed back to using outer as you are no better off than if you left the buttons where they originally were next to the videos which was the semantic html method).

In your new html you are still going to have to rewrite the video code as you have moved the playbuttons so there is no benefit here. I really don’t see what you are trying to achieve that hasn’t already been solved better.

2 Likes
90

How would the css be adjusted here where the play buttons are separated into their own container?

I am up to that part in the javascript. https://jsfiddle.net/gqv5btr1/

In there I put the play buttons into their own container, as the code is now not working, which is fine.

I wanted to get the css ready first, and wanted to know what adjustments would need to be made in there.

Here is a working code if you would need to be able to see that.

Working code: https://jsfiddle.net/2md1ge8c/

When the play buttons are moved out, .outer will not be needed in the html, right, that can be removed?

I added .playButtonContainer Replacing .outer in the css

What else in the css needs to be changed to get it ready.

.isOpen is staying I think, right?

What adjustments would need to be made in the css to prepare?

I’m not really sure what happens to this:

Would .outer become .playButtonContainer?

Assuming, .outer will not be needed in the html, which it won’t be now, right?

.outer.isOpen {
  /*display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 11.3s;
}

Also, I’m not implementing the crossfade effect on this one, all I’m doing is, separating the play buttons into a separate container, having it work like that.

I’m not sure what needs to be changed in here to get it ready.

In the css here I replaced .outer with .playButtonContainer.

CSS

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

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

/*body.*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade,
.fadingOut {
  cursor: default;
}

.initial-fade .cover,
.initial-fade .cover * {
  pointer-events: none !important;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

/*body.*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

/*body.*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
}

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

.outer.isOpen {
  /*display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}

.fadingOut .isOpen {
  animation: fadingOut 1s;
  animation-delay: 11.3s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.inner-container {
  display: none;
}

/* when container is active hide the cssPlay and show the inner container*/
.container.active .cover {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

Also, what would .outer on here be changed to, .playButtonContainer?

I’m assuming .isOpen will still be needed, right?

function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

resetButtons(".outer");

What I am trying to figure out is,

What gets removed, what stays in the code, and what gets changed to prepare for the play buttons to be put into their own container?

I think I make it seem more complicated than it is.

91

This is what I did here:
How I think it would work.

.outer gets removed from the html, and css.

.isOpen gets deleted from the javascript.

All of this gets removed:

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

    resetButtons(".outer");

In the css .container gets placed on here, or maybe not.

Maybe it is .playButtonContainer???

.fadingOut .container/.playButtonContainer {
  animation: fadingOut 1s;
  animation-delay: 11.3s;
}

Code was not expected to work here, my attempt at trying to figure out how the css would be changed where the play buttons are in their own container.

https://jsfiddle.net/td7a29gj/

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

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

/*body.*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.initial-fade {
  pointer-events: none;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}

.container.active {
  flex: 1 0 0;
}

/*body.*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadeInBody {
  100% {
    opacity: 1;
  }
}

/*body.*/
.bg1 .with-curtain:before {
  content: "";
  position: fixed;
  /*z-index: 1;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 165px 165px;
}

.playButtonContainer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 3s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadingOut .container {
  animation: fadingOut 1s;
  animation-delay: 11.3s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.inner-container {
  display: none;
}

/* when container is active hide the cssPlay and show the inner container*/
.container.active .cover {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}
92

If you are reconfiguring the html and css then the first step is to get rid of all the js and start again.

Get it working with css only and once you have worked out what needs to change and where then start adding the js back in. There is no point in trying to use the js that was built for some other purpose. Obviously there will be usable sections of code but at the moment the js is working against you as there is now a different logic.

You need to document what needs to happen and how you want to make it happen.

e.g

  1. Click the play button.
  2. Fade out the play buttons and show the relevant section triggering animations and delays as required (their timings will need to match or you will need to check animation end in js before adding a class to show the section)
  3. Exit the video, trigger your animations and once finished fade back in the play buttons adding a played class to the relevant button and then tidy up any added classes.

There will be lots of sub steps in there if you are triggering multi timed animations.

You don’t need to add hide to all the containers on first click of the playbutton because you already have hidden the inner-container though I suspect you should have hidden the container instead.

I suggest you remove the JS and create a page for each step with css alone. e.g. You already have the playbuttons so the next step would be to have a new page add a class to fade out the playbuttons and then add a class to fade in the relevant section. Once you are happy with the animations and the display then you can use js to add the classes for you.

Then create a page for the next stage with suitable classes added to give the appearance you want. Once you have working examples of each action that you require you can then get js to add the classes where and when required.

Js should be the last thing you do.

I already gave you my preferred version which can easily be amended to not be a crossfade by changing the transition timings and you have already been through all the techniques required to make this work so I suggest you refer to your old threads as they contain all the reasoning and logic for every twist and turn of this design. It does not matter that you are changing the html as the principle will be the same as to what happens and how it has to happen.

<div class="fence">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

Really? You are still going to use this after all I said?

I suggest that as this is a redesign of the html you revisit ‘off’, ‘cross’, ‘fan’, ‘sliding-panels’ and offload the backgrounds to pseudo elements where possible or existing elements or indeed combine multiple backgrounds where possible. At the moment the html is full of empty elements which should be avoided if possible.

2 Likes
93

In step1 and 2 above you would also be looking to add a class to the relevant container (once you had faded out the playbuttons and then removed them from the flow).

e.g.

<div class="container play1 with-curtain active bg1">

If you create a page with that code above (and add active to the playcontainer) you will see what you have and what else needs to be done.

Do one step at a time.

1 Like
94

With a repeating gradient, are you able to add a limit to the amount of times a line repeats itself?

95

Yes and no.

A gradient will repeat to fill the area required. You can set the background-size in percents so that the repeats are a set number but you just can’t have them repeat and then stop half way through.

This codepen shows how to repeat lines across the height of an element. There is also an example just using borders and shows how you don’t need 10 divs to make 10 lines.

1 Like
96

I figured it out: https://jsfiddle.net/qzwjo2am/

.fence > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    linear-gradient(transparent, transparent calc(100% - 2px), green calc(100% - 2px), green);
  background-size: 100% 10.1%;
}

      <div class="fence">
        <div></div>
      </div>'

What I did not figure out is how to remove transparency from the green lines.

97

I’d try something like this.


.fence > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    repeating-linear-gradient( green,green 2px,  transparent 2px,transparent 10%);
  /*background-size: 100% 10%;*/
}

Screen Shot 2021-12-11 at 13.03.16
Screen Shot 2021-12-11 at 13.03.161229×855 7.22 KB

1 Like
98

For it to start off as transparent first, then green, how would this one be written?

https://jsfiddle.net/wjtq3L8y/

  background:
      repeating-linear-gradient(green,green 2px,  transparent 2px,transparent 10%);
  /*background-size: 100% 10%;*/
}

Similar to this: https://jsfiddle.net/r18Lu62q/

Where it doesn’t start off with green.

  background:
    linear-gradient(transparent, transparent calc(100% - 2px), green calc(100% - 2px), green);
  background-size: 100% 10.1%;

99

You keep changing the parameters of what you want! The first and last borders are not visible in the fan demo so it doesn’t matter.

You could just hide the first border with this ( background-position:100% -2px;).

  background:
      repeating-linear-gradient(green,green 2px,  transparent 2px,transparent 10%);
  background-position:100% -2px;

Of course you then see the last border instead.

You could reverse the gradient but then you’d still see the last border.

background:repeating-linear-gradient(transparent, transparent calc(10% - 2px) ,green calc(10% - 2px) , green 10%)

If you don’t want the first and last border then maybe use a pseudo element and oversize it by 4px and hide the overflow. Actually you could probably just do this:

.fence {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  bottom: -2px;
   background:
      repeating-linear-gradient(green,green 2px,  transparent 2px,transparent 10%);
}

It all depends on what the criteria are but you seem to change that on every iteration so there is no one answer that solves all equations. :slight_smile:

1 Like
100

What is the reason why a % won’t work in the code, whether 0.55% or 2%?

2% https://jsfiddle.net/y3u6zh1x/

How come using a % works here?

https://jsfiddle.net/6top4fL2/

body {
   background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);
}
101

Seems to work for me unless I’m looking at the wrong thing.

Screen Shot 2021-12-13 at 17.02.03
Screen Shot 2021-12-13 at 17.02.03929×326 71.4 KB

Of course some lines will be fractionally larger due to rounding errors unlike my 2px examples.

102

Would calc() work to fix those rounding errors?

103

I don’t think so as it seems to vary from line to line which makes it not consistent. You could try changing the percentages by minor fractions and you may find something that works across the range needed.

I believe this is solved with my 2px versions though (unless you really want the lines to get bigger and smaller with screen size).

104

How do I get these vertical lines to become horizontal? https://jsfiddle.net/kt26pf8b/1/

I tried doing 0deg

to bottom didn’t work either.

Did I write this the wrong way?

It should work with to bottom but it is not.

body {
   background: linear-gradient(to right, white 0, white 72px, red 72px, red 74px, white 74px, white 108px, red 108px, red 110px, white 110px, white 144px, red 144px, red 146px, white 146px, white 180px, red 180px, red 182px, white 182px, white 216px, red 216px, red 218px, white 218px, white 252px, red 252px, red 254px, white 254px, white 288px, red 288px, red 290px, white 290px, white 360px);
}