Can someone help me recreate this?

Publishing help General
1

The analog clock (with the whole swooshing thing at the beginning). :slight_smile:

Thanks!

2

Hi @Nir :smile:

this is possible using the CSS transform: rotation and Webflow’s interaction tools.

Have you played around with the Webflow Interaction feature?

For more information on this, please refer to this demo page: https://interactions.webflow.com/

I hope this helps. If not, please let me know and I will be more than happy to assist further! :slight_smile:

Cheers

1 Like
3

Hi @PixelGeek thank you for your reply.

How can i create the working clock? for a specific timezone?

Thanks! :smile:

4

you can’t do this inside of Webflow natively, but you can do something with jQuery.

Maybe this article could steer you in the right direction: Old School Clock with CSS3 and jQuery | CSS-Tricks - CSS-Tricks

Good luck and have fun! :slight_smile:

5

Hi @PixelGeek,

Any chance you can give me some guidance how to put it all together?

Thanks!

6

Hi @Nir, we do not support external plugins and scripts, but these are usually pretty easy to implement. The key is to follow the instructions on the css clock page: Old School Clock with CSS3 and jQuery | CSS-Tricks - CSS-Tricks

One thing that helps, is to download the files, and then open up the example pages, and see where the different code and css elements are place.

In this example:

https://css-tricks.com/examples/CSS3Clock/

One can see the styles that are put in the Head of the site, this would go into the Header panel located in the Custom Code tab of site settings.

Next, you copy the html tags into an Embed widget on the site.

and finally, there is the complete jQuery code, that you can copy and paste to the Footer of your site in the Custom Code tab of site settings.

Here is the css-clock example, put in Webflow. Please note, you will need to put your images on dropbox for the clock and hands of the clock.

My advice would be to clone this site, and then look how the css and javascript are entered in Custom code, and how the embed widget is used to directly paste in the unordered list and list items elements. Don’t be afraid to experiment or make a mistake, it is all part of the learning process :slight_smile:

Now that the clock is made, you can put the embed anywhere on the page :smile: I hope this helps :slight_smile: Cheers, Dave

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.