Animated 404
How do I make an animated 404?
Geometry sphere is from http://codepen.io/Mombasa/pen/fvgqbWarning: May contains ugly css, done while sleeping.. What is a animated 404? How do you make a animated 404? This script and codes were developed by Afiq Xilantra on 12 June 2022, Sunday.
Animated 404 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated 404</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="mega">4<span class="boom">0</span>4<div class="bola">
</div></p>
<p class="mini">That's an error.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated 404 - Script Codes CSS Codes
body { background: #f5f5f5; font-family: 'Roboto', sans-serif;}
.mini { font-size: 1em; color: #000; line-height: 9em; text-indent: 2.5em; position: absolute; left: 50%; top: 50%;
}
.mega, .bola{ line-height: 1.65em; font-weight: bold; font-size: 11em; color: black; font-family: 'Roboto', sans-serif; width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;}
.boom {color: #f5f5f5; }
Animated 404 - Script Codes JS Codes
var $container = $('.bola');
var renderer = new THREE.WebGLRenderer({antialias: true});
var camera = new THREE.PerspectiveCamera(80,1,0.1,10000);
var scene = new THREE.Scene();
scene.add(camera);
renderer.setSize(300,300);
$container.append(renderer.domElement);
///////////////////////////////////////////////
// Camera
camera.position.z = 200;
// Material
var pinkMat = new THREE.MeshPhongMaterial({ color : new THREE.Color("rgb(226,35,213)"), emissive : new THREE.Color("rgb(0,0,0)"), specular : new THREE.Color("rgb(255,155,255)"), shininess : 100, shading : THREE.FlatShading, transparent: 1, opacity : 1
});
var L1 = new THREE.PointLight( 0xffffff, 1);
L1.position.z = 100;
L1.position.y = 100;
L1.position.x = 100;
scene.add(L1);
var L2 = new THREE.PointLight( 0xffffff, 0.8);
L2.position.z = 200;
L2.position.y = 400;
L2.position.x = -100;
scene.add(L2);
// IcoSphere -> THREE.IcosahedronGeometry(80, 1) 1-4
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75,1), pinkMat);
Ico.rotation.z = 0.5;
scene.add(Ico);
function update(){ Ico.rotation.x+=2/100; Ico.rotation.y+=2/100;
}
// Render
function render() { requestAnimationFrame(render); renderer.render(scene, camera); update();
}
render();
Developer | Afiq Xilantra |
Username | Afiq |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 2,456 Kb |
Views | 44,528 |
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 |
Infinite Scroll Lazy Loading Gallery With Simple jQuery | 2,552 Kb |
Responsive HTML5 Map | 2,627 Kb |
Animated 404 | 2,456 Kb |
Login with flip 3d animation | 3,012 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 |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Hmmm... | Rk007 | 4,848 Kb |
Video mute | Leon9208 | 2,131 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
React Template | Isac | 1,241 Kb |
Wikipedia Viewer | Thalpha | 4,426 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!