Mérei Tamás webdesigner

CSS animáció GSAP-el

Szerző:   |   2015-02-22

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

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

16 hozzászólás

  1. Gergely
    2016. május 17. kedd - 20:57

    Sokan írták, hogy nem sikerült az animáció vagy valami más… Hát azért mert rossz a forráskód! (nincs beillesztve a GSAP a html-be)

    • cyrex
      2016. május 17. kedd - 21:51

      A script.js-ben van benne. Ha nem lenne behúzva, akkor a demo sem működne.

    • Gergely
      2016. május 17. kedd - 22:18

      Köszönöm a gyors választ! A script.js-ben hol van? Ctrl+C – Ctrl+V csak nem hibázik… 😀

  2. larion11
    2015. április 25. szombat - 22:24

    Valamiért nem jó 🙁 Probáltam sajátgépem xmapp on feltöltöttem tárhelyre és sehol nem jó 🙁

    • cyrex
      2015. május 9. szombat - 11:37

      Ehhez minek XAMPP? Egyetlen statikus oldal az egész.

  3. nology
    2015. március 12. csütörtök - 10:58

    Nekem miért nem működnek a gombok??
    Deklaráltam mindent. Jól is mentettem el.

    • cyrex
      2015. március 20. péntek - 21:30

      Pedig valami mégsem jó akkor 🙂

  4. Kun V. Robin
    2015. február 28. szombat - 19:55

    Hello, először is köszönöm az előbbi válaszodat
    Másodszor; van nekem egy hostinger fiókom és hogy lehet azt megoldani hogy wordpressben html-el és css-sel írjam meg a weblapot?
    Néztem convert videókat de ott is localhost (xamp,wamp) al működött,online tárhelyel hogy lehet megcsinálni?
    U.i.:Bocsi ha rosszul fogalmaztam.

    • cyrex
      2015. március 1. vasárnap - 10:09

      Erős fogalomzavart érzek a kérdésedben.

  5. Kun V. Robin
    2015. február 25. szerda - 19:48

    Helló!

    Kérdezni szeretnék valamit nem ide kapcsolódik,hanem a wordpress-hez.Hogyan lehet fórumot csinálni vagy live chat-et?

    Válaszodat előre is Köszönöm 🙂

    • cyrex
      2015. február 25. szerda - 21:16

      Fórum bbPress vagy phpBB. Live chat-et sosem használtam még, de biztos arra is van valami ingyenes cucc.

  6. Kencse Szabolcs
    2015. február 24. kedd - 19:57

    Köszi szépen pont most kerestem valami hasonló megoldást , nagyon jó szuper a blog 🙂

  7. Brien
    2015. február 23. hétfő - 10:09

    Helló, Tamás!

    Nem a témához kapcsolódik, viszont így a legegyszerűbb mindkettőnknek… 🙂

    Egy kérdést tennék csak fel…
    Plugin-al oldottad meg a referenciáidnál a slideshow-os dolgot?
    Ha igen, megtudnád adni a bővítmény nevét?
    Köszi!

    Díjazom a WP Plugin-okat… 😀
    Főleg, hogy annyi használható free van…

    • cyrex
      2015. február 23. hétfő - 10:32

      All in one SEO-t meg a Contact form-ot használom csak, más plugin nincs telepítve. Az image slider az Tiny Carousel-el van megcsinálva.

    • Brien
      2015. február 24. kedd - 10:24

      Köszönöm szépen a válaszod!! 😉

  8. TampiErik
    2015. február 23. hétfő - 08:47

    Köszi Cyrex! Sokat segítettél! Csak így tovább! 😉

Hozzászólás

Legújabb hozzászólások