CSS animáció GSAP-el

2015-02-22

Kedvcsináló a GreenSock animation platformjához.

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

Videó

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")
});