Clock Time via Simple JS

Try the cloneable below
https://clockjs.webflow.io
Federico

Federico

expert
0
5
0
0
Get it
Like
Like

Cloneable tags

Date/Time

Description

The Clock Time via Simple JS is a cloneable element that allows you to add a small vanilla JS clock to your Webflow site that can be modified using attributes and configured with time zones. This technique is powered by Clock.js and uses Webflow's native custom attributes to determine the current time in different countries. This allows you to easily modify the timezone by adjusting the Webflow custom attributes for the text content, making it easy to update the clock based on the timezone you need. The Clock Time via Simple JS is a great way to add a professional and interactive element to your website, and is sure to be a valuable resource for anyone looking to display the current time on their site. This cloneable, created by Federico, is categorized as a date/time element, and is a valuable tool for any site looking to increase user engagement and interaction. Be sure to incorporate the Clock Time via Simple JS into your site design to give your visitors a seamless and enjoyable browsing experience.

Flowradar
Cloneables
Clock Time via Simple JS

Related cloneables

Go to cloneables
Horizontal Scrolling Timeline Webflow Cloneable
SketchzLab
SketchzLab
EXPERT
1
Horizontal Scrolling Timeline

A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.

How it Works Scroll Animation Webflow Cloneable
Mor Tene & Ilya Lisi
Mor Tene & Ilya Lisi
EXPERT
21
How it Works Scroll Animation

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

Full Page Calendar Webflow Cloneable
Redleo
Redleo
EXPERT
4
Full Page Calendar

A full page Calendar with week/day/month setting and works with Webflow CMS. This full page calendar design relies on custom stylesheet and JS to work so you'll need to copy both the CSS and JS found in the head and closing body tag of the page settings. Please note that this is primarily driven via CSS and thus Webflow's designer becomes rather useless for the design other than the Webflow CMS elements tied to it.

CMS Horizontal Timeline Template Webflow Cloneable
Vincent Bidaux
Vincent Bidaux
EXPERT
3
CMS Horizontal Timeline Template

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

Forms Date/Calendar Picker Webflow Cloneable
Flowbase
Flowbase
EXPERT
3
Forms Date/Calendar Picker

A great way of adding a date/calendar picker to forms or other elements within Webflow. Provides the essentials to get it added in 30 seconds and easily configurable based on your own style. Inherits the <body> typography. Please note that the date picker does require custom code found within the Page Settings. This utilizes Datepicker.js to create the date picker and the styling allows you to further customize the styling.

Countdown/Countup Animation Webflow Cloneable
BRIX Templates
BRIX Templates
EXPERT
1
Countdown/Countup Animation

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

Unique Horizontal Scroll Timeline Webflow Cloneable
Mor Tene & Ilya Lisi
Mor Tene & Ilya Lisi
EXPERT
1
Unique Horizontal Scroll Timeline

A unique way of creating an interactive scrolling timeline within Webflow. This demonstration provides a Covid timeline as an example for it's implementation. The animation is based on while scrolling into view with a scale of the line div blocks from 0 to 1. A

How to Get Current Date Webflow Cloneable
Ailín James Tobin
Ailín James Tobin
EXPERT
2
How to Get Current Date

Here's a way to display a live date on your Webflow site. Easily add the day, date time and year to your Webflow site using this custom script. Be sure to add the custom script found within the page settings to get this to work properly.

DRAG
Real-time sorting by

More from author

See all
WebGL Curtain.js Slider Webflow Cloneable
WebGL Curtain.js Slider

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

Locomotive Scroll Integration Webflow Cloneable
Locomotive Scroll Integration

An example of integrating locomotive scroll integration in Webflow

Webp Webflow Hack Webflow Cloneable
Webp Webflow Hack

Here's a work around to use .webp files in Webflow. The trick is to upload your webp files as .webp.txt in the asset manager. Then you can use a <picture> tag and now you've got native Webp files hosted in WEbflow.

Clock Time via Simple JS Webflow Cloneable
Clock Time via Simple JS

A tiny vanilla JS clock, modify using attribute and can be configured with time zones for Webflow. This technique is powered by Clock.js and utilizes Webflow's native custom attributes to determine each countries current time. This allows you to modify the timezone by simply adjusting the Webflow custom attributes for the text content to update the clock based on the timezone you require.

CMS Insert Technique Webflow Cloneable
CMS Insert Technique

Here's a way to add a non-CMS item to a cMS collection list in Webflow. This can be positioned at the start, middle, end or at a specific position via a number. A great way to add non CMS items into a native Webflow collection list.

DRAG
Real-time sorting by