MoveOver

MoveOver is a Canva style landing page.

With extra goodness:

• Extended browser support (Firefox: more on it later)
• Responsive, i.e., almost all sized screens
• Mobile (single touch) support

---

How to use

Script tag

<script type="text/javascript" src="move-over.js"></script>
<script type="text/javascript">
    MoveOver({
        canvas: document.querySelector('canvas'),  // optional
        imgSrc: './1.jpg',
        imgBSrc: './1.b.jpg',
        fps: 30,  // optional
    });
</script>

AMD Module

<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="move-over.js"></script>
<script type="text/javascript">
    require(['MoveOver'], function (MoveOver) {
        MoveOver({
            canvas: document.querySelector('canvas'),  // optional
            imgSrc: './1.jpg',
            imgBSrc: './1.b.jpg',
            fps: 30,  // optional
        });
    });
</script>

---

But Why?

The blur-unblur effect on Canva is one of my personal favorites. But there's a hiccup. If you visit the website on FIrefox, you might land on their alternate version.

But Why?

If you look at the url, it goes something like https://www.canva.com/?pageVariant=template&utm_expid=... By removing the part pageVariant=template&, the default page is loaded.

As of the time of posting, the trails are all "sharp".

But why?

Because webkit and gecko handle blurs differently. And the difference is made visible when different composite operations are mixed together.

Long story short, by saving / restoring canvas context around paint operations, the problem can be circumvented.

Demo

The demo uses the technique mentioned above.