asasass
December 2, 2021, 2:57pm
21
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?
PaulOB
December 2, 2021, 4:09pm
22
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;
}
1 Like
asasass
December 2, 2021, 4:27pm
23
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>
PaulOB
December 2, 2021, 4:58pm
24
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.
PaulOB
December 2, 2021, 5:05pm
25
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;
}
asasass
December 2, 2021, 5:08pm
26
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.
PaulOB
December 2, 2021, 5:12pm
27
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;
}
1 Like
asasass
December 2, 2021, 5:33pm
28
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;
asasass
December 2, 2021, 5:50pm
29
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;
}
PaulOB
December 2, 2021, 6:11pm
30
asasass:
It’s not even.
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.)
1 Like
asasass
December 2, 2021, 6:23pm
31
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;
}
}
PaulOB
December 2, 2021, 10:20pm
32
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
}
1 Like
asasass
December 2, 2021, 10:27pm
33
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>
asasass
December 2, 2021, 10:31pm
34
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>
asasass
December 2, 2021, 11:35pm
35
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>
asasass
December 2, 2021, 11:57pm
36
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>
PaulOB
December 3, 2021, 11:51am
37
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.
1 Like
asasass
December 9, 2021, 4:26pm
38
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;
}
}
PaulOB
December 9, 2021, 6:12pm
39
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;
}
1 Like
asasass
December 9, 2021, 6:39pm
40
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.