Kdykoli potřebuji zkontrolovat své ego, jdu na nový web Chrise Coyiera CodePen.IO. CodePen.IO je neuvěřitelná ukázka HTML, CSS a JavaScriptu, která ukazuje talent vývojářů vytvářejících efekty, které 99 % předních světových vývojářů nedokázalo vytvořit. Strávil jsem několik hodin když jsem na CodePen, a poté, co jsem zvedl čelist z podlahy, dal jsem dohromady sbírku mých oblíbených ukázek CodePen.IO. Užijte si to!
Nakreslit červa
Draw Worm je poutavá animace na plátně, která vytváří větve; ještě lépe, animace sleduje myš a vytváří více větví.
Navigační knoflík
Navigační knoflík, vytvořený pouze pomocí HTML a CSS, je kruhový knoflík, který po kliknutí osvětlí vybranou hodnotu. Změna hodnoty je zvýrazněna leskem krytí a animací kolem kruhu. Skvělý výkon bez JavaScriptu!
Stezka
Trail je další mistrovské dílo založené na cavas, které vytváří různé barevné paprsky, které sledují uživatelovu myš ve zrychleném tempu. Dokonce i barva je taková, že můžete vidět, že na pozadí zůstávají šedé čáry, které představují stopy páry.
Nic není mimo tebe
Nothing is Beyond You je další demo bez JavaScriptu, které využívá CSS animace a tvary k vytvoření podvodního bublajícího efektu.
Jednoprvkový Google Chrome
Toto jednoprvkové demo tvoří logo Google Chrome pomocí :before a :after , stejně jako řada přechodů CSS. Umístěte ukazatel myši na logo a také se zmenší a otočí!
Twisty
Další úžasná animace pouze v CSS; tato ukázka používá 30 DIV prvky a přitom pouze 4 skutečné deklarace CSS. Působivější je, že se nejedná pouze o rotující sadu prvků – prvky se také deformují do různých tvarů.
Linjer
Linjer začíná jako pulzující sada barevných čar, dokud neklikáte kolem čar! Animace se v blízkosti kliknutí zintenzivňují a vlnění se stává smysluplnějším.
Test 3D CSS
CSS 3D Test představuje otočený 3D obrázek, který se po najetí myší animuje do prezentovatelné polohy. Byli byste překvapeni, jak málo CSS se ke splnění tohoto úkolu používá.
Sociální přepínač
Social Switchbook je pravděpodobně nejpraktičtější z ukázek uvedených v tomto příspěvku. Efekt poskytuje sadu prvků ve stylu kroužku na klíče, které se animují do zobrazení, když na každý najedete myší. Žádný JavaScript.
Ohňostroj na plátně
Canvas Fireworks je elegantní a citlivá ukázka, která střílí ohňostroje do pozice, na kterou kliknete. K dispozici je dokonce ovládací panel, pomocí kterého si můžete přizpůsobit rychlost, barvu a přesnost ohňostroje.
Breaking Bad
Kluci z Breaking Bad prodávají pekelnou drogu a Tim Pietrusky ji musel také používat, když vytvořil tuto vynikající SVG poctu pro úvodní titulky. Všimněte si, jak realisticky vypadá chemický kouř za logem!
Sketch.js
Demo sketch.js je úžasný efekt bublin, který sleduje vaši myš a vytváří kruhy všech velikostí a barev. Ještě chladnější je, že se kruhy zmenšují a pohybují náhodnými pohyby, jak se vzdalují od myši!
A tady to máte – ohromující CSS, JavaScript a animace na plátně, které tlačí naše prohlížeče na pokraj. Všechna čest patří autorům těchto skvělých animací!