Freelance%20user%20experience%20consultant%20and%20web%20designer.%20Available%20for%20custom%20Webflow%20sites%2C%20as%20well%20as%20UX%20design%2C%20research%20and%20prototyping.
fry has 192 followers on Webflow.
youtube-video-tabs
This%20is%20a%20simple%20Youtube%20tabs%20setup%2C%20no%20CMS%20%u2014%20there%20are%20a%20fixed%20number%20of%20tabs%20each%20with%20a%20different%20video.%20A%20small%20snippet%20of%20code%20in%20the%20%3Cbody%3E%20section%20of%20the%20page%20settings%20stops%20the%20current%20video%20playing%20when%20any%20tab%20is%20clicked.%20Please%20don%27t%20ask%20me%20how%20to%20further%20customise%20the%20code%20as%20I%20don%27t%20know%20howwwwwwwwww%0A%0AThanks%20to%20@samliew%20and%20@weebhek%20for%20this%20solution.
Tags:
- youtube
- video
- tabs
- jquery
- pause
- stop
Visit Site
Clone%20Comp%202021%20Day%203%20%7C%20Tirawire%20%7C%20Fry
Final%20day%20of%20Clone%20Comp%202021%21%20I%27ve%20done%20a%20story%20piece%20and%20a%20game%20so%20today%20I%20went%20more%20traditional%20web%20design.%20I%20cloned%20Wyatt%27s%20great%20follow%20up%20to%20my%20day%201%20story%20so%20that%20I%20could%20take%20the%20green%20on%20black%20aesthetic%20I%20hinted%20at%20a%20bit%20further.%0A%0AI%20also%20wanted%20to%20play%20with%20Lottie%20files%2C%20as%20I%27ve%20not%20done%20much%20with%20them%20before%2C%20and%20try%20out%20the%20Jetboost%20live%20search%20functionality.%20As%20with%20Day%203%20last%20year%2C%20I%20paid%20homage%20to%20some%20of%20the%20other%20projects%20in%20the%20competition%21%20I%20wanted%20to%20input%20them%20all%20but%20as%20it%20was%20manual%20that%20would%27ve%20taken%20a%20while%21%0A%0AHad%20so%20much%20fun%20this%20year%2C%20thanks%20to%20everyone%20involved%21
Tags:
- clonecomp
- clonecomp2021
- fun
- jetboost
- lottie
- scroll
Visit Site
Clone%20Comp%202021%20Day%202%20%7C%20Finsweet%20Island%202.0
Finsweet%20Island%202.0%21%20Made%20entirely%20with%20Native%20Webflow%20%28apart%20from%20the%20%27try%20again%27%20button%21%29%0A%0AI%20wanted%20to%20try%20and%20implement%20some%20of%20the%20game%20like%20behaviour%20I%27ve%20seen%20in%20the%20competition%20using%20only%20plain%20Webflow.%20I%27m%20not%20sure%20how%20other%20people%20did%20it%20exactly%20but%20it%20was%20fun%20finding%20a%20way%21%0A%0AI%20also%20thought%20it%27d%20be%20cool%20to%20follow%20up%20on%20this%20project%27s%20theme%20but%20add%20a%20bunch%20of%20features%20to%20it%20as%20a%20legit%202.0.%0A%0ATry%20and%20survive%20and%20find%20all%20the%20coins%21
Tags:
- clonecomp
- clonecomp2021
- fun
- game
- interactive
- finsweet
Visit Site
Clone%20Comp%202021%20Day%201%20%7C%20Stranded
Here%27s%20my%20Day%201%20project%21%20I%20wanted%20to%20leave%20a%20little%20simple%20idea%20for%20people%20to%20continue%20with%2C%20you%27ll%20see%20it%20at%20the%20end...%20hoping%20people%20will%20want%20the%20bird%20brain%20to%20hang%20around%20%3B%29
Tags:
- clonecomp2021
- clonecomp
- fun
- scrollytelling
- stranded
Visit Site
Sliding%20Hover%20Highlight%20Effect
Demonstrating%20a%20cool%20effect%20where%20a%20sliding%20highlight%20box%20moves%20around%20a%20grid%20of%20clickable%20items.%20I%27ve%20also%20included%20an%20alternative%20fallback%20for%20mobile%2C%20where%20the%20highlight%20moves%20based%20on%20scroll%20instead.%20This%20is%20pure%20experimentation%2C%20but%20could%20be%20used%20as%20a%20starting%20point%20for%20something%20interesting.
Tags:
- interactions
- animation
- hovereffect
- cloneable
- components
- design
- ux/ui
- hover
- grid
- cssgrid
- flexbox
- overflow
- advanced
- leeds
- united%20kingdom
- england
Visit Site
Colourful%20Bullerful
Webflow%20implementation%20of%20https%3A//codepen.io/tmrDevelops/pen/vOPZBv%20by%20https%3A//twitter.com/tmrDevelops%20-%20slightly%20altered%20but%20essentially%20just%20dropped%20in%20an%20embed%2C%20beautiful%20stuff%21
Tags:
- colour
- colourful
- animation
- codepen
- tmrdevelops
- gradient
- header
- leeds
- fry
- united%20kingdom
- england
Visit Site
Patch%20Music%20%u2014%20Portfolio
Portfolio%20site%20for%20Patch%20Music%2C%20showcasing%20selected%20work%20and%20partners.%0A%0AWe%20wanted%20to%20have%20a%20very%20classic%2C%20minimal%20design%20appearance%20for%20this%2C%20drawing%20inspiration%20from%20old%20school%20magazine%20layouts.%20I%20also%20enjoyed%20creating%20the%20logomark%20for%20Patch%27s%20brand.%0A%0AThe%20individual%20case%20study%20pages%20make%20it%20easy%20to%20see%20everything%20at%20once%20with%20a%20css%20grid%20layout%20that%20also%20exposes%20a%20menu%20to%20navigate%20between%20projects.%0A%0AA%20few%20fun%20things%3A%0A-%20Flex%20animated%20navigation%20bar%0A-%20Sticky%20section%20headers%0A-%20Copy%20to%20clipboard%20option%20for%20email%20address%0A-%20Overlapped%20footer%0A%0AI%20really%20loved%20working%20with%20Patch%20Music%20%u2014%20if%20you%27re%20ever%20looking%20for%20soundtrack%20or%20sound%20design%20I%20strongly%20recommend%20giving%20him%20a%20shout%21
Tags:
- portfolio
- music
- sounddesign
- producer
- music%20producer
- flexbox
- interaction
- animation
- responsive
- minimalist
- classic
- graphicdesign
- leeds
- united%20kingdom
- england
- fry
- patch
Visit Site
Overlapped%20Header%20Effect
I%20created%20this%20effect%20to%20help%20someone%20out%20on%20the%20Webflow%20Discord%2C%20and%20I%20thought%20I%27d%20make%20it%20cloneable%20in%20case%20anyone%20else%20wants%20to%20use%20it%21%20I%20also%20decided%20to%20spice%20it%20up%20a%20little%20with%20some%20lovely%20animations%20from%20Lottieflow%20%3A%29%0A%0AThe%20basic%20effect%20is%20achieved%20just%20by%20setting%20the%20header%20as%20fixed%20at%20a%20lower%20z-index%20than%20the%20%28relative%20positioned%29%20content%20below.
Tags:
- clonable
- header
- overlap
- overlapped
- hidden
- animation
- lottieflow
- lottie
- interaction
- scroll
- scrolleffect
- scrolleffects
- cover
- fry
- clone
- leeds
- united%20kingdom
- england
Visit Site
Match%20Pairs%20Game%20-%20Sia%20Sia%20Bowie%20Bowie%20Giraffe%20Giraffe
This%20is%20an%20initial%20test%20of%20building%20a%20pairs%20matching%20memory%20game%20in%20Webflow%21%20All%20of%20the%20main%20functionality%20is%20native%2C%20using%20interactions%20and%20conditional%20visibility.%20Small%20piece%20of%20custom%20code%20for%20randomising%20the%20order%20each%20time.%0A%0AI%27ll%20be%20updating%20this%20at%20some%20point%20and%20refining%20a%20bit%20%u2014%20it%20was%20built%20for%20Webflow%20Maker%20Day%20in%20about%2010%20hours%2C%20and%20can%20still%20be%20improved%20a%20lot%20but%20glad%20to%20have%20figured%20out%20the%20principles%21%20I%27ll%20make%20it%20clonable%20when%20it%27s%20a%20bit%20tidier.%0A%0ACredit%20to%20@sarkis%20for%20leaving%20the%20breadcrumbs%20to%20the%20techniques%20that%20make%20this%20possible%21
Tags:
- game
- memory
- match
- cards
- test
- experiment
- leeds
- united%20kingdom
- england
- fry
Visit Site
3D%20Button
A%20%28fake%29%203D%20button%20using%20only%20hover%20state%20and%20a%20trick%20with%20borders%20to%20make%20triangles.%20Improved%20thanks%20to%20a%20positioning%20trick%20from%20Sako%21%20Staying%20away%20from%20actual%203D%20was%20my%20preference%20here%20in%20the%20end%20due%20to%20slight%20anomalies%20in%20positioning%20when%20updating%20the%20button%20content.%0A%0AI%27ve%20tried%20so%20many%20ways%20of%20doing%20this%21%20Happy%20with%20this%20implementation%20for%20now%20but%20interested%20if%20anyone%20else%20has%20another%20approach%21%0A%0ACheck%20out%20the%20other%20solutions%20to%20this%3A%0A%0AActual%203D%20from%20Sako%3A%20https%3A//webflow.com/website/3D-Button%3Fs%3Dfry3d%0A%0ACustom%20CSS%20from%20Zach%3A%20https%3A//webflow.com/website/3D-Button-with-Custom-CSS-3dbuttonchallenge
Tags:
- pseudo3d
- 3dbutton
- 3d%20effect
- buttonhover
- button
- hover
- hovereffect
- fry
- challenge
- clone
- clonable
- leeds
- united%20kingdom
- england
Visit Site
Sunflower%20Therapy
Client%20site%3A%20A%20simple%20one%20page%20site%20for%20Sunflower%20Therapy%2C%20a%20Nottingham%20based%20Psychotherapy%20centre.%0A%0AThis%20site%20uses%20a%20cross%20fading%20image%20interaction%2C%20where%20the%20image%20section%20remains%20sticky%20as%20you%20scroll%20and%20changes%20based%20on%20the%20section%20you%27re%20looking%20at.%20I%20felt%20this%20was%20effective%20for%20this%20site%20since%20the%20imagery%20is%20purely%20decorative.
Tags:
- clientwork
- therapist
- therapy
- united%20kingdom
- one%20page
- crossfade
- interaction
- leeds
- nottingham
- england
- fry
Visit Site
Day%203%20Clone%20Comp%20%u2013%20Hypermode%20%28Earth%20Was%20Lost%29
My%20Day%203%20project%20-%20Hypermode%21%20We%20had%20the%20chance%20to%20go%20back%20and%20traverse%20time%20and%20space%20after%20going%20through%20a%20black%20hole%20so%20I%20went%20back%20to%20my%20day%201%20project.%20Was%20great%20fun%20working%20on%20someone%20else%27s%20yesterday%20but%20I%20really%20wanted%20to%20do%20some%20extra%20bits%20to%20this%21%0A%0AWe%20now%20have%3A%0A-%20Dark%20mode%0A-%20Sort%20of%20responsiveness%0A-%20%27How%20it%27s%20done%27%20tips%0A-%20Updated%20Graphics%0A-%20A%20new%20%27Cargo%27%20section%20with%20CMS%0A-%20Jetboost%20filters%0A-%20A%20black%20hole%0A-%20A%20thank%20you%20message%0A-%20Possibly%20some%20other%20stuff%20I%20can%27t%20remember%20now%0A%0AMe%20talking%20through%20it%3A%20https%3A//www.loom.com/share/66990f6cf66f41ab9e961117c0711b7b%0A%0ASo%20much%20fun%20doing%20this%2C%20and%20I%27m%20amazed%20by%20the%20projects%20I%27ve%20seen%2C%20everyone%20in%20this%20competition%20was%20just%20incredible%20so%20well%20done%20all%21
Tags:
- clonecomp
- clonecomp2020
- darkmode
- responsive
- funny
- space
- clone
- clonable
- cms
- filters
- grid
- cssgrid
- jetboost
- leeds
- united%20kingdom
- england
Visit Site
Day%202%20Clone%20Comp%20%u2013%20It%20is%20not%20over
Day%202%21%20I%20am%20as%20dead%20as%20this%20alien.%0A%0Ahttps%3A//www.loom.com/share/c93d0fdbd4504ed9b9164154eaa6f4a1
Tags:
Visit Site
Day%201%20Clone%20Comp%20%u2013%20How%20Earth%20Was%20Lost
My%20submission%20for%20Clone%20Comp%20Day%201.%0A%0AI%20didn%27t%20have%20much%20time%20so%20had%20to%20scale%20back%20a%20lot%20and%20there%20is%20no%20responsive%20stuff%2C%20but%20maybe%20someone%20will%20want%20to%20pursue%20it%3F%21%20I%20had%20fun.%0A%0Ahttps%3A//www.loom.com/share/fca273304eb4451387e120e3f1b7581f
Tags:
Visit Site
Section%20based%20progress%20line
Just%20a%20quick%20attempt%20at%20replicating%20something%20seen%20elsewhere%u2014can%20definitely%20be%20improved%20upon%20but%20hopefully%20enough%20to%20demonstrate%20the%20principle.%20Interested%20to%20see%20anyone%27s%20improvements%20or%20other%20ways%20of%20achieving%20this%20effect%21%0A%0AYou%20need%20to%20have%20a%20decent%20amount%20of%20content%20above%20and%20below%20this%20at%20the%20moment%20for%20it%20to%20be%20effective.%20Play%20with%20the%20interaction%20assigned%20to%20%27outer%20block%27%20to%20tweak.
Tags:
- clone
- clonable
- scroll
- progress
- progressbar
- fry
- england
- united%20kingdom
Visit Site