Superhero Project

In this example below you will see how to do a Superhero Project with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by avery_potter, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright avery_potter ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Superhero Project</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <title> Superhero Project! </title>
</head>

<body>
  <h1 id="title"> It's Elsa! </h1>
  
  <img id="elsa"src="https://lumiere-a.akamaihd.net/v1/images/quiz-anna-or-elsa-elsa_0df95cf3.jpeg?width=642" class="dragme">
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/avery_potter/superhero-project-YpwVpp */
#title{
  color:rgb(9, 204, 252);
  text-align: center;
  font-family: 'Lobster', cursive;
    
}

#elsa {
  position: center;
  border: double 15px white; 
  margin-left: 25%;
}

body {
	background-color: rgb(53, 127, 222);
}

body::before {
	content: 'Click!';
	display: block;
	color: #777;
	text-align: center;
	font-family: helvetica, arial, sans-serif;
	font-weight: 900;
	padding-top: 10px;
}

.deco-snowflake {
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.4%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%22128px%22%20height%3D%22128px%22%20viewBox%3D%220%200%20128%20128%22%20style%3D%22enable-background%3Anew%200%200%20128%20128%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23ABE0FF%3B%22%20d%3D%22M115.888%2C78.761l-4.958-2.842l-10.991%2C6.288l-0.782%2C0.003l-4.496-2.604l11.336-6.507l-4.551-2.639%0D%0A%09l-0.821%2C0.003l-10.961%2C6.292l-9.273-5.32l5.768-3.3l0.779%2C0.018l4.039%2C2.302l4.972-2.83l-4.423-2.543l4.604-2.648l-4.544-2.659%0D%0A%09l-0.78-0.007l-4.261%2C2.438l-6.325-3.713l9.456-5.426l10.992%2C6.31l0.78%2C0.006l4.561-2.654l-11.336-6.529l4.901-2.812l11.712%2C6.342%0D%0A%09l4.582-2.71l-11.312-6.487l11.25-6.458l-2.464-4.243l-11.187%2C6.34l-0.107-0.05l-0.549-12.901L96%2C30.057v12.6l0.162%2C0.672%0D%0A%09l-4.245%2C2.555l0.111-12.997l-4.874%2C2.839l0.043%2C12.595l-0.374%2C0.674l-8.896%2C5.072l-0.005-6.51l4.432-3.306l-0.026-5.388%0D%0A%09l-4.392%2C2.458l-0.009-5.238l-4.573%2C2.577l-0.389%2C0.679l-0.003%2C4.463l-1.163%2C0.644L65%2C47.812V36.915l11.783-6.303l0.774-0.638%0D%0A%09l0.149-5.264l-11.229%2C6.492l0.041-5.182l0.445-0.705l10.542-6.038l0.435-0.751l-0.813-5.178L65%2C19.873V7h-3.4l-0.049%2C12.849%0D%0A%09l-11.283-6.496l-0.033%2C5.142l0.482%2C0.815l10.861%2C6.253l-0.711%2C5.556L49%2C24.68v5.706l11.929%2C6.48L61.196%2C47.5l-5.89-3.46l0.084-4.67%0D%0A%09l-1.051-0.603L49%2C36.149v5l-4-2.512v5.593l4.753%2C2.49l0.528%2C0.525l0.045%2C6.926l-9.437-5.444l0.034-12.602l-0.366-0.684l-4.597-2.59%0D%0A%09l-0.013%2C13.01l-4.907-2.816l-0.008-12.603L30.12%2C29.76L25%2C27.167v13.016l-10.71-6.445l-2.221%2C4.276l11.389%2C6.466l-11.309%2C6.508%0D%0A%09l4.993%2C2.845l11.362-6.488l4.848%2C2.845l-11.269%2C6.469l4.977%2C2.854l11.371-6.519l9.276%2C5.318l-5.84%2C3.404L41.298%2C61.7l-4.122-2.368%0D%0A%09l-4.991%2C2.837l4.427%2C2.548l-4.625%2C2.656l4.954%2C2.868l4.663-2.664l6.358%2C3.633l-9.538%2C5.473l-11.387-6.527l-4.971%2C2.852l11.379%2C6.531%0D%0A%09l-4.92%2C2.823l-11.39-6.513l-4.957%2C2.846l11.378%2C6.518l-11.262%2C6.461l2.459%2C4.231l10.666-6.32L25%2C89.64v12.887l5-2.834V87.08%0D%0A%09l0.403-0.641L35%2C83.848v13.021l5.416-2.84l0.219-12.573l-0.057-0.712L49%2C75.702v7.021l-4%2C2.519v5.703l4-2.511v5.276l5.197-2.579%0D%0A%09l0.674-0.68l0.142-4.88l6.434-3.688l0.031%2C10.742l-0.159%2C0.306l-10.765%2C6.185l-0.407%2C0.711l-0.705%2C5.214L60%2C98.562v5.644%0D%0A%09l-10.547%2C6.504l-0.333%2C5.658L60%2C109.895V122h5v-12.116l12.13%2C6.517l0.381-5.173l-1.012-0.749L65%2C104.194v-5.61l12.078%2C6.488%0D%0A%09l0.424-5.238l-0.205-0.677l-10.864-6.288l-0.208-10.585L72%2C85.749v4.66l-0.165%2C0.609L76%2C93.657v-5.033l5.404%2C2.624l-0.357-5.396%0D%0A%09L76%2C82.911V75.59l9.835%2C5.143l0.911%2C0.859l0.19%2C12.047l0.499%2C0.674l4.579%2C2.554l0.072-0.083l0.075-12.8l0.077-0.028l4.402%2C2.502%0D%0A%09l0.42%2C0.709l-0.245%2C12.751l4.185%2C2.596V89.556l11.777%2C6.456l2.738-4.278l-11.129-6.462L115.888%2C78.761z%20M52.711%2C68.249l-6.096-3.542%0D%0A%09l6.084-3.49l6.331%2C3.636L52.711%2C68.249z%20M61.233%2C76.391L55.195%2C79.8l-0.033-6.511l0.39-0.676l5.99-3.388l0.035%2C6.558L61.233%2C76.391z%0D%0A%09%20M60%2C60.593l-6-3.481v-7.337l6%2C3.495V60.593z%20M65%2C53.595l7.117-3.627l-0.615%2C7.151L65%2C60.575V53.595z%20M71%2C79.98l-4.961-3.275%0D%0A%09l0.075-0.517L65.544%2C69.2L71%2C72.675V79.98z%20M75.17%2C68.438l-6.098-3.541l6.081-3.49l6.353%2C3.642L75.17%2C68.438z%22/%3E%0D%0A%3C/svg%3E%0D%0A');
}

.dragme{
  position:relative;
  width: 450px;
  height: 300px;
  cursor: pointer;
}
div{
  height:250px;
  width:500px;
  background-size:100%;
}

/*Downloaded from https://www.codeseek.co/avery_potter/superhero-project-YpwVpp */
document.addEventListener('DOMContentLoaded', function domLoaded() {
  document.addEventListener('click', function clickHandler(evt) {
		Snowflake.burst(evt.clientX, evt.clientY, 12);
	});
	Ticker.addListener(Snowflake.step);
	
	// show initial burst for preview!
	setTimeout(function initialBurst() {
		Snowflake.burst(window.innerWidth * 0.5, window.innerHeight * 0.3, 30);
	}, 200);
});

// snowflake constructor
function Snowflake() {
	this.node = document.createElement('div');
	this.node.classList.add('deco-snowflake');
	this.node.style.position = 'fixed';
}
// initialize a snowflake
Snowflake.prototype.init = function init(x, y, angle_ratio) {
	// track snowflake life in ms
	this.life = 0;
	this.lifespan = Math.random() * 1500 + 1500;
	// top-left fixed position in px
	this.x = x;
	this.y = y;
	// size in px
	this.radius = Math.floor(Math.random() * 10 + 8);
	// starting rotation in degrees
	this.rotation = Math.random() * 360;
	// velocities
	var launch_speed = Math.random() * 6;
	var launch_angle = angle_ratio * Math.PI * 2;
	this.speed_x = Math.sin(launch_angle) * launch_speed;
	this.speed_y = -Math.cos(launch_angle) * launch_speed;
	this.speed_rot = Math.random() * 4 - 2;
	this.gravity = 1.5;
	// apply initial styles
	this.node.style.width = this.radius * 2 + 'px';
	this.node.style.height = this.radius * 2 + 'px';
	// show properties
	this.render();
};

// apply styles
Snowflake.prototype.render = function render() {
	this.node.style.left = this.x - this.radius + 'px';
	this.node.style.top = this.y - this.radius + 'px';
	this.node.style.transform = 'rotate(' + this.rotation + 'deg)';
};

// get a new, initialized snowflake instance
Snowflake.new = function newSnowflake(x, y, angle_ratio) {
	var s = Snowflake.pool.pop() || new Snowflake();
	s.init(x, y, angle_ratio);
	document.body.appendChild(s.node);
	Snowflake.active.push(s);
	return s;
};
// destroy snowflake; return to pool
Snowflake.prototype.kill = function killSnowflake(index) {
	var Snowflake = window.Snowflake;
	
	Snowflake.active.splice(index, 1);
	Snowflake.pool.push(this);
	document.body.removeChild(this.node);
};

// maintain array of active snowflakes, and an inactive pool
Snowflake.active = [];
Snowflake.pool = [];

// create a burst of snowflakes!
Snowflake.burst = function burst(x, y, count) {
	if (!x && !y) return;
	for (var i=0; i < count; i++) {
		Snowflake.new(x, y, i/count);
	}
};


// animation loop
Snowflake.step = function snowflakeStep(time, lag) {
	var Snowflake = window.Snowflake;
	
	// loop backwards since snowflakes may be removed
	for (var i = Snowflake.active.length-1; i >= 0; i--) {
		var s = Snowflake.active[i];
		s.life += time;
		if (s.life < s.lifespan) {
			s.x += s.speed_x * lag;
			s.y += (s.speed_y + s.gravity) * lag;
			s.rotation += s.speed_rot * lag;
			s.render();
			var damp = 1 - (0.05 * lag);
			s.speed_x *= damp;
			s.speed_y *= damp;
		}else{
			// kill snowflake
			s.kill(i);
		}
	}
};


// Frame ticker helper class
var Ticker = (function(){
	var PUBLIC_API = {};

	// public
	// will call function reference repeatedly once registered, passing elapsed time and a lag multiplier as parameters
	PUBLIC_API.addListener = function addListener(fn) {
		if (typeof fn !== 'function') throw('Ticker.addListener() requires a function reference passed in.');

		listeners.push(fn);

		// start frame-loop lazily
		if (!started) {
			started = true;
			queueFrame();
		}
	};

	// private
	var started = false;
	var last_timestamp = 0;
	var listeners = [];
	// queue up a new frame (calls frameHandler)
	function queueFrame() {
		if (window.requestAnimationFrame) {
			requestAnimationFrame(frameHandler);
		} else {
			webkitRequestAnimationFrame(frameHandler);
		}
	}
	function frameHandler(timestamp) {
		var frame_time = timestamp - last_timestamp;
		last_timestamp = timestamp;
		// make sure negative time isn't reported (first frame can be whacky)
		if (frame_time < 0) {
			frame_time = 17;
		}
		// - cap minimum framerate to 15fps[~68ms] (assuming 60fps[~17ms] as 'normal')
		else if (frame_time > 68) {
			frame_time = 68;
		}

		// fire custom listeners
		for (var i = 0, len = listeners.length; i < len; i++) {
			listeners[i].call(window, frame_time, frame_time / 16.67);
		}
		
		// always queue another frame
		queueFrame();
	}

	return PUBLIC_API;
}());

function startDrag(e) {
           

            var targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }

        
        
        // The second superhero javascript
 $('div').on('click', function(){
  $(this).toggleClass('show-description');
});

Comments