Broken TV
How do I make an broken tv?
Funsies with the deprecated marquee-element. Just breaking a html video.For even more epic brokenness go here:. What is a broken tv? How do you make a broken tv? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.
Broken TV - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Broken TV</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tv"> <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" /> <!-- broken video --> <div class="video"> <marquee direction="down" behavior="alternate" class="a"> <marquee behavior="alternate"> <video class="b" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay></video> <!--<div class="b"></div>--> </marquee> </marquee> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Broken TV - Script Codes CSS Codes
body { background: -webkit-radial-gradient(center ellipse, #f3e2c7 0%, #fc9b0a 100%); background: radial-gradient(ellipse at center, #f3e2c7 0%, #fc9b0a 100%);
}
.tv { position: absolute; left: calc(50% - 550px/2); top: calc(50% - 380px/2);
}
.tv img { position: absolute; top: 0; left: 0; z-index: 10; width: 550px;
}
.video { position: absolute; top: 25px; left: 20px;
}
marquee { height: 300px; width: 400px; border: 1px solid black;
}
.b { width: 400px; height: 300px; background: black;
}
video { -webkit-animation: broken 4s infinite alternate; animation: broken 4s infinite alternate;
}
@-webkit-keyframes broken { from { -webkit-filter: saturate(0.2); filter: saturate(0.2); } to { -webkit-filter: saturate(2); filter: saturate(2); }
}
@keyframes broken { from { -webkit-filter: saturate(0.2); filter: saturate(0.2); } to { -webkit-filter: saturate(2); filter: saturate(2); }
}
Developer | Karsten Buckstegge |
Username | MrBambule |
Uploaded | September 10, 2022 |
Rating | 3 |
Size | 2,456 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Dropdown Menu Animation | 3,411 Kb |
Simple React Slider | 4,975 Kb |
SeXy buttons | 4,447 Kb |
The wheel of social fortune | 6,570 Kb |
Responsive CSS arrow bar with transparent borders | 2,798 Kb |
Responsive focuspoint on image with object-position | 3,707 Kb |
Freddy the Fly | 4,238 Kb |
Scalable animated css menu button | 2,632 Kb |
Sliding Skill-Diagramm | 2,466 Kb |
Base64 SVG Me | 44,786 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flexbox Test | Icutpeople | 2,486 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!