LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Move your mouse left or right to see some action


by Alberto Hartzet

CSS
/* General stuff */
	* {
		transition: all .25s linear;
	}

	html {
		width: 100%;
		heigth: 100%;
	}

	body {
		width: 100%;
		height: 100%;	
		background: url(https://dl.dropboxusercontent.com/u/12646264/assets/airplane-back.jpg);
		background-size: cover;
		animation: back 20s infinite;
		-webkit-animation: back 20s infinite;
		-moz-animation: back 20s infinite;
		-o-animation: back 20s infinite;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
		-o-animation-timing-function: linear;
		overflow: hidden;
	}


/* The background animation */

	@-webkit-keyframes back {
		from {background-position-y: bottom;}
		to {background-position-y: top;}
	}


/* The airplane image */
	#im-container {
		width: 35%;
		height: 40%;
		max-width: 300px;
		max-height: 330px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: url(https://dl.dropboxusercontent.com/u/12646264/assets/airplane-shadow.png)no-repeat bottom right;
		background-size: 20%;
		transition: all 10s cubic-bezier(.5, .025, .005, 2);
		-webkit-transition: all 10s cubic-bezier(.5, .025, .005, 2);
		-moz-transition: all 10s cubic-bezier(.5, .025, .005, 2);
		-o--transition: all 10s cubic-bezier(.5, .025, .005, 2);
	}

	#airplane {
		display: block;
		width: 80%;
		height: auto;
		margin: auto;
	}


/* The hover animation */

	.action {
		  position: absolute;
		  z-index: 1;
		  height: 100%;	
	}

	.action.left,
	.action.right { 
		width: 40%;
	}

	.action.middle {
		width: 20%;
		right: 0;
		left: 0;
		margin: auto;
	}

	/* The direction anchors */

	.left {	
		left: 0; 
		cursor: url(https://dl.dropboxusercontent.com/u/12646264/assets/pointer-left.png), w-resize;
	}

	.middle {
		cursor: url(https://dl.dropboxusercontent.com/u/12646264/assets/pointer-center.png), w-resize;
	}

	.right { right: 0;
		cursor: url(https://dl.dropboxusercontent.com/u/12646264/assets/pointer-right.png), w-resize;
	}

	.right:hover ~ #im-container {
	  transform: translateX(120%) rotateZ(2deg);
	}

	/* Actualy moving the airplane */

	.left:hover ~ div {
	  transform: translateX(-120%) rotateZ(-2deg);
	}

/* Hint */

	#hint {
		position: fixed;
		z-index: 9;
		bottom: 10%;
		left: 0;
		right: 0;
		width: 100%;
		height: 50px;
		margin: auto;
		font-family: 'Open sans', 'Lato', 'Helvetica' , sans-serif;
		font-size: 11px;
		color: white;
		text-align: center;
		line-height: 1;
	}

	#hint * {
		padding: 0px;
		margin: 0px;
	}

	#hint h3 {
		font-weight: 100;
	}

	.credit {
		font-weight: 800;
	}

	.credit a {
		color: black;
		text-decoration: none;
		cursor: pointer !important;
		transition: all .15s linear;
		background: url(https://dl.dropboxusercontent.com/u/12646264/assets/open-in-new-window-icon.png)no-repeat right;
		background-size: 12px;
		padding-right: 20px !important;
		-filter: invert(1);
		-webkit-filter: invert(1);
		-moz--filter: invert(1);
	-o--filter: invert(1);

	}

	.credit a:hover {
		color: deepskyblue;
	}


/* This is only for a nice thumbnail on the codepen repository and guys without monster screens like mine */

	@media all and (max-height: 500px) {
		#hint {
			bottom: 75%;
			line-height: 1;
			font-size: 14px;
		}

		#hint p {
			display: none;
		}

		#airplane {
			height: 70% !important;
			display: block;
			width: auto;
		}
	}



JS
/*
Please give credit if you use this.
Fork it instead of copying it.
*/

Description

Just an idea for achieving some user interaction to improve UX using only CSS.
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv