Fallout Slides

Developer
Moses Holmström
Size
5,381 Kb
Views
38,456
  1. Fallout Slides Previews
  2. Fallout Slides HTML Codes
  3. Fallout Slides CSS Codes
  4. Fallout Slides JS Codes

How do I make an fallout slides?

I stopped lying! JS is now required though... What is a fallout slides? How do you make a fallout slides? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Fallout Slides Previews
IQ Test

Fallout Slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fallout Slides</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <section class="slide defocus"> <h1 class="title">Please stand by</h1> </section> <section class="slide defocus"> <h1 class="title">Wait for it...</h1> </section> <section class="slide defocus"> <h1 class="title">Ok, done. Starting over...</h1> <img class="icon" src="http://res.cloudinary.com/thykka/image/upload/v1476998047/BoSdg5Z_yu8n33.png" alt="Computer Whiz"> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fallout Slides - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Voltaire);
* { font-family: "Voltaire", sans-serif;
}
html { font-size: 125%; line-height: 1.5em;
}
body, .container, .container::after, .slide::before, .slide::after { bottom: 0; left: 0; position: absolute; right: 0; top: 0;
}
* { box-sizing: border-box;
}
body { padding: 0;
}
.container { background-image: url("//i.imgur.com/JjOZ3IR.png"), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImNpcmNsZSIgY3k9ImNsb3Nlc3QtY29ybmVyIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYjRjODk4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjk4MjQ1Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: url("//i.imgur.com/JjOZ3IR.png"), -webkit-radial-gradient(circle closest-corner, #b4c898 0%, #698245 100%); background-image: url("//i.imgur.com/JjOZ3IR.png"), radial-gradient(circle closest-corner, #b4c898 0%, #698245 100%); background-size: 200vmax, contain; background-position: 50%; overflow: hidden; -webkit-perspective: 100vmax; perspective: 100vmax; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.container::after { background-image: -webkit-repeating-linear-gradient(0deg, rgba(4, 4, 4, 0) 0px, rgba(4, 4, 4, 0) 2px, rgba(4, 4, 4, 0.1) 4px, rgba(4, 4, 4, 0.1) 6px, rgba(4, 4, 4, 0) 8px); background-image: -webkit-repeating-linear-gradient(bottom, rgba(4, 4, 4, 0) 0px, rgba(4, 4, 4, 0) 2px, rgba(4, 4, 4, 0.1) 4px, rgba(4, 4, 4, 0.1) 6px, rgba(4, 4, 4, 0) 8px); background-image: repeating-linear-gradient(0deg, rgba(4, 4, 4, 0) 0px, rgba(4, 4, 4, 0) 2px, rgba(4, 4, 4, 0.1) 4px, rgba(4, 4, 4, 0.1) 6px, rgba(4, 4, 4, 0) 8px); box-shadow: inset 0 0 8rem 4rem rgba(4, 4, 4, 0.75); content: ''; display: block; pointer-events: none;
}
.slide { -webkit-animation-name: switch-slide; animation-name: switch-slide; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; border-radius: 2rem; height: 100%; padding: 3rem; position: absolute; text-align: center; width: 100%;
}
.slide::before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS44MzM2MSUiIHN0b3AtY29sb3I9IiNmYWZhZmEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZhZmEiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OS44MzM2MSUiIHN0b3AtY29sb3I9IiNmYWZhZmEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYWZhZmEiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-linear-gradient(90deg, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px), -webkit-linear-gradient(0deg, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px); background-image: -webkit-linear-gradient(bottom, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px), -webkit-linear-gradient(left, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px); background-image: linear-gradient(0deg, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px), linear-gradient(90deg, #fafafa 6px, rgba(250, 250, 250, 0) 6.01px); background-size: 13.33vmax 13.33vmax; background-position: 50%; content: ''; display: block; opacity: .2; pointer-events: none; z-index: -1;
}
.slide::after { box-shadow: inset 0 0 0 1rem #040404, inset 0 0 2rem 1rem #040404; background-image: url("//i.imgur.com/nsO9SX4.png"); border-radius: 3rem; content: ''; display: block; pointer-events: none;
}
.defocus { -webkit-animation-duration: 5s, 5s; animation-duration: 5s, 5s; -webkit-animation-name: switch-slide, defocus-slide; animation-name: switch-slide, defocus-slide; -webkit-animation-timing-function: ease-in-out, ease-out; animation-timing-function: ease-in-out, ease-out;
}
.title { font-size: 40px; font-size: 2rem; line-height: 60px; line-height: 3rem; margin: 5vw auto 0; text-align: center; text-transform: uppercase;
}
.icon { max-width: 33vmin;
}
@media (max-width: 1024px) { .container::after { box-shadow: inset 0 0 4rem 2rem rgba(4, 4, 4, 0.75); }
}
@media (min-width: 1025px) { .title { font-size: 60px; font-size: 3rem; line-height: 90px; line-height: 4.5rem; margin: 22vmin auto 0; }
}
@-webkit-keyframes switch-slide { 0% { -webkit-transform: translate3d(0, 100%, 5rem); transform: translate3d(0, 100%, 5rem); } 10% { -webkit-transform: translate3d(0, 67%, 0rem); transform: translate3d(0, 67%, 0rem); } 20% { -webkit-transform: translate3d(0, 0%, 0rem); transform: translate3d(0, 0%, 0rem); } 80% { -webkit-transform: translate3d(0, 0%, 0rem); transform: translate3d(0, 0%, 0rem); } 90% { -webkit-transform: translate3d(0, -67%, -5rem); transform: translate3d(0, -67%, -5rem); } 100% { -webkit-transform: translate3d(0, -100%, 5rem); transform: translate3d(0, -100%, 5rem); }
}
@keyframes switch-slide { 0% { -webkit-transform: translate3d(0, 100%, 5rem); transform: translate3d(0, 100%, 5rem); } 10% { -webkit-transform: translate3d(0, 67%, 0rem); transform: translate3d(0, 67%, 0rem); } 20% { -webkit-transform: translate3d(0, 0%, 0rem); transform: translate3d(0, 0%, 0rem); } 80% { -webkit-transform: translate3d(0, 0%, 0rem); transform: translate3d(0, 0%, 0rem); } 90% { -webkit-transform: translate3d(0, -67%, -5rem); transform: translate3d(0, -67%, -5rem); } 100% { -webkit-transform: translate3d(0, -100%, 5rem); transform: translate3d(0, -100%, 5rem); }
}
@-webkit-keyframes defocus-slide { 10% { -webkit-filter: blur(6px); filter: blur(6px); } 18% { -webkit-filter: blur(6px); filter: blur(6px); } 28% { -webkit-filter: blur(0px); filter: blur(0px); } 72% { -webkit-filter: blur(0px); filter: blur(0px); } 82% { -webkit-filter: blur(6px); filter: blur(6px); }
}
@keyframes defocus-slide { 10% { -webkit-filter: blur(6px); filter: blur(6px); } 18% { -webkit-filter: blur(6px); filter: blur(6px); } 28% { -webkit-filter: blur(0px); filter: blur(0px); } 72% { -webkit-filter: blur(0px); filter: blur(0px); } 82% { -webkit-filter: blur(6px); filter: blur(6px); }
}

Fallout Slides - Script Codes JS Codes

var $slides = $(".slide");
var slideIndex = 0;
$slides.each(function (i, slide) { // pause all but the first slide if(i) $(slide).css({"animation-play-state": "paused"});
});
$slides.on("animationiteration", function (event) { // pause each slide after one iteration $(event.target).css({"animation-play-state": "paused"});
});
function switchSlide () { slideIndex = slideIndex < $slides.length - 1 ? slideIndex + 1 : 0; $($slides[slideIndex]).css({ "animation-play-state":"running" }); // start a slide every 5 / 3 * 2 seconds setTimeout(switchSlide, 5000 / 3 * 2);
}
setTimeout(switchSlide, 5000 / 3 * 2);
/* The blur filter looks really nice, but * very few devices can run it at a reasonable * speed. This script therefore removes the * blur filter if FPS is detected to be too * low for too long. */
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
var last = Date.now();
var d = document.getElementById("debug");
var slide = document.querySelector(".slide.defocus");
var attempts = 0;
var test;
function checkFPS () { test = raf(checkFPS); var time = Date.now(); var delta = time - last; last = time; if(delta > (1000/15)) { attempts++; } if(attempts > 25) { slide.classList.remove("defocus"); window.cancelAnimationFrame(test); }
}
checkFPS();
Fallout Slides - Script Codes
Fallout Slides - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 3.5
Size 5,381 Kb
Views 38,456
Do you need developer help for Fallout Slides?

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!

Moses Holmström (thykka) Script Codes
Name
Loader - Connect the dots
Freaky Shadow Effect
Flickering ANSI logo
Rotary control with value display
I long for quaternions....
Eclipse
Animated Unlock Tutorial
Orbit Loader
Thing
Esmes Vice Anim00ted SVG
Create amazing love letters with AI!

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!