Within the stack settings of LavaLamp, you can change the placement of the stack. This enables you to display it within the normal page flow (wherever you add it on the page) or alternatively embed it within a theme ExtraContent container or FreeStyle banner container. ThemeFlood themes are good to use for the two latter placement options.

As mentioned already, the height and colours of the label lamp is changeable without code. You can fine-tune the gradient colour-stops, shades and directions of the oil globules.


Here is a working example of LavaLamp, featuring a single oil globule layer and an optional content layer for the text:
LavaLamp is responsive. This means that if the size or orientation of the screen changes, the stack will adjust in size accordingly. The example above is set to 50vh tall. This means the animation is 50% of the web browser viewport height.


Install LavaLamp into Stacks and RapidWeaver, in the normal way. Then follow these instructions.
  1. Drag and drop a copy of LavaLamp into your webpage, from the Stacks Library.
  2. With the main LavaLamp stack selected in edit mode, you can access the Stacks side panel to change the placement, height and fill styles.
  3. Press the blue button to add oil globules to the lamp. The size, style and colour of each oil globule can be customised by selecting the sub-stack layer in edit mode and accessing its settings in the Stacks side panel.
  4. If you want to add text to your LavaLamp stack, press the blue button and choose to add a content layer. Drag-and-drop in a suitable text stack. Use your own editor controls or custom CSS to change the presentation of the text you want shown.
  5. Preview the page to see the result. Save your changes when done.

All settings have small information tooltips. On mouseover, these disable extra information about what each setting does.

There is no limit imposed on the number of oil globule or content layers you add to your lava lamp effect. You can drag and drop these sub-stacks into any order. The oil globules or content layers furthest down the list will be layered forwards. Oil globules can be made semi-transparent, by use of the Opacity slider, within the MacOS Colour picker window.


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.