I was trying to get this keyframe animation to work:
https://jsfiddle.net/v5tL76kz/
@keyframes close-wrapper {
68% {
width: 100%;
height: 1px;
}
99% {
width: 0px;
height: 1px;
}
100% {
width: 0px;
height: 0px;
}
In the code here: https://jsfiddle.net/1xLfh48q/
Is that one able to work?
Like this:
.inner {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: red;
}
Am I able to add this as the background in place of the red?
svg background
https://jsfiddle.net/Lc98b7rx/
Test Code
https://jsfiddle.net/6ut9voxc/
section {
position: absolute;
top: -50px;
left: -50px;
width: calc(100% + 50px);
height: calc(100% + 50px);
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
<section></section>
<svg>
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="8s" values="0.9 0.9;0.8 0.8; 0.9 0.9" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
It looks like you can basically add the svg inside .inner and then do something like this.
.inner {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
.inner svg{
width:0;height:0;
}
You may need to tweak the positions etc.
If you still want to read the text “Click to turn off” then you will need to add the noise onto a pseudo element instead.
.inner{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.inner:before {
content:"";
position:absolute;
top:-50px;
left:-50px;
right:0;
bottom:0;
z-index:1;
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
.inner h1{z-index:2;}
.inner svg{
width:0;height:0;
position:absolute;
z-index:-1;
}
After it’s clicked on it get’s stuck. https://jsfiddle.net/mb0w62y4/
Maybe it is supposed to be that way.
This is only for testing.
It doesn’t completely disappear.
That might become an issue when adding it to the other code.
You probably just need overflow:hidden on the inner.
inner{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
overflow:hidden;
}
I added it to the 1st button here: https://jsfiddle.net/4mbd5xn2/2/
For it to appear the exit button is clicked.
I removed the curtains so it can be fixed.
It’s not even.
How would it be adjusted?
The original code used this:
position: absolute;
top: -50px;
left: -50px;
width: calc(100% + 50px);
height: calc(100% + 50px);
css:
.fadingOut .off{
content: "";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
overflow:hidden;
This worked: https://jsfiddle.net/6xvem2p4/
.fadingOut .off {
content: "";
position: absolute;
top: -50px;
left: -50px;
right: 0;
bottom: 0;
width: calc(100% + 50px);
height: calc(100% + 50px);
margin: auto;
display: flex;
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
animation: shutdown 50s 0ms ease forwards;
}
Look at the code I gave you in post #25. I changed the top and left values. You don’t need the calc or the width and height because I used the 4 co-ordinates to size it. ( I think that’s the 4th in the last couple of days I’ve mentioned sizing with co-ordinates only when possible.)
Yes, your way is much more evener.
There is an issue, it is not disappearing. https://jsfiddle.net/g04x1e8q/
It’s added to the 1st button.
Also, .fadingOut should be on the 1st .off not the .fadingOut .off::before {
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
/*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}
.off{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
animation: shutdown 10s 0ms ease forwards;
}
.fadingOut .off::before {
content:"";
position:absolute;
top:-50px;
left:-50px;
right:0;
bottom:0;
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
@keyframes shutdown {
68% {
width: 100%;
height: 1px;
}
99% {
width: 0px;
height: 1px;
}
100% {
width: 0px;
height: 0px;
}
}
You already asked that question and I told you yo add overflow:hidden.
.off{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
animation: shutdown 10s 0ms ease forwards;
overflow:hidden
}
When I scroll up and down, it is visible for some strange reason.
Shouldn’t it be hidden until the exit button is clicked?
https://jsfiddle.net/yf5gLmob/1/
<div class="off">
<svg>
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="8s" values="0.9 0.9;0.8 0.8; 0.9 0.9" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
</div>
Adding hide seems to fix that, but it doesn’t require me to do anything in the javascript, how come?
How does it know to unhide it? https://jsfiddle.net/nokb1md4/
<div class="off hide">
<svg>
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="8s" values="0.9 0.9;0.8 0.8; 0.9 0.9" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
</div>
Update:
When I have this set to 2 dur="2s"The animation runs out before the exit button is clicked.
The animation should start after the exit button is clicked, not on page load.
Maybe that can’t happen.
<div class="off hide">
<svg class="hide">
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="5s" values="0.9 0.9;0.8 0.8; 0.9 0.9" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
</div>
Should this be on a different class? .fadingOut
Maybe I’m going something wrong.
.off {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
animation: shutdown 10s 0ms ease forwards;
overflow:hidden
}
.off::before {
content:"";
position:absolute;
top:-50px;
left:-50px;
right:0;
bottom:0;
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
@keyframes shutdown {
68% {
width: 100%;
height: 1px;
}
99% {
width: 0px;
height: 1px;
}
100% {
width: 0px;
height: 0px;
}
}
<div class="off">
<svg>
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="2s" values="0.9 0.9;0.8 0.8; 0.9 0.9" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
</div>
Because you turn it back on with display:flex here.
.fadingOut .off{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
}
Set it to display:none by default and then it will get turned on when the fading class is added.
.off{display:none}
.fadingOut .off{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
animation: shutdown 10s 0ms ease forwards;
overflow:hidden
}
I think that solves all the problems especially when pressing the play button second time around. The hide class is no use because it gets removed and never replaced so better to use the rule I gave above.
Clicking on the screen part works, but on the 2nd time the fan does not spin again.
Clicking on the screen should start the fan and the static animation along with the shutdown.
Clicking on the screen does start the static animation and shutdown, but the fan is not spinning again.
The fan shouldn’t start when Run is clicked in jsfiddle, only when the screen is clicked.
This would be almost right I think: https://jsfiddle.net/n0k2xy43/1/
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.off .inner {
background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
animation-name: tv-static, shutdown;
animation-duration: 2s, 1s;
animation-delay: 0s, 1s;
animation-fill-mode: forwards;
}
@keyframes tv-static {
from {
background-size: 100% 100%;
}
to {
background-size: 200% 200%;
}
}
@keyframes shutdown{
68% {
width: 100%;
height: 1px;
}
99% {
width: 0px;
height: 1px;
}
100% {
width: 0px;
height: 0px;
}
}
I’m not sure what is supposed to happen but the animation won’t magically start by itself each time. You need to use the added class to run it.
e.g.
.fan svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 70%;
margin: auto;
/*animation: fan-spin 6s ease forwards;*/
}
.curtain.off .fan svg{
animation: fan-spin 6s ease forwards;
}
Is there a reason why I have to click 2 times for the static effect to appear on the screen?
https://jsfiddle.net/e4pvxw7s/
Can that be adjusted to 1 time?
The 1st time I click it is one time, the 2nd time I have to click 2 times.