netmin-net

Animated Background

Full-page background made with JavaScript and Canvas: the animation follows movement on non-touch devices

Based on: http://tympanus.net/Development/AnimatedHeaderBackgrounds/

Cat vs ball of wool

WebGL Demo using ThreeJs. With inverse kinematics, physics and a lot of cat psychology :) This cat is a 3D remake of the main character of "Babel, the cat who would be king", a children app I did some time ago. Find it here : http://babeltheking.com/ Enjoy!

A Pen by Karim Maaloul on CodePen.

License.

Firewatch Parallax in CSS

I recreated the parallax header on the Firewatch website in CSS. It was originally meant as a daft experiment but it seems to have blown-up.

I've base-64 encoded the images to avoid hot-linking to the Firewatch site.

A Pen by Sam Beckham on CodePen.

License.

Full Page Parallax Scroll Effect

A lightweight full page parallax scroll effect.

A Pen by Emily Hayman on CodePen.

License.

pen#PwLXXP

Hi, I'm just your average pen. Kinda new here, just lookin' for frenz.

UPDATE: My cousin pen#JoVrdw joined CodePen!

A Pen by Jake Albaugh on CodePen.

License.

	<div id="world"/>

	<div id="credits">
	- Press and drag to turn around -
	<p><a href="https://codepen.io/Yakudoo/" target="blank">my other codepens</a> \| <a href="https://www.epic.net" target="blank">epic.net</a> \| <a href="http://www.meusinvest.be/2016/" target="blank">Created initially for this project</a></p>
	</div>


	<!-- project url https://github.com/wagerfield/parallax/</br> -->
	<!-- full demo https://wagerfield.github.io/parallax/ -->
	<html class="mouse">
	<body>
	<div id="container" class="wrapper">
	<ul id="scene" class="scene unselectable" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15" style="width: 1680px; height: 569px; -webkit-transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
	<li class="layer" data-depth="0.00" style="position: relative; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0%, 0%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"></li>
	<li class="layer" data-depth="0.10" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.29761904761904784%, -1.4893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div c

	<div class="landscape"></div>
	<div class="filter"></div>
	<canvas id="canvas"></canvas>