We Don't Need No Stinking AJAX
How do I make an we don't need no stinking ajax?
So yeah, this is a super easy page transition effect I use on a couple of my sites. Without any AJAX-ification, of course. Let me know what you think.. What is a we don't need no stinking ajax? How do you make a we don't need no stinking ajax? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.
We Don't Need No Stinking AJAX - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>We Don't Need No Stinking AJAX</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <span class="loader"></span> <main> <article> <h1>Lorem Ipsum</h1> <p>Maecenas <a href="https://google.com">vel</a> tellus id orci porta semper. Fusce consequat erat eu erat commodo tempor. Vivamus in mauris vitae nibh malesuada vulputate sed tristique lorem. Donec rhoncus, eros quis pellentesque rhoncus, elit risus dictum dolor, sed vehicula elit ligula nec nisl. Aliquam vitae tellus neque. Phasellus sit amet nisi ac nisi viverra hendrerit at non erat. Etiam feugiat, mauris vitae malesuada malesuada, augue purus pharetra dui, et aliquet elit augue sed ipsum.</p> <p>Quisque viverra sagittis velit at eleifend. Etiam mollis mi eu nisl porttitor at congue massa feugiat. Donec placerat risus augue, vitae suscipit massa. Pellentesque id risus eget enim egestas pellentesque. Morbi vulputate feugiat tincidunt. Cras non nisi orci, ut faucibus est. Ut euismod velit purus. Nunc nisl lorem, vulputate a interdum nec, dapibus eget justo. Sed pulvinar vestibulum pharetra. Quisque vitae lorem at lorem dictum blandit. Vivamus tempus justo sed magna aliquet elementum. Sed adipiscing justo sed risus iaculis nec rutrum augue aliquet. Maecenas commodo feugiat pharetra.</p> </article> </main>
</body> <script src="js/index.js"></script>
</body>
</html>
We Don't Need No Stinking AJAX - Script Codes CSS Codes
/* Sexy body */
body { position: relative; width: 80%; max-width: 60rem; margin: 0 auto; color: #444;
}
/* Loading indicator */
.loader { display: block; width: 2rem; height: 2rem; position: absolute; top: 25%; left: 50%; margin: -1rem 0 0 -1rem; border: 5px solid transparent; border-left-color: #BADA55; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: rotate 1s linear 0s infinite normal; -moz-animation: rotate 1s linear 0s infinite normal; animation: rotate 1s linear 0s infinite normal;
}
/* Indicator keyframe animation */
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
/* Content */
main { opacity: 0; background: white; padding: 1rem 2rem; font-family: 'Avenir Next', sans-serif;
}
/* Quickly loaded states */
body.loaded main { -webkit-transition: .15s 1s opacity; /* .15s animation w/ 1s delay */ -moz-transition: .15s 1s opacity; /* .15s animation w/ 1s delay */ transition: .15s 1s opacity; /* .15s animation w/ 1s delay */ opacity: 1;
}
body.loaded .loader { visibility: hidden; -webkit-transition: 0s 1s visibility; /* 1s delay */ -moz-transition: 0s 1s visibility; /* 1s delay */ transition: 0s 1s visibility; /* 1s delay */
}
We Don't Need No Stinking AJAX - Script Codes JS Codes
// Fade Out function
function fadeOut(ms, el) { var opacity = 1, interval = 50, gap = interval / ms; function func() { opacity -= gap; el.style.opacity = opacity; if(opacity <= 0) { window.clearInterval(fading); el.style.display = 'none'; } } var fading = window.setInterval(func, interval);
}
// Define transition function
function loaded() { // Define our variables var docBody = document.body, anchors = document.getElementsByTagName('a'); // Add loaded class to body docBody.className += ' loaded'; // For each link for (var i = 0; i < anchors.length; i++) { // Click function anchors[i].onclick = function(e) { // Cache our anchor var el = this; // Stop default action e.preventDefault(); // Fade out body fadeOut(150, docBody); // Change page after fade out setTimeout( function() { location = el.href }, 150 ); } }
}
// Fire transition function
window.onload = loaded;
Developer | Kyle Foster |
Username | hkfoster |
Uploaded | September 04, 2022 |
Rating | 3.5 |
Size | 3,155 Kb |
Views | 32,384 |
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 |
A Pen by Kyle Foster | 2,404 Kb |
Manipulating SVG With CSS | 3,640 Kb |
Ken Burns Banner | 3,817 Kb |
Cattywompus - A Subtle Parallax Banner Plugin | 4,486 Kb |
SVG Optimization Breakdown | 8,022 Kb |
Messing Around with CSS3 Shadows | 2,202 Kb |
Rumble on Hover | 150,889 Kb |
Gradual.js | 2,685 Kb |
Askew - A Subtle Parallax Banner Plugin | 5,081 Kb |
Vanilla Flavored Unorphanize | 5,098 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 |
Buttons for autumn | Nikazawila | 1,795 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Ghost | Mghayour | 11,738 Kb |
CSS Infinite 360 | APinix | 5,564 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!