Atlanta%20Art%20Director%20creating%20clone-ables%20to%20help%20spread%20understanding%20of%20the%20%27net.%20%0A%0AWanna%20support%20me%3F%20buymeacoffee.com/joshwork
joshwork has 504 followers on Webflow.
.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)
Portfolio%202.0%20-%20Joshwork%20by%20Josh%20Jacobs
%22Digital%20design%20is%20like%20painting%2C%20except%20the%20paint%20never%20dries.%22%0A-Neville%20Brody%0A%0ANew%20day%2C%20new%20portfolio%20site%2C%20if%20for%20no%20other%20reason%20than%20because%20messing%20around%20in%20Webflow%20is%20far%20too%20enjoyable%2C%20and%20my%20aesthetic%20has%20changed%20dramatically.%20Let%20me%20know%20what%20you%20think%20in%20the%20comments.%0A%0AFor%20reference%2C%20see%20my%20old%20site%20here%3A%20https%3A//joshwork.webflow.io/
Tags:
- portfolio
- cms
- webflow
- joshwork
- art%20director
- interactions
- interactions2
- hover
- mouseover
- scroll
Visit Site
Rad%20Mouse%20Movement%20Hero%21%20-%20Joshwork%20Dribbble%20series%20ft.%20UI8
Saw%20this%20cool%20interaction%20by%20UI8%20on%20Dribbble%20and%20had%20to%20try%20and%20recreate%20it%21%20I%20liked%20this%20concept%20as%20a%20hero%20space%2C%20so%20I%20added%20a%20modern%20nav%20to%20it%20that%20goes%20vertical%20on%20MVP%20to%20compliment%20the%20space.%20Let%20me%20know%20what%20you%20think%20in%20the%20comments%2C%20and%20clone%20away%21%0A%0ADesign%20credit%3A%20%22Call%20to%20Action%22%20by%20Anton%20Tkachev%20for%20UI8%20%28https%3A//dribbble.com/shots/6479771-Qaitomo-Call-To-Action%29%2C
Tags:
- hero
- interactions
- dribbble
- joshwork
- mouseover
- movement
- smooth
- menu
- vertical
- vertical%20nav
Visit Site
Predictive%20Text%20Form%21
As%20part%20of%20a%20freelance%20project%20I%27ve%20been%20working%20on%2C%20one%20of%20the%20requirements%20was%20a%20form%20field%20which%20would%20%22predict%22%20what%20the%20user%20was%20typing.%20It%20took%20me%20a%20while%20to%20find%20this%20solution%2C%20but%20once%20I%20found%20it%20and%20implemented%20it%20was%20super%20simple%2C%20and%20so%20I%20thought%20I%27d%20share%20it%20with%20the%20community%21%0A%0AInstructions%20/%20how%20to%27s%20are%20in%20the%20section%20below.%20Enjoy%2C%20and%20let%20me%20know%20what%20you%20think%21
Tags:
- forms
- formfields
- predictive
- responsive
- uiux
- form
- formblock
- joshwork
Visit Site
NEW%20Slider%20Interactions%21%20-%20Dribbble%20Series%20Ft.%20M%20S%20Brar
Wanted%20to%20play%20around%20with%20the%20new%20interaction%20types%20in%20IX2%2C%20and%20as%20always%20got%20a%20little%20carried%20away.%20All%20the%20design%20credit%20goes%20to%20M%20S%20Brar%27s%20%22Capture%20Moments%22%20%28https%3A//dribbble.com/shots/6291284-Capture-Moments%29%2C%20which%20I%20tasked%20myself%20with%20building%20as%20reference.%20Really%20happy%20with%20how%20it%20came%20out.%0A%0APeep%20the%20microinteractions%20on%20the%20menu%20button%20and%20the%20funky%20scroll%20indicator%20%28which%20changes%20to%20reflect%20the%20device%20type%20you%27re%20on%20%uD83D%uDE0D%29.%0A%0ALemme%20know%20what%20you%20think%20in%20the%20comments%21
Tags:
- webflowslider
- slider
- microinteraction
- microinteractions
- scroll
- scrollindicator
- menu
- menubutton
- search
- joshwork
- dribbble
Visit Site
Related%20Posts%20Section%20w/%20Horizontal%20Sticky
I%20had%20a%20dilemma%20on%20a%20recent%20project%3B%20my%20%22related%20posts%22%20section%20was%203000%20pixels%20long%20because%20all%20the%20sections%20were%20stacked%20horizontally.%20It%20was%20a%20mess.%20So%20I%20decided%20I%27d%20try%20something%20more%20horizontal%3B%20the%20problem%20was%2C%20my%20titles%20were%20going%20all%20over%20the%20place%2C%20and%20sliders%20weren%27t%20giving%20me%20the%20flexibility%20I%20was%20looking%20for.%0A%0AThank%20the%20lord%20for%20position%3A%20sticky%21%20using%20this%20horizontally%2C%20as%20opposed%20to%20in%20standard%20vertical%20fashion%2C%20I%20was%20able%20to%20solve%20for%20my%20problem%2C%20to%20much%20fanfare.%20See%20it%20live%20at%20the%20link%20below%2C%20clone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20about%20this%20elegantly%20simple%20solution%21%0A%0Ahttps%3A//prelogin.zentail.com/blog/product-discovery-happens-on-search-google-shopping-actions%0A%0A***To%20make%20this%20work%20right%2C%20you%27ll%20need%20to%20undo%20all%20the%20CMS%20bindings.%20I%27ve%20updated%20the%20Webflow%20document%20with%20a%20second%20page%20that%20has%20the%20same%20elements%2C%20just%20not%20connected%20to%20anything.%20Copy%20that%20one%21
Tags:
- blog
- cms
- related
- particles
- sticky
- webflowsticky
- joshwork
- uxui
Visit Site
CSS%20GRID%20HERO%202%20-%20Dribbble%20Series%20-%20web%20design%2004%20-%20Photo%20Studio
Welcome%20to%20Dribbble%20series%2C%20where%20I%20attempt%20to%20bring%20to%20life%20projects%20created%20by%20popular%20Dribble%20artists%20using%20only%20the%20elements%20supplied%20by%20Webflow%21%20Todays%20project%20is%20web%20design%2004%20-%20Photo%20Studio%20by%20Romeo%20M.%20%u2022%20https%3A//dribbble.com/shots/5593011-web-design-04-Photo-Studio%0A%0AIn%20my%20freelancing%20using%20Webflow%2C%2095%25%20of%20my%20work%20involves%20creating%20crazy%2C%20weird%20sliders%20that%20accomplish%20certain%20goals.%20This%20project%20is%20peak%20slider%3B%20displaying%20information%2C%20using%20grid%2C%20with%20customizations%20applied%20to%20the%20snide%20nav%2C%20arrows%2C%20%26%20content.%0A%0AFor%20this%20project%2C%20I%20opted%20to%20change%20a%20few%20things%20that%20didn%27t%20make%20sense.%20For%20example%2C%20there%20were%203%20different%20places%20in%20the%20page%20where%20social%20links%20were%20listed%2C%20which%20felt%20like%20overkill.%20I%20also%20nixed%20the%20mouse%20icon%20in%20the%20prev/next%20section%2C%20as%20the%20slider%20doesn%27t%20let%20you%20interact%20like%20that.%20Clone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20comments%21%20Be%20sure%20to%20download%20the%20Fontawesome%20font%20family%20to%20make%20sure%20the%20icons%20work%20%28https%3A//fontawesome.com/cheatsheet%29
Tags:
- css
- cssgrid
- joshwork
- dribbble
- hero
- interactions
- interactions2
- responsive
- mobile
- trendy
Visit Site
Trendy%20Search%20Interaction%20-%20022%20%u2022%A0Search%20by%20Clara%20Boyle%20-%20Joshwork%20Dribbble%20Series
Welcome%20to%20Dribbble%20series%2C%20a%20new%20effort%20in%20which%20I%20attempt%20to%20bring%20to%20life%20interactions%20created%20by%20popular%20Dribble%20artists%20using%20only%20the%20elements%20supplied%20by%20Webflow%21%20Today%27s%20project%20is%20based%20on%20022%20%u2022%20Search%20by%20user%20Clara%20Boyle%20%28https%3A//dribbble.com/shots/5355680-022-Search%29%0A%0AMicrointeractions%20are%20not%20only%20trendy%2C%20but%20a%20vital%20piece%20of%20user%20experience%20in%202018.%20Here%27s%20a%20simple%2C%20effective%20way%20to%20minimize%20and%20maximize%20a%20critical%20element%20of%20your%20site%2C%20the%20search%20function.%20with%20a%20simple%20click%2C%20the%20icon%20representing%20the%20action%20becomes%20the%20button%20for%20the%20action%20itself.%20Simple%2C%20easy%2C%20and%20intuitive.%20Clone%20away%21
Tags:
- search
- microinteractions
- cloneable
- cloned
- joshwork
- webflowcms
- interactions2
- interaction
- microinteraction
Visit Site
Fancy%20Hide/Show%20Menu%20on%20Scroll
One%20of%20my%20favorite%20modern%20web%20effects%20is%20when%20a%20menu%20hides%20on%20scroll%20down%20and%20reveals%20on%20scroll%20up.%20Most%20mobile%20web%20browsers%20like%20Google%20Chrome%20do%20this%20for%20their%20top%20menus%2C%20and%20for%20good%20reason%3B%20moving%20these%20elements%20out%20of%20the%20way%20of%20the%20user%20allows%20the%20page%20content%20to%20reign%20supreme.%0A%0AI%20use%20this%20effect%20on%20my%20personal%20site%2C%20and%20now%20so%20can%20you%21%20You%20can%20also%20customize%20the%20delay%20or%20offset%20to%20whenever%20you%27d%20like%20the%20menu%20to%20start%20disappearing%20or%20reappearing.%20Don%27t%20forget%20to%20like%2C%20comment%2C%20and%20clone%20away%21
Tags:
- webflow
- menu
- navbar
- uiux
- clone
- cloneable
- joshwork
- scroll
- scrollable
- animation
- interactions
- interaction
- interactions2
Visit Site
CSS%20GRID%20HERO%20-%20S.M.A.T%20Lab%20/%20True%20AI%20-%20Joshwork%20Dribbble%20Series
Welcome%20to%20Dribbble%20series%2C%20a%20new%20effort%20in%20which%20I%20attempt%20to%20bring%20to%20life%20interactions%20created%20by%20popular%20Dribble%20artists%20using%20only%20the%20elements%20supplied%20by%20Webflow%21%20Todays%20project%20is%20S.M.A.T%20Lab%20/%20True%20AI%20by%20user%20Mike%20%7C%20https%3A//dribbble.com/shots/5430800-S-M-A-T-Lab-True-AI%29.%0A%0ASimply%20click%20a%20column%20and%20see%20the%20content%20change%20before%20your%20eyes%21%20I%27m%20a%20huge%20fan%20of%20how%20this%20turned%20out%2C%20on%20all%20viewports.%20And%20best%20of%20all%2C%20I%20got%20a%20wonderful%20excuse%20to%20test%20out%20CSS%20Grid.%20Clone%20away%2C%20and%20let%20me%20know%20what%20you%20think%20in%20the%20columns%21
Tags:
- cssgrid
- grid
- columns
- dribbble
- webflow
- interactions
- interactions2
- cloneable
- joshwork
- responsive
- modern
- uiux
Visit Site