WebDev%20For%20You.%20Visual%20web%20development%20made%20easy.
webdevforyou has 954 followers on Webflow.
webdev-for-you-krai-by-studio-vor
Hi%20everyone%21%20I%20built%20this%20website%20from%20a%20design%20concept%20by%20Zak%20Steele-Eklund%20from%20Studio%20V%D8R.%20Here%20is%20their%20dribbble%20page%3A%20https%3A//dribbble.com/studiovor%0A%0AThe%20designs%20by%20Studio%20V%D8R%20have%20a%20lot%20of%20great%20illustrations%20and%20animations%2C%20so%20it%20was%20fun%20building%20this%20in%20Webflow%20to%20showcase%20the%20power%20of%20Webflow%2C%20and%20just%20how%20much%20you%20can%20do%20with%20it%20%3A%29.%0A%0AHere%20is%20a%20video%20tutorial%20of%20how%20I%20built%20the%20website%3A%0Ahttps%3A//www.youtube.com/watch%3Fv%3D-R9UO_eNQDg%0A%0AHappy%20Webflowing%20%3A%29.
Tags:
- webdevforyou
- webflow
- studiovor
- webdesign
- dribbble
- after%20effects
- photoshop
- parallax
- animations
- interactions
- slider
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23135
Welcome%20to%20Daily%20Interaction%20%23135.%0A%0AThis%20demo%20showcases%20a%20project%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20the%20title%20and%20caption%20move%20on%20hover.%20A%20%22View%20Project%22%20appears%20and%20moves%20down%20with%20an%20underline%20animation.%20There%20is%20also%20a%20cover%20overlay%20that%20moves%20and%20appears%20from%20the%20upper-left%20on%20hover.%0A%0AThis%20effect%20was%20achieved%20by%20creating%20a%20card%20wrapper%20and%20placing%20the%20color%20overlay%20inside%20of%20it%20with%20a%20position%20of%20absolute%20and%20full.%20Then%20a%20text%20wrapper%20was%20added%20to%20the%20card%20wrapper%20in%20the%20center%20with%20a%20heading%2C%20text%20block%2C%20and%20view%20project%20text%20block.%20The%20%27view%20project%27%20text%20and%20underline%20were%20added%20inside%20of%20another%20wrapper.%20Then%20with%20interactions%20I%20had%20the%20different%20elements%20move%20and%20the%20underline%20scale.%0A%0AInspired%20by%3A%20https%3A//www.everess.fr/%0A%0AThere%20will%20be%20no%20daily%20interactions%20for%20a%20while%20as%20I%20am%20currently%20working%20on%20a%20few%20other%20projects.%20Stay%20tuned%20for%20the%20new%20projects%21%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- card
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23134
Welcome%20to%20Daily%20Interaction%20%23134.%0A%0AThis%20demo%20showcases%20a%20parallax%20card%20animation%20on%20mouse%20move.%0A%0AWith%20this%20effect%20a%20gradient%20overlay%20moves%20with%20the%20mouse%20on%20hover%2C%20and%20a%20border%20moves%20in%20the%20opposite%20direction.%20The%20text%20also%20moves%20and%20rotates%20left%20and%20right%20with%20the%20mouse.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20the%20gradient%20overlay%20and%20border%20within%20the%20card%20wrapper.%20The%20text%20was%20placed%20in%20the%20bottom%20right%20of%20the%20border%20div%20using%20flexbox.%20Then%20in%20interactions%20I%20added%20a%20%27mouse%20move%20over%20element%27%20interaction%20and%20had%20the%20elements%20move%20and%20rotate%20on%20the%20x%20and%20y%20axis%20when%20the%20user%20moves%20their%20mouse%20over%20the%20card%20wrapper.%0A%0AInspired%20by%3A%20https%3A//tympanus.net/Development/TiltHoverEffects/%0A%0AImages%20from%3A%20Unsplash.com%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteractions
- interactions
- parallax
- mouseover
- mousemovement
- card
- rotate
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23133
Welcome%20to%20Daily%20Interaction%20%23133.%0A%0AThis%20demo%20showcases%20a%20parallax%20card%20animation%20on%20mouse%20move.%0A%0AWith%20this%20effect%20a%20card%20rotates%20on%20mouse%20move%2C%20and%20the%20image%20inside%20the%20card%20rotates%20and%20moves%20as%20well%20to%20create%20the%20effect%20of%20the%20image%20moving%20inside%20of%20the%20card.%20A%20caption%20also%20appears%20when%20hovering%20over%20the%20card.%20The%20card%20is%20in%20a%203d-wrapper%20with%20a%20child%20perspective%20applied%20to%20it%20to%20give%20the%20card%20a%203d%20effect%20as%20it%20moves.%0A%0AInspired%20by%3A%20https%3A//codepen.io/andymerskin/pen/XNMWvQ%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- parallax
- card
- mouseover
- mousemovement
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23132
Welcome%20to%20Daily%20Interaction%20%23132.%0A%0AThis%20demo%20showcases%20a%20fullscreen%20menu%20animation%20when%20clicking%20on%20the%20menu%20trigger.%0A%0AFor%20this%20effect%20the%20menu%20comes%20down%20and%20lines%20scale%20in%20to%20create%20an%20interesting%20effect.%20The%20menu%20items%20also%20reveal%20from%20top%20to%20bottom.%20The%20menu%20items%20are%20in%20a%20wrapper%20set%20to%20an%20overflow%20of%20hidden%20so%20it%20creates%20the%20reveal%20effect.%20There%20is%20also%20a%20submenu%20at%20the%20bottom%20of%20the%20menu%20that%20fades%20in%20and%20moves%20up%20from%20the%20bottom.%20The%20scale%2C%20opacity%2C%20and%20move%20animations%20for%20the%20menu%20elements%20were%20set%20in%20interactions.%0A%0AThere%20is%20also%20a%20menu%20trigger%20animation%20that%20turns%20the%20menu%20lines%20into%20an%20x%20on%20click%2C%20and%20then%20reverses%20on%20second%20click.%0A%0AInspired%20by%3A%20https%3A//animal.cc/%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- interactions
- fullscreen%20menu
- menu
- menutrigger
- menuconcept
- onclick
- click
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23131
Welcome%20to%20Daily%20Interaction%20%23131.%0A%0AWith%20this%20effect%20a%20border%20appears%20around%20the%20logo%20and%20lines%20appear%20from%20all%20corners%20of%20the%20logo.%0A%0AThe%20effect%20was%20achieved%20by%20setting%20the%20border%20color%20to%20transparent%20on%20the%20initial%20state%20and%20on%20the%20hover%20state%20changing%20it%20to%20black.%20I%20then%20placed%20lines%20with%20a%20width%20of%2015px%20and%20height%20of%203px%20and%20vice%20versa%20in%20the%20different%20corners%20of%20the%20logo.%20Then%20in%20interactions%20I%20scaled%20them%20from%200%20to%201%20respectively%20on%20the%20x%20and%20y%20axis%20for%20the%20horizontal%20and%20vertical%20lines.%20To%20minimize%20the%20number%20of%20interactions%20that%20needed%20to%20be%20applied%20to%20the%20lines%20I%20created%20a%20class%20for%20the%20corner%20horizontal%20lines%20and%20the%20corner%20vertical%20lines.%20I%20then%20added%20combo%20classes%20and%20placed%20the%20lines%20in%20the%20different%20corners%20around%20the%20logo.%20This%20allowed%20me%20to%20only%20use%20two%20interactions%20for%20the%20horizontal%20and%20vertical%20lines.%20I%20also%20changed%20the%20transform-origin%20for%20the%20different%20lines%20so%20they%20scaled%20in%20from%20the%20correction%20side.%0A%0AInspired%20by%3A%20https%3A//codepen.io/Sherpa23/pen/rKvJXg
Tags:
- webdevforyou
- webflow
- dailyinteraction
- interactions
- logo
- logos
- border
- scale
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Architecture%20Magazine%20Website
Hi%20Everyone%21%20Here%20is%20an%20Architecture%20Magazine%20layout%20I%20built%20in%20Webflow%20to%20showcase%20Grid%202.0%20and%20Flexbox.%20%0A%0AThe%20design%20is%20by%20Juraj%20Masar.%20Here%20is%20his%20Dribbble%20page%3A%20https%3A//dribbble.com/masar_official%0A%0AHere%20is%20the%20video%20tutorial%20on%20how%20I%20created%20this%20layout%20in%20Webflow%3A%20https%3A//www.youtube.com/watch%3Fv%3DOc4HHJ--KHo
Tags:
- webdevforyou
- webflow
- header
- responsive
- responsive%20design
- responsive%20web%20design
- responsive%20websites
- figma
- grid
- grid%20layout
- grid%20design
- cssgrid
- flexbox
- architecture
- magazine
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23130
Welcome%20to%20Daily%20Interaction%20%23130.%0A%0AThis%20demo%20showcases%20a%20blog%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20the%20image%20rotates%2C%20a%20color%20overlay%20appears%2C%20and%20the%20date%20of%20the%20blog%20post%20appears%20on%20hover.%20The%20summary%20panel%20below%20also%20moves%20up.%20When%20hovering%20over%20the%20%27Read%20More%27%20button%20the%20background%20and%20text%20changes%20color.%0A%0AI%20first%20added%20all%20of%20the%20elements%20and%20then%20animated%20via%20interactions.%20For%20the%20image%20I%20placed%20it%20inside%20of%20an%20image%20wrapper%20and%20set%20the%20overflow%20of%20the%20wrapper%20to%20hidden.%20I%20then%20set%20the%20width%20and%20height%20of%20the%20image%20to%20150%25%20so%20that%20when%20it%20rotates%20it%20is%20still%20visible%20inside%20of%20the%20image%20wrapper.%0A%0AInspired%20by%3A%20https%3A//codepen.io/ChuiSauCE/pen/KGpQbe%0A%0ADaily%20interactions%20will%20resume%20on%20Monday%20June%203rd.%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- blog
- card
- rotate
- scale
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23129
Welcome%20to%20Daily%20Interaction%20%23129.%0A%0AThis%20demo%20showcases%20a%20180%B0%20project%20card%20animation%20on%20hover%20and%20click.%0A%0AWith%20this%20effect%20stars%20scale%20in%20and%20out%20behind%20the%20image.%20Also%20on%20mouse%20move%20the%20image%20moves%20around%20the%20card.%20When%20you%20click%20on%20the%20card%20the%20card%20rotate%20180%20degrees%20to%20reveal%20the%20more%20information.%0A%0AFor%20the%20stars%20I%20created%20a%206x8%20grid%20of%2050x50%20blocks%20and%20added%20two%20div%20blocks%20inside%20to%20create%20the%20cross.%20Then%20in%20interactions%20I%20have%20them%20rotate%2C%20scale%2C%20and%20loop%20on%20hover.%20On%20hover%20out%20the%20crosses%20go%20back%20to%20their%20original%20size%20and%20stop%20rotating.%20For%20the%20image%20moving%20I%20added%20a%20mouse%20move%20over%20element%20interaction%20and%20just%20moved%20the%20image%2020px%20to%20each%20side%20as%20the%20mouse%20moved%20around%20the%20card.%20On%20click%20I%20added%20a%20rotation%20to%20the%20card%2C%20so%20I%20made%20sure%20to%20place%20the%20card%20in%20a%203d-wrapper%20and%20added%20child%20perspective%20to%20it.%20Then%20inside%20of%20the%20card%20wrapper%20I%20added%20a%20front%20and%20back%20div%20to%20represent%20the%20front%20and%20back%20of%20the%20card.
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- 3dcards
- 3d%20effect
- 3dtransforms
- rotate
- scale
- grid
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23128
Welcome%20to%20Daily%20Interaction%20%23128.%0A%0AThis%20demo%20showcases%20a%20project%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20a%20panel%20rotates%20in%20from%20the%20left%20to%20reveal%20more%20information%20about%20the%20image%2C%20and%20the%20image%20also%20slides%20to%20the%20right%2C%20as%20if%20to%20make%20room%20for%20the%20panel.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20an%20image%20wrapper%20and%20a%20content%20wrapper%20within%20a%20wrapper%20with%20a%20child%20perspective%20applied%20to%20it.%20The%20content%20wrapper%20was%20set%20to%2050%25%20within%20the%203d-wrapper%20and%20the%20transform-origin%20was%20set%20to%20the%20left%20so%20it%20would%20rotate%20in%20from%20the%20left%20side.%20Another%20div%20block%20with%20the%20background%20image%20was%20added%20inside%20of%20the%20image%20wrapper%2C%20and%20the%20image%20wrapper%20was%20set%20to%20an%20overflow%20of%20hidden%20so%20that%20when%20the%20image%20slides%20to%20the%20right%20you%20don%27t%20see%20it%20beyond%20the%20bounds%20of%20the%20image%20wrapper.%20In%20interactions%20I%20rotated%20the%20content%20wrapper%20from%20-90%20degrees%20to%200%20degrees%2C%20and%20moved%20the%20image%20to%20the%20right%2050%25.%0A%0AInspired%20by%3A%20https%3A//tympanus.net/Tutorials/CaptionHoverEffects/index4.html%0A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- 3d%20effect
- 3d%20animation
- 3dtransforms
- 3dcards
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23127
Welcome%20to%20Daily%20Interaction%20%23127.%0A%0AThis%20demo%20showcases%20a%20category%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20a%20circle%20scales%20up%20to%20fill%20the%20entire%20card%20with%20a%20color%2C%20and%20the%20inner%20circle%2C%20and%20circle%20border%20become%20white.%20The%20text%20also%20becomes%20white%20to%20be%20more%20readable%20on%20the%20background%20color.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20an%20inner%20circle%2C%20circle%20border%2C%20and%20icon%20within%20a%20circle%20wrapper.%20Then%20with%20interactions%20I%20have%20the%20circle%20scale%20up%2C%20and%20the%20border%20and%20background%20circle%20change%20color%20on%20hover.%20Each%20card%20has%20a%20separate%20mouse%20out%20interaction%20so%20that%20it%20can%20revert%20to%20the%20individual%20color%20of%20the%20specific%20card.%0A%0AInspired%20by%3A%20https%3A//codepen.io/jorgesanes10/pen/QdMEXr%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- interactions
- icons
- cardio
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23126
Welcome%20to%20Daily%20Interaction%20%23126.%0A%0AThis%20demo%20showcases%20a%20profile%20card%20animation%20on%20hover.%0A%0AWith%20this%20animation%20a%20circle%20comes%20in%20from%20the%20top%2C%20and%20the%20profile%20image%20scales%20down%20to%20reveal%202%20borders%20behind%20the%20image.%20A%20div%20block%20comes%20in%20from%20the%20bottom%20as%20well%20to%20reveal%20social%20media%20icons%2C%20and%20the%20social%20media%20icons%20change%20color%20on%20hover.%0A%0AThe%20effect%20was%20achieved%20by%20setting%20the%20overflow%20of%20the%20card%20wrapper%20to%20hidden%2C%20and%20moving%20the%20circle%20and%20bottom%20block%20out%20of%20the%20card%20wrapper%20within%20interactions.%20Then%20on%20hover%20they%20come%20back%20in.%20For%20the%20image%20I%20have%20it%20scale%20down%20in%20interactions%2C%20and%20another%20border%20appears%20behind%20the%20image.%20The%20image%20and%20border%20were%20placed%20in%20a%20div%20block%20with%20a%20blue%20background%2C%20that%20is%20why%20the%20image%20appears%20to%20have%20two%20borders%20around%20it.%20The%20blue%20color%20behind%20the%20image%20is%20also%20a%20bit%20darker%20to%20add%20a%20bit%20of%20contrast%20to%20the%20image%20section.%0A%0AInspired%20by%3A%20https%3A//codepen.io/FrankieDoodie/pen/NOJpVX
Tags:
- webdevforyou
- webflow
- dailyinteraction
- interactions
- profile
- card
- animation
- socialmedia
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Animal%20Conservation%20UI
This%20demo%20showcases%20an%20animal%20conservation%20header%20in%20Webflow.%20It%20is%20for%20a%20video%20tutorial%20that%20I%20created%20on%20my%20YouTube%20Channel.%20%0A%0AThis%20demo%20incorporates%20the%20following%3A%0A%0A-An%20intro%20with%20a%20logo%20animation%20created%20in%20After%20Effects%20and%20added%20with%20Lottie%0A-A%20Slider%0A-Animated%20headings%20when%20the%20slides%20change%0A-A%20Lightbox%20link%20with%20the%20background%20color%20of%20the%20site%0A-Elements%20added%20with%20Grid%20and%20Flexbox%0A%0AYou%20can%20watch%20the%20video%20tutorial%20here%3A%0Ahttps%3A//www.youtube.com/watch%3Fv%3DVFBVh9FqDdA
Tags:
- webdevforyou
- webflow
- header
- uidesign
- aftereffects
- after%20effects
- lottie
- lottiejs
- slider
- socialmedia
- cssgrid
- grid
- grid%20layout
- flexbox
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23125
Welcome%20to%20Daily%20Interaction%20%23125.%0A%0AThis%20demo%20showcases%20a%203d%20portfolio%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20an%20image%20rotates%2090%20degrees%20back%20and%20a%20content%20wrapper%20rotates%2090%20degrees%20in%20on%20hover.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20an%20image%20wrapper%20and%20a%20content%20wrapper%20inside%20of%20a%203d%20wrapper.%20The%203d%20wrapper%20has%20a%20child%20perspective%20applied%20to%20it%20via%20the%20transform%20option.%20This%20allows%20the%20div%20blocks%20inside%20of%20the%20wrapper%20to%20have%20a%203d%20effect%20as%20they%20rotate%20in%20and%20out.%20The%20transform-origin%20for%20the%20image%20wrapper%20was%20set%20to%20the%20bottom%2C%20and%20the%20transform-origin%20for%20the%20content%20wrapper%20was%20set%20to%20the%20top.%20In%20interactions%20I%20applied%20the%20rotation%20and%20opacity%20animations%20to%20both%20the%20image%20wrapper%20and%20content%20wrapper.%20Both%20div%20blocks%20are%20rotated%20on%20the%20x-axis.%0A%0AInspired%20by%3A%20https%3A//codepen.io/littlesnippets/pen/qbEdRW%0A%0ATo%20view%20more%20daily%20interactions%20and%20premium%20content%20visit%3A%0Ahttps%3A//www.webdevforyou.com/
Tags:
- webdevforyou
- webflow
- dailyinteraction
- interactions
- 3dcards
- card
- 3d%20effect
- 3dtransforms
- 3d%20animation
- imagehover
- hover%20effects
- hover
Visit Site
WebDev%20For%20You%20-%20Daily%20Interaction%20%23124
Welcome%20to%20Daily%20Interaction%20%23124.%0A%0AThis%20demo%20showcases%20a%20category%20card%20animation%20on%20hover.%0A%0AWith%20this%20effect%20lines%20scale%20in%20from%20the%20top-left%20and%20bottom%20right%20around%20the%20image.%20There%20are%20two%20blocks%20around%20the%20image%20and%20the%20lines%20for%20each%20block%20start%20animating%20at%20opposite%20angles%20to%20create%20an%20interesting%20line%20effect%20around%20the%20image.%0A%0AThe%20effect%20was%20achieved%20by%20placing%20two%20absolute%20div%20blocks%20inside%20of%20the%20card%20wrapper%20and%20then%20moving%20the%20first%20div%20block%20a%20bit%20to%20the%20upper%20left%2C%20and%20the%20second%20div%20block%20towards%20the%20bottom%20right.%20Then%20in%20the%20absolute%20div%20blocks%204%20div%20blocks%20were%20added%20to%20represent%20the%20lines.%20The%20lines%20have%20a%20size%20of%201%20px%2C%20and%20were%20placed%20on%20each%20side%20of%20the%20div%20block.%20I%20changed%20the%20transform-origin%20for%20each%20line%20to%20make%20sure%20it%20scaled%20in%20from%20the%20correct%20place.%20In%20interactions%20I%20started%20each%20line%20at%20a%20scale%20of%200%20and%20then%20scaled%20it%20back%20to%201.%0A%0AInspired%20by%3A%20https%3A//codepen.io/littlesnippets/pen/XXKwxM
Tags:
- webdevforyou
- webflow
- dailyinteraction
- dailyinteractions
- imagehover
- hover%20effects
- hover
Visit Site