A Pen by Mark Peck

Developer
Mark Peck
Size
2,619 Kb
Views
26,312
  1. A Pen by Mark Peck Previews
  2. A Pen by Mark Peck HTML Codes
  3. A Pen by Mark Peck CSS Codes
  4. A Pen by Mark Peck JS Codes

How do I make an a pen by mark peck?

What is a a pen by mark peck? How do you make a a pen by mark peck? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

A Pen by Mark Peck Previews
IQ Test

A Pen by Mark Peck - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Mark Peck</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="box">	<div id="jesse"></div>	<div class="laser"></div>	<ul class="left">	<li class="smoke">	<li class="smoke">	<li class="smoke">	</ul>	<ul class="right">	<li class="smoke">	<li class="smoke">	<li class="smoke">	</ul>
</div>
<input style="display:none;" type="button" id="button" value="new epic bg"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://www.tinybigideas.com/assets/demo/jquery-gravity/jGravity-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Mark Peck - Script Codes CSS Codes

body { background: url(http://www.slate.com/content/dam/slate/blogs/browbeat/2012/05/11/KongGif2.gif.CROP.original-original.gif) no-repeat center center fixed; /* background: url(http://www.geekpeeks.com/wp-content/uploads/2011/05/dinosaursvsaliens_20110510162839.jpg) no-repeat center center fixed; */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#button { position: absolute; top: 0; right: 0; display: block; background: #fab; width: 200px; height: 80px; line-height: 40px; border: 0; cursor: pointer;
}
#box { width: 121px; height: 180px; position: absolute; bottom: 0; cursor: pointer;
}
#jesse { width: 121px; height: 180px; background: url(https://i.imgur.com/SsvYh1I.png) no-repeat center center; background-size: cover; position: absolute; left: 0; top: 0; z-index: 2;
}
.smoke { display: none; width: 20px; height: 20px; background: orange; border-radius: 20px; position: absolute;
}
.smoke.active { display: block;
}
ul {	width: 20px;	height: 50px;	position: relative;	float: right;	top: 100px;	right: -24px;	z-index: 1;
}
.smoke:nth-child(1) { bottom: 50px; -webkit-animation: smoke .5s infinite;
}
.smoke:nth-child(2) { bottom: 20px; -webkit-animation: smoke .3s infinite; animation-delay: 1s;
}
.smoke:nth-child(3) { bottom: 30px; -webkit-animation: smoke .1s infinite; animation-delay: 0s;
}
ul.left li {	margin-left: -30px;
}
@-webkit-keyframes smoke { 0% { -webkit-transform: translateY(30px); opacity: 1; } 100% { -webkit-transform: translateY(60px); opacity: 0; }
}
.laser { -webkit-animation: laser .5s infinite; animation-delay: 0s; width: 40px; height: 4px; background: red; display: none; position: absolute; left: 24px; top: 10px; box-shadow: 0 0 25px red; z-index: 3;
}
@-webkit-keyframes laser { 0% { -webkit-transform: translateX(0px); opacity: 1; } 100% { -webkit-transform: translateX(-3000px); opacity: 0; }

A Pen by Mark Peck - Script Codes JS Codes

$('#box').jGravity({ target: '#box', ignoreClass: 'ignoreMe', weight: 25, depth: 5, drag: true
});
$('#box').mousedown(function () { $('.smoke').addClass('active');
});
$('#box').mouseup(function () { $('.smoke').removeClass('active');
});
$(window).keypress(function(e) { if (e.which === 32) { $('.laser').show(); }
});
$(window).keyup(function(e) { if (e.which === 32) { $('.laser').hide(); }
});
A Pen by Mark Peck - Script Codes
A Pen by Mark Peck - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 3
Size 2,619 Kb
Views 26,312
Do you need developer help for A Pen by Mark Peck?

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!

Mark Peck (doodlemarks) Script Codes
Name
Basic line animation vivus
Automated Browser Mockup
Bootstrap Styleguide
Hexagons in CSS
CSS Navigation Menu
Very Simple Slider
Refract Light Overlay
Subtle Wiggle Animation
3D Styled CSS Browser Mockup
Crown Loader Animation
Create amazing love letters 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!