Hvordan jeg designede en animeret boghandel med JavaScript, jQuery og CSS.

For at få en god idé om, hvordan flex fungerer, kan du prøve flex layouteditor på denne side.

De sidste to af mine tutorials behandlede CSS-net og flex. Jeg skrev dem, så jeg kunne lære, hvad mulighederne var, og dele mine fund med andre. Ved hjælp af gitter, flex, jquery og hours 5 timer af min tid, skabte jeg dette.

En animation, jeg kom med til Header på boghandlerens websted om Learning Curve. Ja, det ligner ikke et gitter. Men det er kreativt og sjovt IMO.

Her giver en række enkle teknikker en noget dramatisk effekt.

Jeg siger altid det:

  • Du behøver ikke at vide alt om et sprog.
  • Du behøver kun at kende et par abstrakte teknikker. Men kender dem godt.
  • Find ud af, hvad den tilsigtede anvendelse af denne teknik er.

Lad os opdele designet i separate elementer:

Samme animation med bogbilleder fjernet via img {synlighed: skjult} og kant tilføjet til alle elementer * {kantlinje: 1px massiv grå; }

Jeg fandt denne gratis cykel-clipart ved at lave en hurtig Google Images-søgning. Jeg delte det i to separate billeder og tilføjede gennemsigtighed. Jeg fjernede også hjulet og animerede det separat med et mindre z-indeks bag rammen.

De vigtigste designelementer her er:

  • Jeg brugte flex til bogbeholdere til at justere dem (“flyde”) til bunden.
  • Den bevægelige del af cyklen blev animeret ved hjælp af jQuerys animerede funktion: $ ("# bike-back"). Animere ({bredde: bike_position_x});
  • Hjulet blev drejet ved hjælp af $ (“# hjul”). Css ({transform: “rotate (“ + wheel_degree + ”deg)”});

Ved hjælp af disse tre ideer kan du oprette så mange forskellige effekter. I webdesign er de fleste animationer, du laver, enten at flytte et objekt i 2 dimensioner eller rotere det. Meget som 2D videospil.

Kildekode

Jeg ønsker ikke at rodet læsbarheden af ​​denne tutorial med HTML og CSS kildekode. Men her er JavaScript, der gør animationerne: