Kedvcsináló a GreenSock animation platformjához.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
	<title>CSS animation</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">
</head>
<body>


	<div class="animation-wrapper">
		<div class="title">cyrex.hu</div>
		<div class="letters">
			<span>w</span><span>e</span><span>b</span><span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span>
			<span>b</span><span>l</span><span>o</span><span>g</span>
		</div>
	</div>

	<div class="buttons">
		<button id="restart">RESTART</button>
		<button id="pause">PAUSE</button>
		<button id="resume">RESUME</button>
		<button id="reverse">REVERSE</button>
		<button id="slogan">SLOGAN</button>
	</div>

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

</body>
</html>

CSS forráskód


* { margin: 0; padding: 0; border: 0; outline: 0 }
body {
	background: url('bg.jpg') no-repeat center center fixed;
	background-size: cover;
	font-family: 'Open Sans'
}
.animation-wrapper {
	margin: 150px auto 0 auto;
	display: table
}
.title {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	font-size: 160px;
	font-weight: 800;
	text-shadow: 5px 5px 0 rgba(255,255,255,0.3);
	-webkit-mask-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.7));
	line-height: 1.2
}
.letters {
	text-align: center;
	color: #bbe300;
	text-transform: uppercase;
	padding: 10px
}
.letters span {
	font-weight: 800;
	font-size: 24px;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.2)
}

.buttons {
	margin: 30px 0 0 0;
	text-align:center
}
button {
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
	opacity: .2
}
button:hover { opacity:1 }

JS forráskód


var tl = new TimelineLite();
tl.fromTo(".title",1,{ y:-500 },{ y:0,ease: Bounce.easeOut })
  .fromTo(".letters",1,{scale:0},{rotation:360, scale:1, backgroundColor:"rgba(255,255,255,0.1)", borderRadius:20},"slogan")
  .staggerFrom(".letters span",1,{autoAlpha:0},0.1);
  

$("#restart").click(function() {
	tl.play(0)
});

$("#pause").click(function() {
	tl.stop()
});

$("#resume").click(function() {
	tl.resume()
});

$("#reverse").click(function() {
	tl.reverse()
});

$("#slogan").click(function() {
	tl.seek("slogan")
});