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 |
Login with flip 3d animation | 3,012 Kb |
Responsive HTML5 Map | 2,627 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 |
CSS Variables | Jdsteinbach | 4,759 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Em Test | Rodesco | 1,784 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Animated bar chart | CreativePunch | 3,124 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!