Clone%20Comp%202020%20Champ%20%uD83D%uDCAA%0AI%20create%20bespoke%20experiences%20%26%20free%20cloneables%20to%20help%20people%20learn%20internet%20stuff.
joshwork has 1260 followers on Webflow.
%uD83E%uDE97%20Full-Height%20Funky%20Accordions%20%uD83E%uDE97
My%20first%20cloneable%20in%20almost%20a%20year%21%20Created%20in%20response%20to%20a%20Facebook%20post%20that%20seemed%20like%20a%20worthy%20challenge%20%uD83D%uDCAA%0A%0AIt%20was%20super%20tough%20to%20achieve%2C%20using%20a%20combination%20of%20dropdowns%2C%20position%20sticky%2C%20CSS%20Grid%20%26%20some%20mix-blend-mode%20magic%20to%20power%20the%20colorful%20overlays.%20Mostly%20no-code%2C%20with%20just%20of%202%20bits%20of%20JS%3A%20one%20to%20achieve%20the%20jump%20links%20%28Webflow%20doesn%27t%20play%20nice%20with%20links%20inside%20dropdowns%29%20and%20another%20set%20to%20reset%20scroll%20position%20when%20closing%20the%20accordions.%0A%0AA%20few%20tips%3A%0A%u2022%A0Doesn%27t%20work%20well%20in%20Safari%0A%u2022%20Need%20to%20add%20more%20jump%20links%3F%20You%27ll%20need%20to%20add%20more%20lines%20of%20JS%20in%20the%20page%20settings.%20%0A%u2022%20Additionally%2C%20jump%20links%20are%20linked%20to%20position%3A%20absolute%20elements%20within%20each%20dropdown%2C%20so%20you%27ll%20need%20to%20add%20new%20ones%20with%20new%20IDs%20to%20make%20it%20work%0A%0AEnjoy%2C%20and%20let%20me%20know%20what%20you%20think%21%0A%0ADesign%3A%20%0Adribbble.com/shots/12209806-Blurr-Animation%0A%0AFacebook%20post%3A%20facebook.com/100005276292047/videos/287781939881694/
Tags:
- dropdown
- accordion
- blur
- blend
- colorful
- joshwork
- cloneable
Visit Site
%uD83C%uDFDD%20Joshwork%20CloneComp%20Day%201%20Submission
My%20submission%20for%20day%20one%20of%20CloneComp%21%0A%0AFor%20me%2C%20this%20was%20an%20exercise%20in%203D%20transforms%20on%20the%20web.%20I%20wanted%20to%20see%20if%20I%20could%20push%20the%20limits%20of%20my%20knowledge%20of%203D%20to%20move%20the%20story%20forward%20in%20a%20simple%2C%20compelling%20way.%0A%0AI%20hope%20it%20doesn%27t%20crash%20your%20machine%20like%20it%20did%20mine%20%uD83D%uDE05%20Tell%20me%20what%20you%20think%20in%20the%20comments%2C%20and%20best%20of%20luck%20to%20everyone%20participating%21%0A%0ACloning%20this%20site%3F%20A%20few%20tips%3A%0A%u2022%20There%20is%20an%20HTML%20embed%20at%20the%20top%20of%20the%20Navigator%20with%20some%20custom%20code%20in%20it.%20If%20you%20can%27t%20click%20on%20certain%20elements%2C%20try%20commenting%20out%20that%20code%20for%20a%20bit.%0A%u2022%20If%20your%20computer%20struggling%20to%20render%20everything%20in%20the%20designer%2C%20un-comment%20the%20backface%20code%20in%20the%20embed.%20Things%20may%20look%20broken%2C%20but%20at%20least%20you%27ll%20be%20able%20to%20get%20work%20done.%20%0A%u2022%20There%20are%20about%20100%7E%20%27Initial%20Appearance%27%20states%20for%20elements%20in%20this%20project.%20I%20wouldn%27t%20recommend%20messing%20with%20them%2C%20but%20if%20you%20want%20to%20try%20most%20of%20them%20are%20located%20in%20the%20%27page-in%27%20interaction.
Tags:
- clonecomp
- clonecomp2021
- cloneable
- joshwork
- storytelling
Visit Site
.gif)
Easy%20Horizontal%20Image%20Accordions%20%uD83C%uDFBC
A%20%27simple%27%20LVP%20image%20accordion%20xreated%20in%20response%20to%20a%20Facebook%20group%20question.%20Implemented%20using%20IX2%2C%20writing-mode%20css%20properties%20for%20the%20vertical%20text%2C%20and%20a%20pinch%20of%20magic%20%uD83E%uDDD9%u200D%u2642%uFE0F.%20Gotta%20love%20when%20an%20easy%20cloneable%20comes%20together%21%0A%0ALots%20of%20maths%20involved%20with%20this%20implementation.....%20maths%20which%20would%20need%20to%20be%20re-evaluated%20if%20new%20accordions%20were%20added.%20Note%20that%20the%20original%20design%20%28https%3A//yesapart.com/en/%29%20switches%20to%20a%20slider%20on%20smaller%20viewports.
Tags:
- interactions
- ix2
- cloneable
- clone
- slider
- accordion
- accordions
- joshwork
- webflow
Visit Site
.gif)
%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%20MAGNETIC%20buttons%2C%20from%20the%20future%21%20%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F
Magnetic%20buttons%20are%20sorta%20like%20regular%20buttons%2C%20if%20regular%20buttons%20were%20zapped%20to%20life%20with%20witchcraft%20by%20html%20super-wizards%20from%20the%20future%20%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%uD83E%uDDF2%uD83E%uDDD9%u200D%u2642%uFE0F%0A%0AIn%20all%20seriousness%2C%20this%20type%20of%20button%20is%20a%20dead-simple%2C%20easy%20way%20to%20add%20effective%20hover%20micro-interactions%20to%20any%20website.%20I%20hope%20you%20enjoy%20exploring%20how%20these%20buttons%20were%20made.%20Hopefully%20it%20helps%20spread%20understanding%20of%20the%20power%20of%20reusable%20interactions%3B%20one%20mouse%20movement%20interaction%20powers%2090%25%20of%20the%20button%20movement%20in%20this%20project.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21%0A%0A*Inspired%20by%20this%20post%20from%20CoDrops%3A%0Ahttps%3A//tympanus.net/codrops/2020/08/05/magnetic-buttons/%0A%0A**Like%20this%20project%3F%0Ahttp%3A//buymeacoffee.com/joshwork
Tags:
- webflow
- cloneable
- showcase
- interactions
- microinteractions
- buttons
- magnetic
- kinetic
- futuristic
- joshwork
Visit Site
.gif)
%23CloneComp%3A%20Endgame%20%u2022%20Day%203%20%7C%20Josh%20Jacobs%2C%20Joshwork
%23CloneComp%202020%3A%20Endgame.%20Hold%20on%20to%20your%20butts.%0A%0AFun%20fact%3B%20all%20the%20ships%20in%20this%20project%20are%20not%20screenshots.%20I%20cloned%20each%20project%20with%20a%20ship%20in%20it%20and%20duplicated%20each%20element%20from%20the%20original%20project%2C%20and%20resized%20them%20using%20transformations.%20It%20took%20forever.%0A%0A%AF%5C_%28%u30C4%29_/%AF
Tags:
- clonecomp
- clonecomp2020
- joshwork
- space
- gifs
- animation
- interactions
- ix2
- endgame
Visit Site
%23CLONECOMP%20Day%202%20%7C%20Josh%20Jacobs
Some%20monsterous%20no-coder%20is%20going%20around%20making%20everything%208-bit%21%20%0A%0AWhew.%20Day%202%20has%20been%20a%20ROLLERCOASTER.%0A%0AExploring%20Jordan%27s%20file%20and%20her%20setup%20was%20both%20intriguing%20and%20challenging.%20I%20wanted%20to%20keep%20the%20format%20of%20the%20original%20project%20while%20building%20on%20the%20story%20and%20adding%20visual%20flairs%20that%20expand%20the%20existing%20universe%20%28get%20it%2C%20like%20space%3F%3F%3F%29%0A%0AThe%20result%20is%20what%20I%20like%20to%20think%20of%20as%20the%20%22Empire%20Strikes%20Back%22%20of%20cloning.%20Alot%20of%20the%20first%20one%2C%20some%20new%20things%2C%20and%20a%20twist%20ending.%20%0A%0ALooking%20so%20forward%20the%20cloneables%20in%20Day%203.%20If%20they%27re%20any%20bit%20as%20messy%20as%20my%20file....%20it%27s%20gonna%20be%20a%20BLAST.%0A%0AEdit%3A%20Not%20responsive.%20I%20can%20only%20do%20so%20much%20%AF%5C_%28%u30C4%29_/%AF
Tags:
- clonecomp
- clonecomp2020
- cloneable
- day2
- space
- joshwork
Visit Site
CloneComp%20Day%201%20%7C%20Josh%20Jacobs
The%20year%20is%202047......%20and%20the%20future%20was%20no-code.%0A%0AAll%20assets%20handmade%20by%20yours%20truly%20%uD83D%uDCAA%0A%0AIf%20you%20wanna%20keep%20up%20the%20visual%20style%2C%20here%27s%20how%20I%20made%20my%208-bit%20assets%3A%0Ahttps%3A//www.howtogeek.com/howto/29692/create-cool-8-bit-style-pixel-art-from-ordinary-images/%0A%0ALooking%20forward%20to%20round%202%21
Tags:
- clonecomp
- clonecomp2020
- joshwork
- grid%20layout
- cssgrid
- interactions
- ix2
- 8bit
- space
- future
- futuristic
Visit Site
%uD83D%uDC4D%uD83D%uDC4C%20Easy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4CEasy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4CEasy%20CSS-only%20Marquees%21%20%uD83D%uDC4D%uD83D%uDC4C
NO%20Javascript%2C%20no%20interactions%2C%20just%20simple%2C%20easy-breezy%20marquees%20ready%20to%20be%20cloned%21%20The%20need%20to%20create%20marquees%20like%20this%20for%20clients%20has%20been%20tremendous%20recently%2C%20so%20I%20figured%20it%20might%20be%20helpful%20to%20share%20with%20the%20community%21%0A%0ANote%3A%20there%20will%20need%20to%20be%20an%20EVEN%20number%20of%20elements%20inside%20your%20marquees%20for%20them%20to%20function%20properly%20and%20not%20skip%20around.%20The%20CSS%20for%20each%20marquee%20is%20included%20inside%20its%20container%20and%20is%20denoted%20with%20an%20emoji%20%uD83D%uDC4D%0A%0AIs%20this%20cloneable%20helpful%20to%20your%20workflow%3F%20Buy%20me%20a%20coffee%21%20http%3A//buymeacoffee.com/joshwork
Tags:
- clone
- cloneable
- css
- marquee
- joshwork
- css3
- marquees
- webflow
- interactions
Visit Site
.gif)
Single-Page%20CMS%20Portfolio%21%20Dribbble%20Series%20ft.%20%uD835%uDD05%uD835%uDD22%uD835%uDD30%uD835%uDD31%uD835%uDD16%uD835%uDD22%uD835%uDD2F%uD835%uDD33%uD835%uDD22%uD835%uDD21%uD835%uDD05%uD835%uDD2C%uD835%uDD29%uD835%uDD21
As%20I%20approach%20500%20followers%2C%20I%20thought%20I%27d%20unleash%20this%20beast%20to%20the%20public%20to%20pick%20apart%21%0A%0AShe%20was%20a%20doozy%2C%20I%20tell%20you.%20The%20toughest%20part%20was%20figuring%20out%20how%20to%20manipulate%20the%20CSS%20Clip%20section%20to%20create%20the%20filled-in%20effect%20on%20hover.%0A%0AAlso%20big%20props%20to%20the%20guys%20at%20FINSWEET%20for%20their%20ClassAdder%20tool%2C%20which%20I%27m%20using%20here%20to%20make%20the%20images%20go%20on%20top%20of%20one%20another%20%uD83D%uDCAA%0A%0ASo%2C%20clone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21%0A%0A%0A%0ADribble%3A%20%uD835%uDD05%uD835%uDD22%uD835%uDD30%uD835%uDD31%uD835%uDD16%uD835%uDD22%uD835%uDD2F%uD835%uDD33%uD835%uDD22%uD835%uDD21%uD835%uDD05%uD835%uDD2C%uD835%uDD29%uD835%uDD21%20-%20Nightingale%20Interactions%2002%20%28https%3A//dribbble.com/shots/8023325-Nightingale-Interactions-02%29%0A%0AFINSWEET%20Class%20Adder%3A%20https%3A//classadder.webflow.io/
Tags:
- classadder
- cms
- interactions
- ix2
- dribbble
- joshwork
- portfolio
- hoatzin
- hover
- finsweet
- cloneable
Visit Site
Switch%20Custom%20Cursors%20In-Page%20Using%20CSS%20Clip%20%u2702%uFE0F
Just%20using%20one%20custom%20cursor%20per%20page%3F%20That%27s%20old%20hat.%20Using%20the%20powerful%2C%20simple%20CSS%20Clip%20property%2C%20you%20can%20use%20a%20variety%20of%20cursors%20in%20a%20single%20page%2C%20opening%20up%20the%20opportunity%20for%20some%20very%20unique%20and%20different%20explorations%20of%20what%20a%20cursor%20can%20be%21%0A%0AWanna%20have%20your%20cursor%20change%20text%20between%20CMS%20elements%3F%20You%20can%20do%20that%21%20How%20about%20cursors%20with%20different%20interactions%3F%20You%20can%20do%20that%20too%21%20%0A%0AThis%20project%20just%20scratches%20the%20surface%20of%20me%20exploring%20the%20use%20of%20multiple%20different%20cursors%20in-page%2C%20and%20I%20hope%20you%20guys%20in%20the%20community%20use%20this%20solution%20to%20make%20some%20super%20cool%20stuff%20%uD83D%uDE0E%0A%0ALooking%20forward%20to%20hearing%20your%20thoughts%20in%20the%20comments%21
Tags:
- cursor
- customcursor
- css
- clip
- cssclip
- custom
- desktop
- mixblendmode
- html
- modern
Visit Site
Weblfow%20Custom%20Range%20Slider
In%20response%20to%20a%20Facebook%20group%20request%2C%20here%27s%20a%20custom%20range%20slider%20I%20made%20a%20while%20back.%20Not%20easy%20to%20customize%2C%20but%20it%20does%20work.
Tags:
- range
- slider
- rangeslider
- joshwork
Visit Site
%u2603Holiday%20GIFt%20Maker%21
Today%2C%20my%20team%20is%20launching%20our%20annual%20holiday%20Web%20experience%21%20This%20year%20we%u2019re%20encouraging%20our%20colleagues%20to%20share%20messages%20%28and%20GIFs%29%20with%20one%20another%20to%20celebrate%20the%20successes%20of%20the%20year.%20This%20has%20been%20a%20labor%20of%20love%20for%20myself%20and%20my%20team%20of%20worker%20bees%20for%20the%20last%20month%20or%20so%2C%20and%20it%20feels%20so%20good%20to%20finally%20say%20that%20it%u2019s%20launch%20time.%20Big%20shout%20out%20to%20Webflow%20and%20Zapier%20for%20helping%20to%20make%20this%20experience%20possible%21%0A%0AI%20hope%20you%20take%20some%20time%20to%20dive%20in%20to%20this%20creation%20and%20explore%20its%20various%20nuances.%20Additionally%2C%20I%20plan%20on%20doing%20a%20deep%20dive%20in%20the%20near%20future%20to%20go%20into%20aspects%20of%20this%20project%20that%20took%20alot%20of%20doing%2C%20from%20creating%20inline%20error%20messages%20to%20manipulating%203d%20transforms%20that%20work%20and%20implementing%20the%20Giphy%20API.%20%0A%0ADisclaimer%3A%20For%20the%20purposes%20of%20sharing%20this%20project%2C%20I%27ve%20removed%20all%20references%20to%20my%20company%20and%20disconnected%20the%20connections%20in%20Zapier%20which%20power%20the%20connections%20between%20the%20builder%20and%20CMS%2C%20so%20your%20submissions%20won%27t%20go%20through.
Tags:
- joshwork
- holiday
- 3dtransforms
- error
- builder
- form
- interactions
- slider
- interaction
- ix2
Visit Site
.gif)
Dynamic%20Hero%20Slider%21%20-%20Dribbble%20Series%20ft.%20Strive
Was%20a%20little%20worried%20that%20I%20wasn%27t%20going%20to%20be%20able%20to%20achieve%20this%20effect%3B%20the%20left%20rail%20of%20photos%20moving%20with%20the%20slider%2C%20the%20text%20being%20yellow%20over%20the%20images...%20it%20all%20seemed%20impossible.%0A%0ABut%2C%20as%20I%20am%20constantly%20finding%20out%2C%20nothing%20is%20impossible%20in%20Webflow.%20Made%20purely%20with%20CSS%2C%20Interactions%2C%20and%20alot%20of%20messing%20about.%20Particularly%20proud%20of%20some%20of%20the%20smaller%20viewport%20accommodations.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%2C%20or%20if%20you%27re%20interested%20in%20knowing%20how%20I%20made%20this%20project%20come%20to%20life.%0A%0AStrive%2C%20%22Plaid%20Dress%22%3A%20https%3A//dribbble.com/shots/6711696-Plaid-Dress
Tags:
- cloneable
- dribble
- joshwork
- slider
- interactions
- ix2
- colorful
- clone
- slides
- fashion
- interactive
Visit Site
Trendy%20AF%20Circular%20Text
TLDR%3B%20people%20seem%20to%20like%20this%20circular%20text%20with%20movement%2C%20so%20I%20thought%20I%27d%20try%20and%20see%20if%20I%20couldn%27t%20hack%20in%20WF.%20I%20did.%20This%20is%20that.%0A%0APowered%20by%20circletype.js%2C%20it%27s%20a%20little%20wonky%20and%20weird%20with%20regards%20to%20how%20it%27s%20sized...%20but%20it%20works.%20Includes%20interactions%20for%20page%20load%2C%20scrolling%20through%20sections%2C%20and%20for%20page%20transitions.%0A%0AClone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21
Tags:
- circle
- circles
- circletext
- cloneable
- clone
- webflow
- joshwork
- javascript
- trendy
- animation
- movement
Visit Site
.gif)
Joshwork%203.0%20-%20Personal%20Portfolio%2C%20Josh%20Jacobs
Well....%20I%20redesigned%20my%20portfolio%20again.%20Despite%20landing%20%7E20+%20freelance%20leads%20a%20month%20and%20garnering%20praise%20for%20its%20aesthetic%2C%20it%20was%20time%20to%20move%20on.%0A%0AI%27ve%20been%20an%20Art%20Director%20for%20about%20two%20years%20now%2C%20and%20I%20felt%20like%20that%20all%20black%20and%20RGB%20scheme%20was%20way%20too%20cool%20for%20me.%20This%20new%20set-up%20does%20a%20much%20better%20job%20of%20representing%20me%2C%20both%20as%20a%20designer%20and%20as%20a%20person.%20%0A%0AIs%20it%20perfect%3F%20Is%20it%20done%3F%0ANope.%0ABut%20neither%20am%20I%20%uD83D%uDC4D%0A%0ARead%20more%20on%20why%20I%20redesigned%20my%20site%20here%3A%20https%3A//www.joshwork.com/blog/joshwork-update-2021%0A%0AI%20owe%20much%20of%20this%20site%27s%20success%20to%20the%20following%20folks%3A%0A%0A%uD83D%uDD7A%20Bobby%20Rowe%2C%20for%20showing%20me%20how%20emotional%20color%20can%20be.%0A%uD83E%uDDD9%u200D%u2642%uFE0FT.ricks%20-%20For%20the%20typography%20animation%20tuts%2C%20and%20general%20WF%20wizardry.%0A%uD83D%uDC2F%20Finsweet%20for%20their%20amazing%20Classadder.webflow.io%20tool%2C%20which%20powers%20my%20animation%20pause%20button.%0A%uD83D%uDE80%20Lottieflow%2C%20for%20the%20various%20Lottie%20animations%20used%20throughout%20the%20site.%0A%uD83D%uDC69%u200D%uD83C%uDFA4%20%26Walsh%2C%20for%20developing%20the%20awesome%20Design%20Emoji.
Tags:
- portfolio
- cms
- webflow
- joshwork
- art%20director
- interactions
- ix2
Visit Site