Nem foglalkozom programozással.
Vektorgrafikus képeket akár elemenként is animálhatunk.
A működő kódot ide kattintva tudod megnézni.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GSAP</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrapper">
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 244.1 160.8">
<linearGradient id="letter-w_1_" x1="106.4" x2="106.4" y1="17.8" y2="122" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#008ecf"/>
<stop offset="1" stop-color="#21689a"/>
</linearGradient>
<path id="letter-w" fill="url(#letter-w_1_)" d="M27 17.8L64 38l15.8 50.2 16.3-50.6h18l19.4 50.3L157 37.8h28.8L143.4 122h-26.3l-11.7-38.5L91.7 122H65.4z"/>
<path id="letter-a" fill="#B2D235" d="M217 122h-64.6l12-23.8h14.7l-22-60.5h28.8l22.4 60.5z"/>
<linearGradient id="gradient-blue_1_" x1="169.3" x2="137.4" y1="67.6" y2="88.1" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1b5681"/>
<stop offset="1" stop-color="#1b75bb" stop-opacity="0"/>
</linearGradient>
<path id="gradient-blue" fill="url(#gradient-blue_1_)" d="M157 37.8l-23.5 50.1 9.9 34.1 25.8-51.2z"/>
<linearGradient id="gradient-green_1_" x1="439.3" x2="407" y1="-1575.4" y2="-1611.6" gradientTransform="translate(-234.1 1669)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#92ae2a"/>
<stop offset="1" stop-color="#b2d235" stop-opacity="0"/>
</linearGradient>
<path id="gradient-green" fill="url(#gradient-green_1_)" d="M179 98.2l-9.8-27.4 16.6-33 22.5 60.4z"/>
<g id="letters" fill="#fff">
<path class="letter" d="M116.2 140H115c-.3 0-.6-.3-.6-.6s.3-.5.6-.5h1.4l.6-3.4h-1.4a.6.6 0 0 1-.6-.6c0-.3.3-.5.6-.5h1.6l.4-2.4c0-.3.3-.5.6-.5s.6.3.5.7l-.4 2.2h3l.4-2.4c0-.3.3-.5.6-.5.4 0 .6.3.5.7l-.3 2.2h1.2c.3 0 .6.2.6.5s-.3.6-.6.6h-1.4l-.6 3.4h1.4c.3 0 .6.2.6.5s-.3.6-.6.6h-1.6l-.4 2.4c0 .3-.3.5-.6.5s-.6-.4-.5-.7l.4-2.2h-3l-.5 2.4c0 .2-.2.5-.5.5-.4 0-.6-.3-.6-.7l.4-2.2zm4.4-1.1l.5-3.4h-3l-.5 3.4h3z"/>
<path class="letter" d="M125.9 132.4l-.1-.3c0-.3.3-.6.7-.6.3 0 .5.2.6.5l3.1 9 3-9c0-.3.2-.5.6-.5.4 0 .6.2.7.5l2.9 9 3-9c.2-.3.4-.5.7-.5.3 0 .6.3.6.6v.3l-3.6 10c-.1.3-.4.5-.7.5-.4 0-.6-.2-.7-.5l-3-8.6-2.8 8.6c-.2.3-.4.5-.7.5h-.1c-.3 0-.5-.2-.7-.5l-3.5-10z"/>
<path class="letter" d="M146.6 143c-2.3 0-4.1-1.8-4.1-4.3 0-2.4 1.7-4.4 4-4.4 2.4 0 3.8 2 3.8 4.2 0 .4-.3.6-.6.6h-6c.2 1.8 1.5 2.8 3 2.8 1 0 1.7-.4 2.3-1h.4c.3 0 .5.1.5.4 0 .2 0 .3-.2.4-.8.8-1.7 1.3-3.1 1.3zm2.4-4.8c0-1.5-1-2.8-2.6-2.8-1.4 0-2.5 1.2-2.7 2.8h5.3z"/>
<path class="letter" d="M152.6 131.7c0-.4.2-.7.6-.7.3 0 .6.3.6.7v10.5c0 .4-.3.7-.6.7s-.6-.3-.6-.7v-10.5z"/>
<path class="letter" d="M156.8 131.7c0-.4.2-.7.6-.7.3 0 .6.3.6.7v10.5c0 .4-.2.7-.6.7s-.6-.3-.6-.7v-10.5z"/>
<path class="letter" d="M160.4 142l4.5-10c.2-.3.4-.5.8-.5h.1c.4 0 .6.2.8.5l4.5 10 .1.3c0 .3-.3.6-.6.6s-.5-.2-.6-.5l-1.2-2.6h-6.1l-1.2 2.6c-.1.3-.3.5-.6.5a.6.6 0 0 1-.6-.6v-.3zm8-3.3l-2.7-5.7-2.5 5.7h5.1z"/>
<path class="letter" d="M173.4 140.6v-5h-.7a.6.6 0 0 1-.5-.5c0-.3.3-.6.5-.6h.7v-2c0-.3.3-.6.6-.6.4 0 .6.3.6.7v2h2.2c.3 0 .6.2.6.5s-.3.5-.6.5h-2.2v4.8c0 1 .6 1.4 1.4 1.4l.8-.1c.3 0 .5.2.5.5s-.1.4-.3.5c-.4.2-.8.2-1.3.2-1.3 0-2.3-.6-2.3-2.3z"/>
<path class="letter" d="M179.4 132c0-.5.4-.7.8-.7s.7.2.7.6v.2c0 .4-.3.7-.7.7-.4 0-.8-.3-.8-.7v-.2z"/>
<path class="letter" d="M179.6 135c0-.3.2-.6.6-.6.3 0 .6.3.6.7v7.1c0 .4-.3.7-.6.7s-.6-.3-.6-.7v-7.1z"/>
<path class="letter" d="M183.9 132.2c0-.3.2-.6.6-.6h4.2c1.4 0 2.5.4 3.2 1.1.5.6.8 1.3.8 2.2 0 1.9-1.2 3-3 3.3l2.8 3.6.2.5c0 .3-.3.6-.6.6s-.5-.2-.6-.4l-3.2-4h-3.2v3.7c0 .4-.3.7-.6.7a.6.6 0 0 1-.6-.7v-10zm4.7 5.1c1.6 0 2.8-.9 2.8-2.3s-1-2.2-2.8-2.2H185v4.5h3.5z"/>
<path class="letter" d="M195.3 138.1v-6c0-.3.2-.6.6-.6.3 0 .6.3.6.6v6c0 2.3 1.3 3.7 3.4 3.7 2.1 0 3.4-1.2 3.4-3.7v-6c0-.3.3-.6.7-.6.3 0 .6.3.6.6v6c0 3.2-1.9 4.9-4.7 4.9-2.8 0-4.6-1.7-4.6-4.9z"/>
<path class="letter" d="M207.6 132.2c0-.4.3-.7.6-.7h.2c.3 0 .4.2.6.4l6.8 8.7V132c0-.3.3-.6.6-.6.4 0 .6.3.6.6v10.1c0 .4-.2.6-.5.6-.4 0-.6-.1-.7-.3l-7-9v8.7c0 .4-.3.7-.6.7a.6.6 0 0 1-.6-.7v-10z"/>
</g>
</svg>
</div>
</div>
</body>
</html>
body {
margin: 0;
background: #000 url('bg.jpg');
background-size: cover
}
.page-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.wrapper {
flex: 1;
max-width: 500px
}
function logoAnimate(){
var tl = new TimelineMax();
tl
.fromTo("#letter-w", 1, { x:-400, opacity: 0 }, { x:0, opacity: 1, ease: Back.easeOut })
.fromTo("#letter-a", 1, { x:400, opacity: 0 }, { x:0, opacity: 1, ease: Back.easeOut })
.fromTo("#gradient-blue", .5, { opacity: 0 }, { opacity: 1 })
.fromTo("#gradient-green", .5, { opacity: 0 }, { opacity: 1 })
.staggerFrom(".letter", .5, {
opacity: 0,
cycle: {
y:[-100,100]
}
},.1)
.fromTo("#logo", 3, { rotation: 0 }, { rotation: 360, ease: Expo.easeOut },"+=5")
}
window.onload = function() {
logoAnimate();
}
Szia.
Jó lett a videó nagyon.
Egy olyan kérdésem lenne hogy ezt az animációt rá lehet tenni minden elemre? PL div-re. Illetve hogy csak akkor hajtódjon vége ha a felhasználó pl oda görget. Lejebb lévő szövegeknél.
Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...
Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...
Szerintem azt sehogy....
Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......
Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....
Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...
Ha három fázisod van, akkor három fázisú Fi relét kell venni....
Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...
"3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...
Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....
Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...
Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....
Laravel rendszert valamikor bemutatsz ha ismered?