We Don't Need No Stinking AJAX

Developer
Kyle Foster
Size
3,155 Kb
Views
32,384
  1. We Don't Need No Stinking AJAX Previews
  2. We Don't Need No Stinking AJAX HTML Codes
  3. We Don't Need No Stinking AJAX CSS Codes
  4. We Don't Need No Stinking AJAX JS Codes

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 Previews
IQ Test

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;
We Don't Need No Stinking AJAX - Script Codes
We Don't Need No Stinking AJAX - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 3.5
Size 3,155 Kb
Views 32,384
Do you need developer help for We Don't Need No Stinking AJAX?

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!

Kyle Foster (hkfoster) Script Codes
Name
Slimslider.js
Vanilla FlowType.js
SVG Optimization Breakdown
Askew - A Subtle Parallax Banner Plugin
JQuery vs. Native JS Selectors
Smart Fixed Header
Freemason.js
Rift.js
Super Simple Fader
Manipulating SVG With CSS
Create amazing captions 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!