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

Timothy Ricks

Watch the tutorial for this at https://www.youtube.com/watch?v=Wq5mJIHCDFo

T.RICKS Menu + Slider

Finsweet

Useful Webflow functionality upgrades with custom code.

This series offers youtube video walkthroughs and fully commented custom code of 'hacks' you can use on your Webflow site.

All packed into a clonable project! As new Hacks come out, they will be added to this template. Re-clone as new Hacks are added!

F'in sweet Webflow Hacks

Overlapping CMS Slider

Webflowich

Webflow Expert 🇺🇦 

ROI & Price Calculator – Custom JavaScript Solution

An interactive Kitchen Remodel Instant Calculator built with custom JavaScript inside Webflow. It dynamically updates results based on user inputs — sliders, checkboxes, and radio buttons — delivering real-time price calculations with a smooth UI/UX.

This project shows how Webflow + custom code can achieve advanced functionality while staying fast and responsive. The architecture is flexible, making it easy to adapt to other industries such as ROI calculators, mortgage estimators, SaaS pricing models, or product configurators.

I build not only templates but also complex calculators and configurators tailored for businesses, including API integrations and custom logic.

Premium templates: https://webflow.com/templates/designers/sergey-gavriluk
Webflow Expert profile: https://webflow.com/@expert

— Webflowich

Calculator

View the tutorial at https://www.patreon.com/posts/49192087

T.RICKS Multi-Step Form

Shais Ahmad

Please enjoy this super cool, fully responsive hover card interaction 🔥

It only required a bit of custom code and the rest is Webflow!

Instructions:
1. Copy the "section-end-cta"
2. Copy the code in the before body tag on the homepage
3. DONE!

Feel free to ask any questions below :)

We hope this is useful! Enjoy!

[Cloneable] Advanced jQuery Card Hover Interaction

Chintan Savaliya

Live Site:  https://artworld.agency/

------------------------------------------------

Disclaimer: This project was made for educational purposes and is not affiliated with Artworld in any way. All rights of the images, logos, and texts belong to Artworld.

------------------------------------------------
Have a new project in mind? Let's chat -
🟢 https://cal.com/chintan/30min

Contact:
📭 hello@chintan.design
🌎 https://chintan.design
🐥 https://twitter.com/heyychintan
------------------------------------------------

The Artworld Agency Header [Rebuild]

Jonas Arleth

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

Watch the tutorial at https://www.youtube.com/watch?v=rfwiyBoVwdQ

UX Cookies

Francesco Castronuovo

Hi my gorgeous friends of Webflow,

This project is a complete Desktop rebuild of Webflow website home page.

Needless to say, Webflow home page is a huge example of how to implement mega menus, scrolling interactions, custom tabs components, infinite marquees that stops on hover, greatly customized sliders, awesome design, and much more.

Enjoy and feel free to leave a comment! :)

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Webflow Home Page Rebuild

Learn how to animate SVG graphics in your website with one simple step in this web design tutorial. Improve the visual aesthetics and interactivity of your websites with scalable SVGs that look crisp on all devices. I'll show you how to add motion to SVG lines, engage visitors, and convey messages effectively. Plus, I've prepared a solid animated path code template for you. With just two attributes, you can animate any SVG with line paths and adjust the timing. Especially easy to integrate into Webflow via an embed field.
Tutorial: https://youtu.be/FVfKUkGTflw

Animate SVG Lines with Attributes

Please enjoy this super simple, fully responsive Webflow cloneable that instantly calculates the read time of some text/a blog post 🔥

It only required a bit of custom code and the rest is Webflow!

There's also some really cool load animations, interactions as well as a light/dark mode feature!

Feel free to ask any questions below :)

We hope this is useful! Enjoy!

[Cloneable] Read Time Calculator

There are different ways to include audio files into your Webflow project. You cannot host or upload the mp3 file into your Webflow account but many domain provider offer external hosting as well. It's even possible to host it via your Dropbox account.

Tutorial: https://youtu.be/NRsnsmmYPYs

Audio player in Webflow – how to include audio files into your Webflow project

Flowbase

Hey Friends!

Adding a date field doesn't have to be tricky. Here's one that you can add in 30 seconds, and it includes some of the basic styles to help you customise it.

Oh, it will also inherit the sites <body> typography, so if you want it to match your sites vibe, please be sure to have that selected.

You can find the code in the page settings, and utilise it by adding the custom attribute that you'll find on the demo input field.

For the full guide, visit flowbase.co

-------------

Discover the world's largest collection of Webflow components.

⭐ flowbase.co/explore

Instantly copy from our huge library with a single click. Premium components that help you solve problems faster. 

Become a member today!
⭐ flowbase.co/club

Webflow Date Picker

Alan Bukovich

Fullscreen Clip Animation [CLONEABLE]

Hi my gorgeous friends of Webflow,

This time I merged Webflow interactions and animations with a bit of CSS animations and JavaScript to create a fun and entertaining countdown timer.

Why is it different from all other timers you can find on Webflow Showcase?

Because it has a custom sliding CSS animation, it is completely based on attributes, and it is modular!

How to use it in your own projects? Just click on "How does it work?" to open the instruction pop-up.

Oh, and don't forget to scroll down the page! 😁

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Countdown Sliding Timer

Viacheslav Varov

ROI Calculator jQuery Ui Slider

Please enjoy this image reveal interaction 🔥

✅  100% CMS powered
✅  Little bit of jQuery
✅  Fully responsive with fluid responsiveness
✅  Finsweet client-first framework

In this example, we've used this interaction to showcase preview images of a few projects from our portfolio, but it can be used in many ways!

For example, you can use it as a values section, a gallery section, and much more 🙌

It only required a bit of custom code and the rest is Webflow!

Instructions:
1. Copy "section-portfolio" + Global Styles Symbol + Global Elements Symbol
2. Copy the code in the before body tag on the homepage
3. DONE!

Feel free to ask any questions below :)

Massive shoutout to ThreeSixtyEight for the inspiration ❤️

We hope this is useful! Enjoy!

[Cloneable] CMS jQuery Portfolio Preview Interaction

102022939

1026885926

102976941

1038319252

gpt-5-nano

1070795817

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1186914386

claude-opus-4-6

1207293145

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1692956854

1696523225

17004821

1726628865

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

3022611874

3023147062

3026881092

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

3238278814

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

3452464914

3458155273

gemini-3.6-flash

3497785011

3590523401

3591394191

3594629977

3661799733

3669004489

3673080560

3680518347

3736611573

3737116140

3840796123

3844506029

3876837227

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Best Jquery Websites | Free Examples & Designs

Discover Jquery websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Jquery websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Jquery websites
built by the Webflow community