<-
About YouTube ->
The quick brown fox jumps over The Lazy God
09
:
42

Kaleidoscope

No-code kaleidoscope effect using attributes powered by Three.js

GitHub
Tutorial
Cloneable
🔗 Snippet 📝 Setup 👀 Example

Snippet

Copy the <script> and paste it in the <head> tag or before </body>

<!-- Snippets by The Lazy God • Kaleidoscope -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/three.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/the-lazy-god/[email protected]/tlg-kaleidoscope.min.js"></script>
Copy snippet

Required setup

  1. Define canvas container(s)
  2. Define image source element(s)

Define canvas container(s)

Add the attribute tlg-kaleidoscope-canvas to any div element you want to contain a kaleidoscope effect. Size the element with height and width to define the size of the kaleidoscope effect.

Attribute
Name
tlg-kaleidoscope-canvas
Copy

Define image source element(s)

Within each canvas container, include one or more image elements with the attribute tlg-kaleidoscope-image. These images will be used in the kaleidoscope pattern. If more than one image element is used a random will be chosen on page load.

Note: You can hide the source images with display:none;

Attribute
Name
tlg-kaleidoscope-image
Copy

Animation mode

Define an animation mode:

  • Mouse
  • Loop
  • Scroll
  • Static (Default. No attribute needed.)

Mouse interaction

Animate the kaleidoscope effect with mouse or touch move interactions by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute
Option
Name
tlg-kaleidoscope-mode
Copy
Value
mouse
Copy

Looping animation

Animate the kaleidoscope effect in an infinite loop by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute
Option
Name
tlg-kaleidoscope-mode
Copy
Value
loop
Copy

Scroll interaction

Animate the kaleidoscope effect while scrolling through view by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute
Option
Name
tlg-kaleidoscope-mode
Copy
Value
scroll
Copy

Optional Customization

  • Define aspect ratio for the image texture
  • Set the number of segments
  • Set texture scaling
  • Set level of motion

Define aspect ratio for the image texture

Adjust the aspect ratio of the image texture by adding this attribute to each image element with attribute tlg-kaleidoscope-image

Apply this attribute when using non-square source images.

Attribute
Option
Name
tlg-kaleidoscope-aspect
Copy
Value
{number} or {ratio}
Default is 1 for square image. Use decimal e.g. "1.78" or ratio "16/9".

Set the number of segments

Control the number of segments in the kaleidoscope by adding the tlg-kaleidoscope-segments attribute to the container with attribute tlg-kaleidoscope-canvas

Default is 6 segments.

Attribute
Option
Name
tlg-kaleidoscope-segments
Copy
Value
{number}
Default is 6.

Set texture scaling

Control the scale of the kaleidoscope texture by adding the tlg-kaleidoscope-scale attribute to the container with attribute tlg-kaleidoscope-canvas

Attribute
Option
Name
tlg-kaleidoscope-scale
Copy
Value
{number}
Default is 1. Larger number will increase the size of each image tile.

Set level of motion

Control the intensity of the motion effect based on mouse movement by adding the tlg-kaleidoscope-motion attribute to the container with attribute tlg-kaleidoscope-canvas

Attribute
Option
Name
tlg-kaleidoscope-motion
Copy
Value
{number}
Default is 1. Larger number will increase motion intensity. Set the value to 0 to disable motion completely.

Mouse

Scroll

Loop

Static