Paralaxní zvukové vlny animace na svitku

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ázku

HTML

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ázku

Tady 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!