I found this, it uses JavaScript, but I think the effect can be made using animation/keyframes.
After the button is clicked, that’s the effect I am trying to make.
This effect.
What elements do you want to apply this to exactly? Your whole screen or just a selected element?
The interference pattern is an animated gif in that demonstration so you would need the image if you want that effect.
The effect could be done with keyframes although you will need js to toggle the class on and off (unless you desperately don’t want js then you could use the checkbox hack).
I found this one that has a similar effect: https://jsfiddle.net/wxdae87u/
animation: turn-off 0.15s ease 0s 1, turned-off 1s ease 0.15s infinite,
white-dot 0.35s ease 0.15s 1;
@keyframes turn-off {
0% {
border-width: 0vh;
border-left-width: 0vw;
border-right-width: 0vw;
}
50% {
border-width: 19.65vw;
border-left-width: 10vw;
border-right-width: 10vw;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
}
}
@keyframes turned-off {
0% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
}
@keyframes white-dot {
0% {
background: #ffffff80;
}
100% {
background: #111111;
}
}
It would be added somewhere on here: https://jsfiddle.net/kcr3n01e/
After the exit button is clicked, then the effect would happen.
So, there would be no toggle.
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
/*transition: background 6s ease;*/
}
/*.fadingOut .curtain {
/* animation: fadeInBackground 5s ease 0s forwards;*/
/* background-color: transparent;
}*/
Yes there’s loads of ways to do it. I just knocked this up in a few minutes without looking at anyone else’s code.
So is that after the curtains have closed or instead of the curtains or what?
Then what happens after that? Does it stay at the white line/black screen or does it go back to the play buttons?
You must be explicit as these things will have specific requirements to set them up.
2 Likes
How would this be fixed? https://jsfiddle.net/1mq7cy6w/1/
How would it be added?
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
/*transition: background 6s ease;*/
}
.fadingOut .curtain {
animation: screenoff 1s linear forwards;
}
@keyframes screenoff {
0% {
height: 100vh;
}
10% {
background: white;
}
60% {
height: 40px;
border-radius: 0%;
}
70% {
height: 20px;
border-radius: 20%;
}
80% {
height: 10px;
width: 100%;
}
90% {
width: 50%;
height: 5px;
}
95% {
height: 2px;
}
97% {
width: 100%;
}
100% {
height: 1px;
width: 0;
background: white;
}
}
You would need to do it like this.
.fadingOut .container.active .sliding-panels {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
animation: screenoff 1s linear ;
}
@keyframes screenoff {
0% {
height: 100vh;
}
10% {
background: white;
}
60% {
height: 40px;
border-radius: 0%;
}
70% {
height: 20px;
border-radius: 20%;
}
80% {
height: 10px;
width: 100%;
}
90% {
width: 50%;
height: 5px;
}
95% {
height: 2px;
}
97% {
width: 100%;
}
100% {
height: 1px;
width: 0;
padding:0;
background: white;
}
}
Based on this fiddle.
1 Like
Would I be able to see how this one would look in there?
I tried adding it as is, but it did not do anything in the code.
My attempt: https://jsfiddle.net/1xukth5r/
Original working code: https://jsfiddle.net/wxdae87u/
vw may need to be changed to percent.
.fadingOut .container.active .sliding-panels {
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:100%;
animation: turn-off 0.15s ease 0s 1, turned-off 1s ease 0.15s infinite,
white-dot 0.35s ease 0.15s 1;
}
@keyframes turn-off {
0% {
border-width: 0vh;
border-left-width: 0vw;
border-right-width: 0vw;
}
50% {
border-width: 19.65vw;
border-left-width: 10vw;
border-right-width: 10vw;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
}
}
@keyframes turned-off {
0% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
}
@keyframes white-dot {
0% {
background: #ffffff80;
}
100% {
background: #111111;
}
}
There’s too much to that animation as it uses multiple elements and doesn’t look as good as my short demo.
You would need to add all the code. This is a starting point.
.fadingOut .container.active .sliding-panels {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.ratio-keeper {
background: #333;
border: 2.5vw solid #000;
border-radius: 0.25vw;
border-color: #000 #101010 #000 #101010;
position: relative;
bottom: 2vh;
box-shadow: 0 0 5px 0 #000 inset, 5vmin 0vmin 5vmin -3vmin #000,
-5vmin 0vmin 5vmin -3vmin #000;
}
.ratio-keeper:before {
content: "";
width: 8vw;
height: 6vw;
background: #000000;
position: absolute;
bottom: -5.95vw;
left: calc(50% - 2.75vw);
border-radius: 0 100%;
transform: rotate(-42deg);
}
.ratio-keeper:after {
content: "";
width: 8vw;
height: 6vw;
background: #000000;
position: absolute;
bottom: -5.95vw;
left: calc(50% - 5.5vw);
border-radius: 100% 0;
transform: rotate(42deg);
}
.sliding-panels {
background: radial-gradient(transparent, transparent, #00000080);
box-shadow: 0 0 1vmin 0 #000 inset;
}
.sliding-panels:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 19.65vw solid #0a0a0a;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
animation: turn-off 0.15s ease 0s 1, turned-off 1s ease 0.15s infinite,
white-dot 0.35s ease 0.15s 1;
}
.sliding-panels:after {
content: "";
background: linear-gradient(
45deg,
#ffffff00 15%,
#ffffff0d 35%,
#ffffff00,
#ffffff05,
#ffffff20
);
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.fadingOut .container.active .sliding-panels:before {
animation: turn-on 0.15s ease 0s 1, turned-on 1s ease 0.15s infinite;
}
@keyframes turn-on {
0% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
}
50% {
border-width: 19.65vw;
border-left-width: 10vw;
border-right-width: 10vw;
}
100% {
border-width: 0vh;
border-left-width: 0vw;
border-right-width: 0vw;
}
}
@keyframes turned-on {
0% {
border-width: 0;
}
100% {
border-width: 0;
}
}
@keyframes turn-off {
0% {
border-width: 0vh;
border-left-width: 0vw;
border-right-width: 0vw;
}
50% {
border-width: 19.65vw;
border-left-width: 10vw;
border-right-width: 10vw;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
}
}
@keyframes turned-off {
0% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
100% {
border-width: 19.65vw;
border-left-width: 35.1vw;
border-right-width: 35.1vw;
background: #111111;
}
}
@keyframes white-dot {
0% {
background: #ffffff80;
}
100% {
background: #111111;
}
}
It doesn’t seem to work very well in that situation and would probably need to be built in full from the start with the whole structure.
1 Like
How do I edit this so that after it goes off, the background doesn’t come back, it stays off?
Also, I’m not sure why, but after I click on it 1 time, it blinks, then shuts off, it doesn’t shut off right away.
https://jsfiddle.net/017wx8qp/
or you can test on this one, just made the screen smaller.
https://jsfiddle.net/x6wvcm74/2/
When it is clicked on 1 time it blinks, then it shuts off.
.screen.off .inner {
animation: shutdown 3s linear;
}
@keyframes shutdown {
0% {
opacity: 0;
}
8%, 46% {
transform: scale(1, 1);
opacity: 1;
}
50% {
transform: scale(1, 0.02);
opacity: 0.8;
}
55%, 100% {
transform: scale(0, 0);
opacity: 0.3;
}
}
Is -webkit needed also?
Is -webkit needed for all animations?
How do you know if it is needed or not needed?
@-webkit-keyframes shutdown {
0% {
opacity: 0;
}
8%, 46% {
transform: scale(1, 1);
opacity: 1;
}
50% {
transform: scale(1, 0.02);
opacity: 0.8;
}
55%, 100% {
transform: scale(0, 0);
opacity: 0.3;
}
}
Because you set its opacity to zero at the start of the animation so it immediately vanishes.
Use fowards on the animation so it stays at the last values of the keyframe.
.screen.off .inner {
animation: shutdown 3s linear forwards;
}
@keyframes shutdown {
0% {
opacity: 1;/* this was zero */
}
etc...
In your actual page you already have a class to use so you won’t be using the toggle class anyway.
1 Like
How would this same thing be done using animation?
Changing transition to animation? https://jsfiddle.net/cowxvrq2/
How would it be written?
I was trying to figure that out.
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
transition: background 6s ease;
}
.fadingOut .curtain{
background-color: transparent;
}
Doing this targets the entire structure, not just the background:
https://jsfiddle.net/4zpmkjuq/1/
How do I have the animation only target the background?
Similar to how it’s done with transition.
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
/*transition: background 6s ease;*/
}
.fadingOut .curtain{
animation: shutdown 1s linear;
}
@keyframes shutdown {
0% {
opacity: 1;
}
8%, 46% {
transform: scale(1, 1);
opacity: 1;
}
50% {
transform: scale(1, 0.02);
opacity: 0.8;
}
55%, 100% {
transform: scale(0, 0);
opacity: 0.3;
}
}
You are asking two different questions there.
-
you ask how to make a background fade transition into an animation.
-
You are asking how to make a turn off effect.
Which is it you want?
In answer to one:
Instead of transition: background 6s ease; you would use animation:bgfade 6s forwards. then a keyframe that finishes with to{background-color:transparent;}
In answer to question 2 then I already gave you the code and which elements to address a few posts above. You can’t set the curtain to zero height and width because then you have no curtain just the coloured background behind.
The effect needs to take place on sliding panels as I already showed you. However if you fade black to black you will see nothing (or if you make black transparent you see the black behind). You’d need a white in there to see the effect. You can’t remove the black from the curtain because then you would see the square coloured boxes behind.
.fadingOut .curtain .sliding-panels{
position :absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
animation: shutdown 1s linear forwards
}
You don’t really seem to be listening? Are you trying to do too many things at once?
1 Like
Doing this removes the curtain.
https://jsfiddle.net/pcarb7e0/2/
How do I keep the curtain there?
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}
.fadingOut .curtain .sliding-panels {
position :absolute;
top:0;
left:0;
width:100%;
height:100%;
background: white;
animation: shutdown 2s linear forwards;
}
@keyframes shutdown {
0% {
opacity: 0;
}
8%, 46% {
transform: scale(1, 1);
opacity: 1;
}
50% {
transform: scale(1, 0.02);
opacity: 0.8;
}
55%, 100% {
transform: scale(0, 0);
opacity: 0.3;
}
}
Yes that effect gets rid of everything you’d need to use the extra shutdown div you added except you may have it in the wrong place. Put it next to the sliding panels just to be sure.
<div class="shutdown"></div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
Then change the css to target the shutdown.
.fadingOut .curtain .shutdown {
position :absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
animation: shutdown 2s linear forwards;
}
A lot of empty html now just for eye candy. I gave you reduced code some time ago using pseudo elements but nearly every time I give you a pseudo element you tend not to use it and add actual html instead.
e.g.
.fadingOut .curtain .ratio-keeper:before {
content:"";
position :absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
animation: shutdown 2s linear forwards;
}
2 Likes
Using the pseudo element replaces the need for the extra html element.
Yes it replaces the shutdown div.
The sliding-panels wrapper is never used either. You just need the left and right panels.
1 Like
How do I get aspect ratio to work on here? https://jsfiddle.net/su49w5e1/
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.outer {
display: flex;
min-height: 100vh;
align-content: center;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.screen {
flex: 1 0 0;
margin: auto;
max-width: 400px;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}
.inner {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: red;
}
<div class="outer">
<div class="screen">
<div class="inner">
<h1>Click to turn OFF</h1>
</div>
</div>
</div>
Assuming you mean the css aspect ratio property then you don’t need the inner element and then change your screen styles to this.
.screen {
display:flex;
flex: 1 0 0;
margin: auto;
max-width: 400px;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3px;
border-color: #000 #101010 #000 #101010;
aspect-ratio:16 / 9;
background:red;
align-items:center;
justify-content:center;
}
.screen.off {
animation: shutdown 3s linear;
}
However you may need the inner element if you want the black background to remain as the red switches off.
.screen {
display:flex;
flex: 1 0 0;
margin: auto;
max-width: 400px;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3px;
border-color: #000 #101010 #000 #101010;
aspect-ratio:16 / 9;
align-items:center;
justify-content:center;
}
.inner {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: red;
}
.screen.off .inner {
animation: shutdown 3s linear;
}
1 Like
How do I place the turn off effect to on top of the fan background to test it?
https://jsfiddle.net/ewamzdcq/
(function (d) {
const tv = d.querySelector(".curtain");
tv.addEventListener("click", screenOff);
function screenOff() {
tv.classList.toggle("off");
}
})(document);
<div class="outer">
<div class="curtain ">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg xmlns="http://www.w3.org/2000/svg" width="70%" height="70%" viewBox="76 130 381 381">
<path fill="#000100" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</svg>
</div>
<div class="cross"></div>
<div class="inner">
<h1>Click to turn OFF</h1>
</div>
</div>
</div>
</div>
Like this perhaps.
.inner {
position:absolute;
top:0;
left:0;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: red;
}
.off .inner {
animation: shutdown 3s linear;
}
1 Like