Creative Computing

Index of /

Week 13

This Week ...

Useful JSFiddles

Click on the HTML, CSS, and JavaScript tabs to view the code.

Columns with HTML & CSS

Center content with a wrapper

HTML horizon, rotated with CSS

Refer to the 50/50 Horizontal Split Rotated layout option under /_resources/css-composition/ for more details on how to create a centered, rotated horizon line.

CSS animation delay

Click "Result" to re-initiate the start of the animation.

Fade with CSS Transition

Click "Result" to re-run the fade transition.

Animated background with CSS

Rotate a container with CSS

Horizontal movement with CSS animation and transform: translate

Horizontal and vertical movement with CSS animation and transform: translate

Rotate an HTML Element with JavaScript

Uses Date() to set initial rotation. Position is updated every second with setInterval().

Randomly position elements in the window with JavaScript

Click "Result" to re-run the code and generate a new random position for all elements.


  • Collect all visual, video, audio or other materials you will use for your time project and organize into a single folder called assets. Upload this folder to your server under /projects/time/.

  • Build the architecture of your clock. In plain english, make a list of how your composition will update over time. What logic do you apply in order to achieve your various states? Then, focus on the functionality and architecture of your project (JavaScript and HTML). Get your logic fully operational before next class.