CodePen Embed - Spider

<div class="wrapper">

	<div id="spider">
		<div class="spider__inner">
			<span class="legs">
				<span class="legs--left">
					<span class="one"></span>
					<span class="two"></span>
					<span class="three"></span>
					<span class="four"></span>
				</span>
				<span class="legs--right">
					<span class="one"></span>
					<span class="two"></span>
					<span class="three"></span>
					<span class="four"></span>
				</span>
			</span>
			<span class="body"></span>
		</div>
	</div>

	<span class="drip">
		<img src="https://engage-codepen.s3.amazonaws.com/2016/spider/drip.png" alt="">
	</span>

	<span class="cobweb">
		<img src="https://engage-codepen.s3.amazonaws.com/2016/spider/web.png" alt="">
	</span>
	
</div>

<!-- <div class="engage">
	<p>Spider Animation | Mojo Bar's halloween update<br> by <a href="https://twitter.com/iamjamie">Jamie Wright</a> of <a href="https://engageinteractive.co.uk" class="logo">Engage</a>.</p>
</div> -->

@mixin pseudo($display: block, $pos: absolute, $content: ''){
	content: $content;
	display: $display;
	position: $pos;
}

%hardware {
	backface-visibility: hidden;
}

%creep {
	animation-name: creep;
	animation-duration: .2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

%creep-alt {
	animation-name: creep-alt;
	animation-duration: .2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

%body-creep {
	animation-name: body-creep;
	animation-duration: .2s;
	animation-timing-function: cubic-bezier(.365,.005,.355,1);
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes drip {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes creep {
	0%        { transform: rotate(-10deg); }
	70%, 100% { transform: rotate(8deg); }
}

@keyframes creep-alt {
	0%        { transform: rotate(8deg); }
	70%, 100% { transform: rotate(-10deg); }
}

@keyframes body-creep {
	0% {
		transform: rotate(2deg);
	}

	100% {
		transform: rotate(-2deg);
	}
}

html {
	font-size: 10px;
	background:#ffffff url("https://engage-codepen.s3.amazonaws.com/2016/spider/dots-blue.png") 0 0;
}

.wrapper {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
	height: 600px;
	background:#1B2240 url("https://engage-codepen.s3.amazonaws.com/2016/spider/dots-red.png") 0 0;
}

span {
	display: block;
}

#spider {
	z-index: 2000;
	position: absolute;
	top: -32rem; left: -42rem;
	width: 47.5rem;
	height: 52.6rem;
}

.spider__inner {
	position: relative;
	@extend %hardware;
	width: 47.5rem;
	height: 52.6rem;
	transform: scale(.4) rotate(90deg);

	.body, .one, .two, .three, .four {
		@include pseudo;
	}

	.body {
		@extend %body-creep;
		top: 16%; left: 36%;
		width: 14rem;
		height: 37.5rem;
		background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/body.png');
		transform: translate(-50%,-50%);
	}

	.legs {

		&--left {

			.one {
				@extend %creep;
				animation-delay: .25s;
				top: 4rem; left: 5.5rem;
				width: 13.8rem;
				height: 16.1rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-left-one.png');
				transform-origin: bottom right;
			}

			.two {
				@extend %creep-alt;
				top: 17.6rem; left: 1rem;
				width: 17.3rem;
				height: 7.6rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-left-two.png');
				transform-origin: bottom right;
			}

			.three {
				@extend %creep;
				animation-delay: .75s;
				top: 25.6rem; left: 3.4rem;
				width: 16.4rem;
				height: 5.8rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-left-three.png');
				transform-origin: center right;
			}

			.four {
				@extend %creep-alt;
				animation-delay: .5s;
				left: 8.1rem; bottom: 3rem;
				width: 13.1rem;
				height: 22.5rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-left-four.png');
				transform-origin: top right;
			}
		}

		&--right {

			.one {
				@extend %creep-alt;
				animation-delay: .75s;
				top: 4rem; right: 5.5rem;
				width: 14.6rem;
				height: 17.7rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-right-one.png');
				transform-origin: bottom left;
			}

			.two {
				@extend %creep;
				animation-delay: .25s;
				top: 14.3rem; right: 1rem;
				width: 17.7rem;
				height: 10.0rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-right-two.png');
				transform-origin: bottom left;
			}

			.three {
				@extend %creep-alt;
				animation-delay: .5s;
				top: 25rem; right: 3.8rem;
				width: 15.5rem;
				height: 5.7rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-right-three.png');
				transform-origin: center left;
			}

			.four {
				@extend %creep;
				bottom: 2rem; right: 6.4rem;
				width: 14rem;
				height: 23.3rem;
				background-image: url('https://engage-codepen.s3.amazonaws.com/2016/spider/leg-right-four.png');
				transform-origin: top left;
			}
		}
	}
}

.drip {
	position: absolute;
	top: -.6rem; left: -.1rem;
	animation-name: drip;
	animation-duration: 9s;
	animation-timing-function: cubic-bezier(.365,.005,.355,1);
}

.cobweb {
	position: absolute;
	top: 0; right: 0;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

.engage {
	position: relative;
	padding: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #333;
	font-smoothing: antialiased;
	text-shadow: 1px 1px 0 #FFF, 2px 2px 0 #FFF, 3px 3px 0 #FFF, 1px -1px 0 #FFF, 2px -2px 0 #FFF, 3px -3px 0 #FFF, -1px 1px 0 #FFF, -2px 2px 0 #FFF, -3px 3px 0 #FFF, -1px -1px 0 #FFF, -2px -2px 0 #FFF, -3px -3px 0 #FFF;
	
	p {
		overflow: hidden;
		height: 50px;	
	}
	
	a {
		color: #333;
		text-decoration: none;
	}
	
	.logo {
		position: relative;
		top: -2.95rem;
		display: inline-block;
		height: 51px;
		width: 58px;
		line-height: 0;
		font-size: 0;
		background: url(https://engage-codepen.s3.amazonaws.com/engage-black.svg)
	}
}

View Compiled


var sitewidth = 1000,
		siteheight = 800;

var rangeToRange = function(oldVal, oldMax, oldMin, newMax, newMin){
	return ( ( ( oldVal - oldMin ) * ( newMax - newMin ) ) / ( oldMax - oldMin ) ) + newMin;
};

	// Animates the Spider for the halloween landing page

	var $spider = $('#spider'),
		spiderWidth = $spider.width(),
		spiderHeight = $spider.height();

	var ps = function(x, y){

		var values = {
			x: rangeToRange(x, 100, 0, sitewidth + spiderWidth, 0),
			y: rangeToRange(y, 100, 0, siteheight + spiderHeight, 0)
		};

		return values;

	};

	var spiderAnimate = function(){

		TweenMax
			.to($spider, 8, {
				bezier: {
					type: 'soft',
					values: [
						ps(0, 10),
						ps(20, 30),
						ps(60, -10)
					],
					autoRotate: true
				},
				ease: Power1.easeInOut,
				force3D: true
			});

		TweenMax
			.to($spider, 8, {
				bezier: {
					type: 'soft',
					values: [
						ps(0, 40),
						ps(110, 40)
					],
					autoRotate: true
				},
				ease: Power1.easeInOut,
				delay: 7,
				force3D: true,
				onComplete: function(){

					TweenMax
						.set($spider, {
							x: 0,
							y: 0
						});

					setTimeout(spiderAnimate, 2000);

				}
			});

	};

	spiderAnimate();

Run Pen

This Pen is owned by Jamie Wright on CodePen.

See more by @iamjamie on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript