dhruvsachdev has 305 followers on Webflow.
180%20Beautiful%20Gradients
Make%20your%20website%20stand%20out%20with%20180%20ready-to-use%20gradients.%20%0A%0AThis%20cloneable%20includes%20gradients%20with%20different%20styles%20%u2014%20including%20angular%2C%20radial%20directions%20and%20gradients%20with%20multiple%20colours%20%28up%20to%205%29.%20%0A%0ACreating%20gradients%20can%20be%20tedious%2C%20especially%20when%20trying%20multiple%20styles.%20%0A%0AEach%20global%20class%20has%20been%20named%20systematically%20so%20you%20can%20reuse%20it%20throughout%20any%20project%2C%20for%20example%3A%20%22gradient-night-fade%22.%0A%0AAdapted%20for%20Webflow%20from%20https%3A//webgradients.com
Tags:
- gradient
- gradients
- cloneable
- uikit
- portfolio
- template
- ecommerce
Visit Site
20%20Line%20Hover%20Animations
Here%20are%2020%20Plug%20%26%20Play%20CSS-only%20link%20hover%20effects%20for%20your%20next%20project%21%20%0A%0ASubtle%20line%20animations%20can%20be%20a%20simple%20way%20to%20enhance%20your%20site%20experience%20through%20delightful%20micro-interactions.%0A%0AInspired%20and%20adapted%20for%20Webflow%20from%3A%20https%3A//github.com/codrops/LineHoverStyles%0A%0A*includes%2021%20effects%2C%20but%2020%20sounds%20cleaner.
Tags:
- link
- effects
- interactions
- css
- animation
- underline
- wavyunderline
- hover
- portfolio
Visit Site
Emoji%20Button
This%20cloneable%20features%20a%20wacky%20%26%20playful%20button%20that%20fires%20emojis%20on%20click.%20I%27m%20a%20sucker%20for%20these%20effects%21%0A%0AI%20planned%20to%20use%20Webflow%20interactions%20but%20realised%20that%20physics%2C%20randomness%2C%20and%20subtle%20details%20could%20be%20better%20achieved%20using%20a%20library.%20Reference%3A%20https%3A//github.com/JoshuaKGoldberg/emojisplosion
Tags:
- rainbow
- emoji
- emojis
- interaction
- button
- playful
- colorful
Visit Site
Interactive%203D%20Sphere
Three.JS%20is%20used%20to%20generate%20an%20interactive%20twisting%20sphere.%20You%20can%20click%20and%20drag%20anywhere%20to%20rotate%20it.%0A%0APlaying%20with%20settings%2C%20especially%20%22phase%22%2C%20will%20produce%20interesting%20%28colourful%29%20results%21%0A%0AInspired%20by%20https%3A//github.com/codrops/WebGLBlobs
Tags:
- threejs
- interactive
- sphere
- portfolio
- 3deffect
- webgl
- customcode
- blob
- agencyportfolio
- designportfolio
- template
- interaction
- animation
- portfoilio
- web3
- crypto
- nft
Visit Site
Live%20Crypto%20Price%20Ticker
This%20infinite%20marquee%20displays%20live%20crypto%20token%20data.%0A%0AI%27ve%20used%20the%20CoinGecko%20API%20for%20pricing%20information%20and%20reverse-engineered%20token%20logos%20from%20a%20popular%20exchange.%20You%20can%20add%20further%20tokens%20simply%20by%20passing%20them%20to%20the%20fetch%20URL%20in%20my%20code.%0A%0AThe%20marquee%20will%20also%20pause%20on%20hover%20to%20allow%20reading.%20The%20marquee%20will%20also%20pause%20on%20hover.%20Inspired%20by%20https%3A//auros.global
Tags:
- marquee
- crypto
- prices
- token
- bitcoin
- infinitemarquee
- loop
- web3
- ticker
- priceticker
- template
- ecommerce
Visit Site
Solana%20%5BRebuild%5D
I%20loved%20the%20Solana%20landing%20page%20and%20couldn%27t%20resist%20rebuilding%20it%20in%20Webflow.%20I%27ve%20also%20layered%20a%20few%20subtle%20effects%20on%20top.
Tags:
- solana
- rebuild
- webflowrebuilds
- crypto
- web3
- nft
- blockchain
- interactions
- countup
- parallax
Visit Site
Image%20Trailing%20Effect
This%20is%20a%20fun%20interaction%20with%20an%20image%20trailing%20effect.%20The%20idea%20is%20to%20follow%20the%20mouse%20and%20show%20a%20trail%20of%20images.%0A%0AThis%20effect%20uses%20vanilla%20JavaScript%20to%20paint%20images%20when%20hovering%20over%20links%20within%20a%20canvas%20element.
Tags:
- image
- imagetrail
- stutter
- effect
- customcode
- menu
- links
- interactions
- cool%20effects
- trailing
Visit Site
Racing%20Lights%20Effect
I%20loved%20the%20dancing%20light%20like%20effect%20from%3A%20https%3A//www.ribbon.finance%2C%20and%20curiosity%20made%20me%20rebuild%20it.%0A%0AI%27ve%20used%20CSS%20animations%20for%20the%20lights%2C%20which%20will%20animate%20vertically%20on%20smaller%20screens.
Tags:
- racing
- dancing
- lights
- ribbonfinance
- crypto
- nft
- rebuild
- defi
Visit Site
3-D%20Cube%20for%20Features
This%20simple%20section%20with%20a%203-D%20cube%20can%20be%20customised%20with%20images%20or%20videos%2C%20making%20for%20an%20interesting%20features%20section.%20Feel%20free%20to%20stack%20effects%20on%20top%20of%20this%21%0A%0AThe%203-D%20cube%20rotation%20is%20achieved%20through%20Webflow%20interactions%20and%20transforms.
Tags:
- cube
- rotation
- loop
- features
- section
- interactions
- 3deffect
- 3dmotion
- 3dtransform
Visit Site
Fullscreen%20Parallax%20Interaction
A%20full-screen%20parallax%20interaction%20that%20reveals%20different%20sections%20on%20scroll.%20%20It%20also%20includes%20a%20subtle%20blurring%20effect.%20%0A%0AThis%20works%20well%20for%20a%20slick%20portfolio%20section%20like%20https%3A//www.dariaizbash.com%2C%20which%20fully%20inspired%20this%20effect%21
Tags:
- full
- scroll
- slides
- interaction
- whilescrollinginview
- revealonscroll
- textreveal
- parallax
- portfolio
Visit Site
Interactive%20Sketch%20Portfolio
A%20live%2C%20drawing%20canvas%20where%20you%20can%20influence%20the%20pixels.%20%0A%0AInteractivity%20can%20make%20visitors%20feel%20engaged%20in%20a%20fun%20way.%20I%20used%20sketch.js%20for%20the%20drawing%20canvas.%20Use%20your%20cursor%20or%20touch%20to%20draw%20right%20on%20the%20screen.%0A%0ADavid%27s%20portfolio%20-%20https%3A//www.davidfiz.com%20was%20one%20of%20the%20most%20pleasant%20landing%20pages%20I%27ve%20seen%2C%20and%20I%20wanted%20to%20see%20if%20I%20could%20rebuild%20it.%20I%20have%20layered%20a%20number%20of%20interactions%20on%20top.
Tags:
- sketch
- sketchable
- draw
- sketchjs
- portfolio
- hero
- work
- customcode
- interactive
- minimal
- interaction
- template
Visit Site
Local%20Timezones%20%5BUtility%5D
An%20automatic%20timezone%20clock%20for%20cities%20around%20the%20world%20%uD83C%uDF0D%0A%0AShow%20the%20current%20local%20time%20for%20your%20city.%20It%20keeps%20itself%20up%20to%20date%20every%2060%20seconds.%20I%27ve%20used%20CSS%20to%20add%20a%20blinking%20effect.%0A%0AHow%20it%20works%3A%0AIt%20uses%20data%20attributes%20to%20define%20the%20timezone.%20I%27ve%20written%20code%20to%20calculate%20and%20display%20the%20local%20time%20of%20your%20city.%20There%20are%20separate%20colours%20for%20%22Open%22%2C%20%22Evening%22%2C%20and%20%22Closed%22%20office%20hours.%20These%20can%20be%20styled%20through%20their%20respective%20classes.%0A%0AHow%20to%20use%3A%0A1%29%20Find%20your%20timezone%3A%20https%3A//timezonedb.com/time-zones%0A%0A2%29%20The%20%22Location%20Row%22%20element%20contains%20a%20single%20data-timezone%20attribute.%20Change%20the%20value%20to%20your%20timezone.%20Everything%20else%20will%20auto-update%20%3A%29%0A%0AYou%20can%20change%20the%20opening/%20closing%20hours%20%26%20messages%20in%20custom%20code.%20The%20design%20was%20inspired%20by%20https%3A//practice.inc
Tags:
- timezone
- localisation
- time
- clock
- blinking
- localtime
- timezones
- city
- cities
- animation
Visit Site
Magnetic%20Call%20To%20Action
This%20cloneable%20features%20a%20circular%20magnetic%20CTA%20%26%20trailing%20custom%20cursor.%0A%0ACircletype.js%20was%20used%20for%20the%20circular%20text.%20You%20can%20change%20the%20text%20and%20the%20circle%20radius%20will%20auto-calculate.%0A%0AInspired%20by%20the%20brilliant%20https%3A//www.forstellar.com%20design%20by%20Jomor.
Tags:
- magnetic
- calltoaction
- interaction
- circular
- button
- customcursor
- circle
- text
- circletext
Visit Site
Scroll%20Snapping%20Cards
Cards%20snap%20into%20place%20as%20you%20scroll.%20The%20slides%20change%20with%20an%20interesting%20reversing%20effect.%20%0A%0APosition%20sticky%20and%20Webflow%20interactions%20give%20the%20illusion%20of%20scroll%20snapping.%0A%0AThe%20component%20is%20designed%20to%20convert%20into%20static%20slides%20on%20mobile%20to%20preserve%20the%20ease%20of%20use.%20Maybe%20a%20horizontal%20scrolling%20version%20might%20work%20better%3F%0A%0Ahttps%3A//www.veri.co%20by%20Joseph%20Berry%20inspired%20this%20effect.
Tags:
- scrolling
- sliding
- cards
- cardslider
- sticky
- slider
- scrollsnap
- interactions
Visit Site
90%27s%20Retro%20Style%20Portfolio
I%20loved%20Dries%20Bos%27s%20portfolio%20%28http%3A//driesbos.com%29%2C%20so%20I%20gave%20rebuilding%20it%20in%20Webflow%20a%20shot%21%0A%0AThis%20minimal%20portfolio%20features%20a%20cubic%2C%2090%27s%20retro%20look.%20Each%20block%20reveals%20a%20preview%20when%20you%20hover%20over.%20The%20blocks%20are%20stackable%2C%20making%20it%20easy%20to%20add%20or%20remove%20items.%0A%0AI%27ve%20implemented%20a%20custom%20cursor.%20I%27ve%20written%20Javascript%20to%20remove%20in-line%20styles%20added%20by%20Webflow%20interactions%20to%20avoid%20clashes%20once%20the%20page%20load%20animation%20is%20completed.
Tags:
- retro
- retrowave
- synthwave
- cube
- cubic
- portfolio
- interactions
- glow
- cloneable
- template
Visit Site