Moiré Test#1 (Back-/Foreground Images)
Abstract: Making a moiré effect using HTML foreground/background images.
© Copyright Daniel Krajzewicz, 25.11.2017 00:30, cc by
Introduction
Just for some fun, I tried to check whether one could make some animations using an overlay of foreground and background images. The moiré-effect (see wikipedia entry on moiré pattern) is probably one of the best applications for that.
Realisation
Patterns
Some while ago, I found this page that contains some nice moiré-patterns. In fact, I do not know what the page itself is about.
Code
After some testing, I wanted to have this be embedded into the blog page. It turned out to be not that easy. Clipping neither worked using the “clip” nor the “clip-path” style property.
At the end, the background image can be moved using the “backgroundPosition” attribute, the foreground image is moved using the “margin” attribute. The complete code is as follows.
var i = 0; function anim() { x = Math.floor(Math.sin(i/40.) * s2) + so; y = Math.floor(Math.cos(i/75.) * s2) + so; window.document.getElementById("t1").style.margin = -y + "px 0px 0px " + -x + "px"; x = Math.floor(Math.sin(i/50.) * s2) + so; y = Math.floor(Math.cos(i/20.) * s2) + so; window.document.getElementById("t0").style.backgroundPosition = -x + "px " + -y +"px"; i = i + 1; window.setTimeout("anim()", 50); }
Some further code makes it fill the available space and stuff…
Moiré Effect
Conclusion
Ok, ok. Alas, an animated overlay of background and foreground images works well…