Discover the best circular-text websites created by professional designers. Get inspired and start planning your perfect circular-text web design today!

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Circle Text

Trendy AF Circular Text

Was a little worried that I wasn't going to be able to achieve this effect; the left rail of photos moving with the slider, the text being yellow over the images... it all seemed impossible.

But, as I am constantly finding out, nothing is impossible in Webflow. Made purely with CSS, Interactions, and alot of messing about. Particularly proud of some of the smaller viewport accommodations.

Clone away, and let me know what you think in the comments, or if you're interested in knowing how I made this project come to life.

Strive, "Plaid Dress": https://dribbble.com/shots/6711696-Plaid-Dress

Allfather Hero Slider

Dynamic Hero Slider! - Dribbble Series ft. Strive

Hey everyone! Just playing with some super simple headline highlight effects, and thought I'd share them with you! Enjoy!

Headline Highlight + Display on Interaction

Headline Highlight + Display on Load/Scroll/Click

Saw an interesting interaction online and thought I'd try to translate it into webflow. I also added the same interaction on scroll over for mobile, so nobody gets left out! Clone away, Webflow-ites!

Circular Hover Effect

One of my favorite, trendy interactions is a footer that reveals itself once the user gets to the bottom of the page. I've used this effect a number of times, and thought I'd share it with you (trendy vertical nav included)! Enjoy, and clone away!

For Cloners: Be sure to make the height of the section-footer-spacer to be the same as your footer height is for the reveal to work! Or, if your footers height is content-based, duplicate the footer as you want it, rename it, and give it the following values: z-index: 0, opacity: 0, position: relative. That should solve any issues you might have!

Footer Reveal on Scroll

Trendy Footer Reveal!

Just using one custom cursor per page? That's old hat. Using the powerful, simple CSS Clip property, you can use a variety of cursors in a single page, opening up the opportunity for some very unique and different explorations of what a cursor can be!

Wanna have your cursor change text between CMS elements? You can do that! How about cursors with different interactions? You can do that too! 

This project just scratches the surface of me exploring the use of multiple different cursors in-page, and I hope you guys in the community use this solution to make some super cool stuff 😎

Looking forward to hearing your thoughts in the comments!

Switch Cursors By Section Using CSS Clip! ✂️

Switch Custom Cursors In-Page Using CSS Clip ✂️

Welcome to Dribbble series, a new effort in which I attempt to bring to life interactions created by popular Dribble artists using only the elements supplied by Webflow! Todays project is S.M.A.T Lab / True AI by user Mike | https://dribbble.com/shots/5430800-S-M-A-T-Lab-True-AI).

Simply click a column and see the content change before your eyes! I'm a huge fan of how this turned out, on all viewports. And best of all, I got a wonderful excuse to test out CSS Grid. Clone away, and let me know what you think in the columns!

Grid Hero - S.M.A.T Lab / True AI

CSS GRID HERO - S.M.A.T Lab / True AI - Joshwork Dribbble Series

This cloneable features a circular magnetic CTA & trailing custom cursor.

Circletype.js was used for the circular text. You can change the text and the circle radius will auto-calculate.

Inspired by the brilliant https://www.forstellar.com design by Jomor.

Circular CTA

Magnetic Call To Action

Zensite is a spacious, responsive, interactive portfolio site built for a European design agency. I did alot of work on the CMS to create a variety of displays, using Webflow's Sliders, Tabs, and more to display information in new and exciting ways!

Zensite Studio

Zensite

In response to a Facebook group request, here's a custom range slider I made a while back. Not easy to customize, but it does work.

Webflow Custom Range Slider

Weblfow Custom Range Slider

Welcome to another funky circular Webflow experiment! This time, I use only Link Blocks (no interactions necessary) paired with SVGs to create a nifty little menu active state. Pairs nicely with the last circular cloneable project I made ;)

Clone away, Webflow-ers!

Menu Active Circular Transition

Active Menu Circular Transition

Folks really seemed to enjoy my original Circular Hover Effects cloneable project (https://webflow.com/website/circular-hover), so I decided to turn it into a series. Next up: buttons with some fun circular hover effects! Clone away, and let me know what you think in the comments!

Button Circular Hover Effects

Circular Hover Effect: Buttons

As part of a freelance project I've been working on, one of the requirements was a form field which would "predict" what the user was typing. It took me a while to find this solution, but once I found it and implemented it was super simple, and so I thought I'd share it with the community!

Instructions / how to's are in the section below. Enjoy, and let me know what you think!

Predictive Text Form Field

Predictive Text Form!

The year is 2047...... and the future was no-code.

All assets handmade by yours truly 💪

If you wanna keep up the visual style, here's how I made my 8-bit assets:
https://www.howtogeek.com/howto/29692/create-cool-8-bit-style-pixel-art-from-ordinary-images/

Looking forward to round 2!

#CLONECOMP Day 1 | Josh Jacobs

CloneComp Day 1 | Josh Jacobs

#CloneComp 2020: Endgame. Hold on to your butts.

Fun fact; all the ships in this project are not screenshots. I cloned each project with a ship in it and duplicated each element from the original project, and resized them using transformations. It took forever.

¯\_(ツ)_/¯

Discover circular text websites built by the Webflow community

Discover circular text websites built by the Webflow community