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

Wizardry is a responsive technique using EMs that scales like VW but with a max width.

wizardry.

ThreeSixtyEight

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

CMS Draggable Slider

CMS Draggable Slider Tutorial

Refokus

Use Refokus Rich Text Booster to add Classes, IDs, or Custom Attributes to rich text elements in Webflow so you can style text, anchor to it, add animations, add custom functionalities, and more.

Refokus Rich Text Enhancer

Rich Text Enhancer (by Refokus)

********UPDATED CMS VERSION******** 
https://webflow.com/made-in-webflow/website/new-cms-slide

A simple CMS stacked slider made using simple addClass and removeClass Jquery code. 

Learning how to use add and remove classes with transitions opens up to more fun animations that you can't otherwise do natively using Webflow interactions.

Explanation is the section below!

Feel free to reach out if something isn't clear.

Enjoy! :)

Cloneable - CMS Stacked Slider

[Legacy] Stacked Slider

Live site: twotwo-official.com

Again, Everything is based on VW units such that it looks super responsive on larger devices.

Check another ecomm site based on VW: ujjo.webflow.io

Two Two Official

Two Two Official - eCommerce Site Rebuild

Make fullpage.js work in Webflow in 4 steps. Fullpage.js allows you to add a scticky scroll to your site.

✓ fullpage.js Webflow template

Fullpage.js Webflow Integration Template

After seeing @Maximosaurus create a CMS slider in Webflow with no code, I decided to attempt taking it a few steps further using custom code. I'm not a developer so cobbled together the code best I could. Some cleanup might be needed!

It is dynamic, adding and removing slides automatically as Collection Items are added and removed. Styles can easily be updated in the editor without having to touch any code, with all item states shown in the CMS for easy editing (the code replaces them in the live version). The design includes arrows that respond based on first/last slide (in this case showing a different style when the ends are reached, or can set opacity to zero), and the nav bubbles function with the capability of including slide numbers. No looping or swipe support yet, but hope to add soon! 

Download the reference image on slide one for a breakdown of how to re-create this in a new document, and get the custom code on slide two.

Enjoy! I welcome feedback and improvements!

Custom CMS Slider

You will find on this slider:
1. How to setup transparent slides on the sides.
2. Start from another number of slide

Write me a DM if you have any questions!

Don't forget to like and share!

rotatingSlider

Custom animation slider

GET IT OFFFFF!!! 😄

You can customize your worm through the page's custom code. This was adapted from http://processing.org/learning/topics/follow3.html

Wormy Cursor

Snippet → Wormy Cursor

Press like if you want to see more sites like this :)

Can you guess the 10 digit passcode?
There are more fun things waiting inside the vault!

Built purely with Webflow interactions - clone the site & see how it was made!
Let me know what you think.

PS. If you're having a hard time cracking the code, it's 5 4 6 5 3 1 6 2 6 2

The Vault

Want to replace the Webflow Video Element / HTML5 Video, YouTube/Vimeo embeds, and any third-party audio player? Learn how to integrate plyr.io, a custom media player made by Sam Potts, to extend the functionality of the normal video and audio players found on everyday websites!

FULL TUTORIAL: https://visualdev.fm/post/customizing-media-players-with-plyr-io

Made by your friends at The Visual Developers Podcast :-)

Plyr.io Tutorial

Custom Media Player Integration with Plyr.io

The Time

the-time

How to add social share buttons in Webflow?

Use Refokus Social Share to add social share buttons for Twitter, Linkedin, and Facebook in Webflow.

Documentation: https://www.webflow-tools.refokus.io/tools/social-share-button

Refokus Social share

Social Share (by Refokus)

Simple MP3 audio player that hides the default browser's audio controls. Works seamlessly with Webflow's CMS collections. 

Some coding is inevitable for this to work. And you do need an external server to host your MP3 files. 

It needs some refining, but it's a nice starting point. 

The code before the </body> tag is based on code written by John Scheuer on http://www.dynamicdrive.com/forums/showthread.php?76740-jquery-play-only-the-music-link-that-s-clicked-stop-other-sounds. I adapted some of his html to make it work with the CMS collection tool that Webflow offers.

Basic Audio Player

Basic MP3 Audio Player

You can now change the colour of text on an SVG overlay

Steps
1. Take a div block and add a background colour.
2. Add SVG to the div block as a background image.
3. Add Text element in the div
4. Apply the same colour to text as div block's
5. Copy and paste the CSS code and change the class in code to the text's class.
6. click the publish button

Boom code applied. ENJOY!

Mix Blend Mode

A glitch on hover effect, add the class "glitch" to and div which has images inside it.

Glitch effect on hover

cayard-7cb53caed45290cc9586ec02c8402b9e

How to add CMS Tabs in Webflow?

Use Refokus CMS Tabs to create powerful tabs where the tab menu and content are managed from a CMS collection.

Discover code websites built by the Webflow community

Discover code websites built by the Webflow community