Posouvací animace jsou zábavné. Je zábavné je vytvářet a je zábavné je používat. Pokud vás bootstrapping nebaví, možná vám hraní s rolovacími animacemi přijde jako příjemné šťavnaté osvěžení ve vaší suché front-endové vývojářské kariéře. Pojďme se podívat, jak vytvořit animovanou zvukovou vlnu pomocí Skroll.js.
Zobrazit ukázkuHTML
Nejprve si vytvoříme kontejner se všemi našimi částmi.
<div id="soundWave"> <div class="part p1"></div> <div class="part p2"></div> <div class="part p3"></div> <div class="part p4"></div> <div class="part p5"></div> <div class="part p6"></div> <div class="part p7"></div> <div class="part p8"></div> <div class="part p9"></div> <div class="part p10"></div> <div class="part p11"></div> <div class="part p12"></div> <div class="part p13"></div> </div>
Každá část představuje blok ve vlně.
CSS
Přidáním CSS umístěte naši zvukovou vlnu doprostřed stránky a dejte každé části jinou barvu pozadí.
.soundWaves { border-bottom: 1px #222222 solid; width: 300px; height: 200px; position: fixed; top: 50%; left: 50%; margin: -200px 0 0 -150px; } .partsContainer { position: relative; width: 240px; height: 200px; left: 30px; } .part { width: 20px; height: 1px; float: left; } .p1 {background-color: #4fdc3f;} .p2 {background-color: #fbe91b;} .p3 {background-color: #fe9836;} .p4 {background-color: #fd5064;} .p5 {background-color: #ff159b;} .p6 {background-color: #da0638;} .p7 {background-color: #755eca;} .p8 {background-color: #0dc2c0;} .p9 {background-color: #00ae4c;} .p10 {background-color: #00239b;} .p11 {background-color: #fe9836;} .p12 {background-color: #fd5064;} .p13 {background-color: #ff159b;}
Použití float k umístění našich částí pro nás nevytvoří dobrý základ – musíme vyladit CSS, aby vše zarovnalo se spodním okrajem nadřazeného kontejneru. Změňme to z float: left
do position: absolute
.
.part { width: 20px; height: 1px; position: absolute; bottom: 0; left: 0; transform-origin:50% 100%; -ms-transform-origin:50% 100%; /* IE 9 */ -webkit-transform-origin:50% 100%; /* Chrome, Safari, Opera */ } .p1 {background-color: #4fdc3f;} .p2 {background-color: #fbe91b; left: 20px;} .p3 {background-color: #fe9836; left: 40px} .p4 {background-color: #fd5064; left: 60px} .p5 {background-color: #ff159b; left: 80px} .p6 {background-color: #da0638; left: 100px} .p7 {background-color: #755eca; left: 120px} .p8 {background-color: #0dc2c0; left: 140px} .p9 {background-color: #00ae4c; left: 160px} .p10 {background-color: #00239b; left: 180px} .p11 {background-color: #fe9836; left: 200px} .p12 {background-color: #fd5064; left: 220px} .p13 {background-color: #ff159b; left: 240px}
Změnili jsme polohu všech dílů na position:absolute a bottom:0, což znamená, že musíme také definovat odsazení vlevo, jinak by všechny díly seděly na sobě.
Nyní, když je máme zarovnané ke spodnímu okraji, změna jejich měřítka Y způsobí, že se animují nahoru místo dolů.
Všimněte si, že jsme zahrnuli také transform-origin:50 % 100 %. Tím se přesune bod, ze kterého se počítá měřítkoY, do spodní části prvku namísto výchozího středového bodu.
Krok 3 – Spusťte Skrollr a přidejte trochu jazzu
Skrollr spustíme pod odkazem na Skrollr.min.js těsně před koncem těla.
<script src="js/skrollr.min.js"></script> <script type="text/javascript"> var s = skrollr.init(); </script>
A přidejte naše první datové atributy. V této ukázce použijeme absolutní hodnoty.
<div class="part p1" data-start="transform: scaleY(1)" data-1000-start="transform: scaleY(200)" data-2000-start="transform: scaleY(1)" anchor-target="body" ></div>
Nastavením těchto atributů dat vytváříme klíčové snímky animace.
data-start
obsahuje naši počáteční hodnotu, která je podobná naší hodnotě v šabloně stylů.
data-1000-start
je měřítko dílu, když uživatel posune stránku o 1000 pixelů dolů a data-2000-start
je měřítko při 2000 pixelech v horní pozici posuvníku.
Chceme vytvořit vlnu, což znamená, že ke každé z následujících částí budeme muset přidat stejný přírůstek.
<div class="part p2" data-start="transform: scaleY(1)" data-1250-start="transform: scaleY(200)" data-2250-start="transform: scaleY(1)" anchor-target="body"></div>
Zvyšujeme druhou a třetí hodnotu offsetu, což vytváří požadovaný vlnový efekt. Stejný přírůstek také opakujeme pro všech dalších 13 dílů.
Všimněte si také, že nemusíme nastavovat výšku stránky, Skrollr je dostatečně chytrý a vypočítá ji za nás automaticky.
Zobrazit ukázkuTady to máte:pěkná jednoduchá zvuková vlna vytvořená pomocí Skroll.js. Zjistěte více o Skrollru, paralaxe a animacích posouvání v Petr's Parallax Scrolling Master Class, zadejte naši nabídku níže.
Giveaway
Vstupte a VYHRAJTE Parallax Scrolling Master Class od Petra Tichého. Online kurz, který vás naučí, jak vytvořit web s paralaxním rolováním od začátku do konce pomocí Skrollr.js! Jak hodíš klobouk do ringu? Do komentářů níže vložte odkaz na vaše oblíbené použití paralaxového efektu. Existuje mnoho skvělých, takže k vítězství je lepší přinést efekt A-kvality!