DOM Tree

Developer
Hakim El Hattab
Size
3,349 Kb
Views
18,216
  1. DOM Tree Previews
  2. DOM Tree HTML Codes
  3. DOM Tree CSS Codes
  4. DOM Tree JS Codes

How do I make an dom tree?

What is a dom tree? How do you make a dom tree? This script and codes were developed by Hakim El Hattab on 24 September 2022, Saturday.

DOM Tree Previews
IQ Test

DOM Tree - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>DOM Tree</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="tree"></div> <script src="js/index.js"></script>
</body>
</html>

DOM Tree - Script Codes CSS Codes

body, html {	overflow: hidden;	font-family: Helvetica, Arial, sans-serif;	color: #fff;	font-size: 11px;	width: 100%;	height: 100%;	background: #b72424;	background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));	background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);	background: -o-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);	background: -ms-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);	background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
}
/********************************************* * DOM TREE *********************************************/
@-webkit-keyframes spin {	0% { -webkit-transform: rotateY( 0deg ); }	100% { -webkit-transform: rotateY( 360deg ); }
}
@-moz-keyframes spin {	0% { -moz-transform: rotateY( 0deg ); }	100% { -moz-transform: rotateY( 360deg ); }
}
@-ms-keyframes spin {	0% { -ms-transform: rotateY( 0deg ); }	100% { -ms-transform: rotateY( 360deg ); }
}
@-o-keyframes spin {	0% { -o-transform: rotateY( 0deg ); }	100% { -o-transform: rotateY( 360deg ); }
}
@keyframes spin {	0% { transform: rotateY( 0deg ); }	100% { transform: rotateY( 360deg ); }
}
body {	-webkit-perspective: 3000px; -moz-perspective: 3000px; -ms-perspective: 3000px; -o-perspective: 3000px; perspective: 3000px;	-webkit-perspective-origin: 0 20%; -moz-perspective-origin: 0 20%; -ms-perspective-origin: 0 20%; -o-perspective-origin: 0 20%; perspective-origin: 0 20%;
}
.tree {	margin: 0 auto;	position: relative;	-webkit-animation: spin 18s infinite linear; -moz-animation: spin 18s infinite linear; -ms-animation: spin 18s infinite linear; -o-animation: spin 18s infinite linear; animation: spin 18s infinite linear;	-webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
}
.tree * {	position: absolute;	-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
}

DOM Tree - Script Codes JS Codes

(function(){	var supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined ||	document.body.style['WebkitPerspective'] !== undefined ||	document.body.style['MozPerspective'] !== undefined ||	document.body.style['msPerspective'] !== undefined ||	document.body.style['OPerspective'] !== undefined;	if( !supports3DTransforms ) {	alert( 'Your browser doesn\'t support CSS3 3D transforms :/' );	}	function transform( element, value ) {	element.style.WebkitTransform = value;	element.style.MozTransform = value;	element.style.msTransform = value;	element.style.OTransform = value;	element.style.transform = value;	}	var width = 250,	height = 300,	quantity = 120,	types = [ 'text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox' ],	greetings = [ 'Joyeuses Fêtes','Felices Fiestas','God Jul','Boas Festas','Mutlu Bayramlar','Sarbatori Fericite','Jie Ri Yu Kuai','Bones Festes','Tanoshii kurisumasu wo','Buone Feste','Happy Holidays', 'Ii holide eximnandi','Frohe Feiertage','Prettige feestdagen','Beannachtaí na Féile','Vesele Praznike','Selamat Hari Raya','Sretni praznici' ];	var tree = document.querySelector( '.tree' ),	treeRotation = 0;	tree.style.width = width + 'px';	tree.style.height = height + 'px';	window.addEventListener( 'resize', resize, false );	// The tree	for( var i = 0; i < quantity; i++ ) {	var element = null,	type = types[ Math.floor( Math.random() * types.length ) ],	greeting = greetings[ Math.floor( Math.random() * greetings.length ) ];	var x = width/2,	y = Math.round( Math.random() * height );	var rx = 0,	ry = Math.random() * 360,	rz = -Math.random() * 15;	var elemenWidth = 5 + ( ( y / height ) * width / 2 ),	elemenHeight = 26;	switch( type ) {	case 'button':	element = document.createElement( 'button' );	element.textContent = greeting;	element.style.width = elemenWidth + 'px';	element.style.height = elemenHeight + 'px';	break;	case 'progress':	element = document.createElement( 'progress' );	element.style.width = elemenWidth + 'px';	element.style.height = elemenHeight + 'px';	if( Math.random() > 0.5 ) {	element.setAttribute( 'max', '100' );	element.setAttribute( 'value', Math.round( Math.random() * 100 ) );	}	break;	case 'select':	element = document.createElement( 'select' );	element.setAttribute( 'selected', greeting );	element.innerHTML = '<option>' + greetings.join( '</option><option>' ) + '</option>';	element.style.width = elemenWidth + 'px';	element.style.height = elemenHeight + 'px';	break;	case 'meter':	element = document.createElement( 'meter' );	element.setAttribute( 'min', '0' );	element.setAttribute( 'max', '100' );	element.setAttribute( 'value', Math.round( Math.random() * 100 ) );	element.style.width = elemenWidth + 'px';	element.style.height = elemenHeight + 'px';	break;	case 'radio':	element = document.createElement( 'input' );	element.setAttribute( 'type', 'radio' );	if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );	break;	case 'checkbox':	element = document.createElement( 'input' );	element.setAttribute( 'type', 'checkbox' );	if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );	break;	case 'text':	default:	element = document.createElement( 'input' );	element.setAttribute( 'type', 'text' );	element.setAttribute( 'value', greeting );	element.style.width = elemenWidth + 'px';	element.style.height = elemenHeight + 'px';	}	transform( element, 'translate3d('+x+'px, '+y+'px, 0px) rotateX('+rx+'deg) rotateY('+ry+'deg) rotateZ('+rz+'deg)' );	tree.appendChild( element );	}	// The snow	for( var i = 0; i < 120; i++ ) {	var element = document.createElement( 'input' );	element.setAttribute( 'type', 'radio' );	var spread = width * 4;	var x = Math.round( Math.random() * spread ) - ( spread / 4 ),	y = Math.round( Math.random() * height ),	z = Math.round( Math.random() * spread ) - ( spread / 2 );	var rx = 0,	ry = Math.random() * 360,	rz = 0;	if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );	transform( element, 'translate3d('+x+'px, '+y+'px, '+z+'px) rotateX('+rx+'deg) rotateY('+ry+'deg) rotateZ('+rz+'deg)' );	tree.appendChild( element );	}	function resize() {	tree.style.top = ( ( window.innerHeight - height - 20 ) / 2 ) + 'px';	}	resize();
})()
DOM Tree - Script Codes
DOM Tree - Script Codes
Home Page Home
Developer Hakim El Hattab
Username hakimel
Uploaded September 24, 2022
Rating 4.5
Size 3,349 Kb
Views 18,216
Do you need developer help for DOM Tree?

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!

Hakim El Hattab (hakimel) Script Codes
Name
Cloudy Spiral CSS animation
Avgrund
Flexing pagination arrows
Bakemono
Waves
Trail
Blob
Spiral
Animated Line Chart
Fokus
Create amazing art & images 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!