Bildschirm mit statischem Fernsehrauschen
So sah es damals aus wenn man keinen Empfang hat. Heute kaum noch zu sehen , doch ältere Fernseher zeigen das so.
Achtung , beim Klick auf den X springt das Tool in den Vollbildschirm Modus.
Deaktivieren durch Drücken der F-11 Taste , oder man geht mit der Maus in der Mitte des Bildschirms nach oben, da sollte dann ein X erscheinen
Achtung , beim Klick auf den X springt das Tool in den Vollbildschirm Modus.
Deaktivieren durch Drücken der F-11 Taste , oder man geht mit der Maus in der Mitte des Bildschirms nach oben, da sollte dann ein X erscheinen
Der hier verwendete Code
<!DOCTYPE html>
<!-- saved from url=(0034)https://pranx.com/static-tv-noise/ -->
<html lang="en" data-lt-installed="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/-->
<script src="/js_webseite/jquery.min.js"></script>
<script>
$(window).load(function () {
$(".trigger_popup_fricc").click(function(){
$('.grainpopup').show();
});
$('.grainpopup').click(function(){
$('.grainpopup').hide();
});
$('.popupCloseButton').click(function(){
toggleFullScreen();
$('.grainpopup').hide();
});
});
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
/*! Grained.js
http://sarathsaleem.github.io/grained/#2
* Author : Sarath Saleem
*/
!function(a,b){"use strict";function c(a,c){function d(a,b,c,d){var e="";e=b.length?b+"{"+c+"}":c,"insertRule"in a?a.insertRule(e,d):"addRule"in a&&a.addRule(b,c,d)}var e=null,f=null,g=null;if("string"==typeof a&&(e=b.getElementById(a.split("#")[1])),!e)return void console.error("Grained: cannot find the element with id "+a);f=e.id,"absolute"!==e.style.position&&(e.style.position="relative"),e.style.overflow="hidden";var h=["","-moz-","-o-animation-","-webkit-","-ms-"],i={animate:!0,patternWidth:100,patternHeight:100,grainOpacity:.1,grainDensity:1,grainWidth:1,grainHeight:1,grainChaos:.5,grainSpeed:20};Object.keys(c).forEach(function(a){i[a]=c[a]});for(var j=function(){var a=b.createElement("canvas"),c=a.getContext("2d");a.width=i.patternWidth,a.height=i.patternHeight;for(var d=0;d<i.patternWidth;d+=i.grainDensity)for(var e=0;e<i.patternHeight;e+=i.grainDensity){var f=256*Math.random()|0;c.fillStyle="rgba("+[f,f,f,i.grainOpacity].join()+")",c.fillRect(d,e,i.grainWidth,i.grainHeight)}return a.toDataURL("image/png")},k=j(),l="",m=["0%:-10%,10%","10%:-25%,0%","20%:-30%,10%","30%:-30%,30%","40%::-20%,20%","50%:-15%,10%","60%:-20%,20%","70%:-5%,20%","80%:-25%,5%","90%:-30%,25%","100%:-10%,10%"],n=h.length;n--;){l+="@"+h[n]+"keyframes grained{";for(var o=0;o<m.length;o++){var p=m[o].split(":");l+=p[0]+"{",l+=h[n]+"transform:translate("+p[1]+");",l+="}"}l+="}"}var q=b.getElementById("grained-animation");q&&q.parentElement.removeChild(q);var r=b.createElement("style");r.type="text/css",r.id="grained-animation",r.innerHTML=l,b.body.appendChild(r);var s=b.getElementById("grained-animation-"+f);s&&s.parentElement.removeChild(s),r=b.createElement("style"),r.type="text/css",r.id="grained-animation-"+f,b.body.appendChild(r);var t="background-image: url("+k+");";if(t+='position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;',n=h.length,i.animate)for(;n--;)t+=h[n]+"animation-name:grained;",t+=h[n]+"animation-iteration-count: infinite;",t+=h[n]+"animation-duration: "+i.grainChaos+"s;",t+=h[n]+"animation-timing-function: steps("+i.grainSpeed+", end);";g="#"+f+"::before",d(r.sheet,g,t)}a.grained=c}(window,document);
</script>
<style>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
html,body {
overflow: hidden;
}
#container > * { position:relative; }
#container {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-o-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
transform: scale(2) rotate(90deg);
}
@media screen and (max-width:500px){
}
.gradientFrame {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0px 0px 500px #000 inset;
}
h1 {
font-size: 23px;
font-weight: bold;
}
.intro {display: none;}
/* Popup box BEGIN */
.grainpopup{
background:transparent;
cursor:pointer;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.grainpopup .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.grainpopup > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
width: 315px;
min-height: 100px;
vertical-align: middle;
max-width: 90%;
position: relative;
border-radius: 8px;
padding: 15px 5%;
font-size: 20px;
line-height: 23px;
font-family: Arial;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #2d7966;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
color: #2d7966;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #a4aae8;
}
.trigger_popup_fricc {
cursor: pointer;
font-size: 20px;
margin: 20px;
display: inline-block;
font-weight: bold;
}
/* Popup box BEGIN */
</style>
<title>Static TV Noise Screen</title>
</head>
<body>
<div id="container" style="position: relative; overflow: hidden;">
<div class="grained"></div>
</div>
<div class="grainpopup">
<span class="helper"></span>
<div>
<div title="Close" class="popupCloseButton">X</div>
<h1>Bildschirm mit statischem Fernsehrauschen</h1>
<p class="intro">Dieser Bildschirm bringt diesen Effekt wieder auf Ihren Computer.</p>
<p>Stellen sie sicher <br>das der Vollbildschirm Modus aktiviert ist (<strong>F11 button</strong>)!</p>
</div>
</div>
<div class="gradientFrame">
</div>
<script>
var options = {
"animate": true,
"patternWidth": 285.56,
"patternHeight": 42.42,
"grainOpacity": 1,
"grainDensity": 1.5,
"grainWidth": 1.89,
"grainHeight": 1.5
}
grained("#container", options);
</script><style type="text/css" id="grained-animation">@-ms-keyframes grained{0%{-ms-transform:translate(-10%,10%);}
10%{-ms-transform:translate(-25%,0%);}20%{-ms-transform:translate(-30%,10%);}30%{-ms-transform:translate(-30%,30%);}
40%{-ms-transform:translate();}50%{-ms-transform:translate(-15%,10%);}60%{-ms-transform:translate(-20%,20%);}
70%{-ms-transform:translate(-5%,20%);}80%{-ms-transform:translate(-25%,5%);}90%{-ms-transform:translate(-30%,25%);}
100%{-ms-transform:translate(-10%,10%);}}@-webkit-keyframes grained{0%{-webkit-transform:translate(-10%,10%);}
10%{-webkit-transform:translate(-25%,0%);}20%{-webkit-transform:translate(-30%,10%);}30%{-webkit-transform:translate(-30%,30%);}
40%{-webkit-transform:translate();}50%{-webkit-transform:translate(-15%,10%);}60%{-webkit-transform:translate(-20%,20%);}
70%{-webkit-transform:translate(-5%,20%);}80%{-webkit-transform:translate(-25%,5%);}90%{-webkit-transform:translate(-30%,25%);}
100%{-webkit-transform:translate(-10%,10%);}}@-o-animation-keyframes grained{0%{-o-animation-transform:translate(-10%,10%);}
10%{-o-animation-transform:translate(-25%,0%);}20%{-o-animation-transform:translate(-30%,10%);}
30%{-o-animation-transform:translate(-30%,30%);}40%{-o-animation-transform:translate();}50%{-o-animation-transform:translate(-15%,10%);}
60%{-o-animation-transform:translate(-20%,20%);}70%{-o-animation-transform:translate(-5%,20%);}
80%{-o-animation-transform:translate(-25%,5%);}90%{-o-animation-transform:translate(-30%,25%);}
100%{-o-animation-transform:translate(-10%,10%);}}@-moz-keyframes grained{0%{-moz-transform:translate(-10%,10%);}
10%{-moz-transform:translate(-25%,0%);}20%{-moz-transform:translate(-30%,10%);}30%{-moz-transform:translate(-30%,30%);}
40%{-moz-transform:translate();}50%{-moz-transform:translate(-15%,10%);}60%{-moz-transform:translate(-20%,20%);}
70%{-moz-transform:translate(-5%,20%);}80%{-moz-transform:translate(-25%,5%);}90%{-moz-transform:translate(-30%,25%);}
100%{-moz-transform:translate(-10%,10%);}}@keyframes grained{0%{transform:translate(-10%,10%);}10%{transform:translate(-25%,0%);}
20%{transform:translate(-30%,10%);}30%{transform:translate(-30%,30%);}40%{transform:translate();}50%{transform:translate(-15%,10%);}
60%{transform:translate(-20%,20%);}70%{transform:translate(-5%,20%);}80%{transform:translate(-25%,5%);}90%{transform:translate(-30%,25%);}
100%{transform:translate(-10%,10%);}}</style><style type="text/css" id="grained-animation-container"></style>
</body></html>