Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html type="homepage">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        body {
            overflow: hidden;
            margin: 50px;
        }
        #container canvas{
            width: 100% !important;
            height: 100% !important;
        }
    </style>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>
    <div id="container">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
    <script src='main.js'></script>
</body>
</html>
              
            
!

CSS

              
                html {
    line-height: 1.15
}

body {
    margin: 0
}

main {
    display: block
}

* {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

body,html {
    height: 100%
}

body {
    background-color: #fff
}

#content {
    height: 100%
}

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
}

img {
    width: 100%;
    height: auto
}

html[type=detail] body,html[type=homepage] body {
    overflow: hidden
}


.scroll-wrapper {
    display: block;
    width: 100%;
    overflow: hidden
}
              
            
!

JS

              
                
var dataImg = [
    {
        "url": "https://images.prismic.io/davidwilliambaum/648c5daf-1506-40a2-a239-7b989355b32d_2322_001_BW.jpg",
        "dimensions": {
            "width": 4638,
            "height": 5495
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/b26d6f72-69b4-4b99-9936-14ea121c7c86_000093130005.jpg",
        "dimensions": {
            "width": 2030,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/e0c284f9-32be-4fe2-8ebe-349c6f8139f9_2016.12.15_DBaum_0644.jpg",
        "dimensions": {
            "width": 1620,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/6f948b74-7a13-41a9-bfe9-e5e3b96656ed_DD_3.jpg",
        "dimensions": {
            "width": 1468,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/a6a683bb-14a5-4848-b9f5-b169e5e89a86_20180123_DBaum_Everlane_Editorial_Kick-Crop_45373.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/19f6c36e-6f11-4f6a-8584-441311bbdf10_20190218_DBaum_Everlane_Editorial_Mame_11816.jpg",
        "dimensions": {
            "width": 1592,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/da236950-60ba-4fb2-8ae3-10598c6da86c_20170918_DBaum_Everlane_Editorial_-1125.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/3527dea0-8d2a-4c63-afe6-f5509e380882_20180716_DBaum_Everlane_Editorial_Amelia0357.jpg",
        "dimensions": {
            "width": 2500,
            "height": 1874
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/890fd38b-7085-46ee-a168-78166a8437d0_20171018_DBaum_Everlane_November-Editorial-Part3_8206-Edit.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/bf2bd06a-40d1-4490-b21f-75bd78a0e432_20181212_DBaum_Everlane_Editorial_Irene3985.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d0dace39-ca82-4b70-aafc-77804ef6efc2_20180716_DBaum_Everlane_Editorial_Amelia0736.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/181337ce-219e-4d54-8e1f-564cec9c5ec9_000083030009.jpg",
        "dimensions": {
            "width": 1807,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/f14f51c7-d59c-4d85-8a48-81eb0f855ca9_20180726_DBaum_Everlane_Editorial_Authentic-Stretch22711-copy.jpg",
        "dimensions": {
            "width": 1483,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/0e4bc20f-0298-44bc-a04c-b6549208c45e__Print+%283%29.jpg",
        "dimensions": {
            "width": 1593,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/82c6dc8e-d9ef-4085-bf2b-ba469ad39587_Everlane+-+Underwear.jpg",
        "dimensions": {
            "width": 2500,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/28e6c2ce-1e3a-462f-9a62-9e38e5cdef57_3I1A9298.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/aa58f7e0-91de-46e2-b57e-ef5e11287974_412A8265-Edit.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/aba06c2d-2dfc-4456-9724-4ab0025d717d_Mexico_.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/e83e2f3b-fe38-488b-9bcd-7c17f58852b7_20180717_DBaum_Everlane_Editorial_Camilla1265.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/42f3fdce-8fd4-4181-af61-a1ba79262564_20180119_DBaum_Everlane_Editorial_Rainer_40792.jpg",
        "dimensions": {
            "width": 1588,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/bfb5f8ab-9972-4477-bd62-6fb56375a84c_20170918_DBaum_Everlane_Editorial_-395-Edit.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/bd30255f-dac9-4f81-a6e2-c1082ba19b4d_000013100022.jpg",
        "dimensions": {
            "width": 1600,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/9cae61d5-7a1f-4047-aab8-b0ed9f5d3738_000054920010.jpg",
        "dimensions": {
            "width": 2030,
            "height": 2000
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    },
    {
        "url": "https://images.prismic.io/davidwilliambaum/d7fa8207-244e-451e-9a86-92b0d81fc1f5_20181212_DBaum_Everlane_Editorial_Irene3983_v2_QC_withgrain.jpg",
        "dimensions": {
            "width": 1368,
            "height": 1710
        },
        "alt": null
    }

];
function X(t, e, i) {
    return t * (1 - i) + e * i
}
function Y(t, e, i) {
    return Math.abs(e - t) <= .001 && (t = e),
        t * (1 - i) + e * i
}

(function (d, w) {
    var isTouch = false;
    var initDrawXZ = {
        x: 0,
        y: 0
    };
    var viewport = {
        width: 1.5 * window.innerWidth,
        height: 1.5 * window.innerHeight,
        margin: 0
    };
    scaleTarget = false ? .3 : .25;
    scaleRatioWidth = Math.min(Math.max(.8 + .2 * window.innerWidth, .2), 1);
    var canvas = {
        width: window.innerWidth,
        height: window.innerHeight
    };
    var mouse = {
        x: window.innerWidth / 2,
        y: window.innerHeight / 2
    }
    var camera = {
        width: window.innerWidth,
        height: window.innerHeight,
        x: .5 * window.innerWidth / 2,
        y: .5 * window.innerHeight / 2,
        lerpedX: .5 * window.innerWidth / 2,
        lerpedY: .5 * window.innerHeight / 2
    };
    var el = document.getElementById('container');
    var canvasEl = document.createElement('canvas');
    var canvasContext = canvasEl.getContext('2d');
    canvasContext.canvas.width = window.innerWidth;
    canvasContext.canvas.height = window.innerHeight;
    el.appendChild(canvasEl);

    el.addEventListener("mousemove", function (event) {
        mouse.x = event.clientX;
        mouse.x = event.clientY;
    });

    TweenLite.set(el, {
        autoAlpha: 0
    })

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    const createImageGridItem = (t, e, i) => {
        var s, a, n = dataImg[e];
        return isTouch ? (s = n.url + "",
            a = 514 / n.dimensions.height,
            n.dimensions.width > n.dimensions.height && (a = 622 / n.dimensions.width)) : (s = n.url + "?format&w=830&h=685",
                a = 685 / n.dimensions.height,
                n.dimensions.width > n.dimensions.height && (a = 830 / n.dimensions.width)),
        {
            uid: e,
            isLoaded: !1,
            isPartOfLoader: !1,
            source: s,
            title: n.title,
            url: n.urlDetail,
            imageUrl: n.url,
            x: t[0],
            y: t[1],
            xLoader: t[0],
            yLoader: t[1],
            scaleLoader: scaleTarget,
            initialWidth: n.dimensions.width * a,
            initialHeight: n.dimensions.height * a,
            type: n.dimensions.width > n.dimensions.height ? "large" : "long",
            dimensions: n.dimensions,
            scale: 1,
            opacity: 0,
            zIndex: 0,
            realX: 0,
            realY: 0,
            lerpedScale: {
                x: 0,
                y: 0
            }
        }
    }

    const checkDistance = (t, e) => {
        for (var i = !0, s = X(viewport.margin, viewport.width - viewport.margin, t[0]), a = X(viewport.margin, viewport.height - viewport.margin, t[1]), n = 0; n < e.length; n++) {
            var r = e[n].position
                , o = X(viewport.margin, viewport.width - viewport.margin, r[0])
                , h = X(viewport.margin, viewport.height - viewport.margin, r[1]);
            distance(s, a, o, h) <= 135 && (i = !1)
        }
        return i
    }

    const distance = (t, e, i, s) => {
        return Math.sqrt(Math.pow(t - i, 2) + Math.pow(e - s, 2))
    }

    const getPointCoordinates = (t, e, i, s, a, n, r) => {
        var o = t + e * i
            , h = t / (i - 1)
            , c = e / (s - 1);
        if (h = X(a, 1 - n, h),
            h += .2 * Math.random() - .1,
            !r.includes(o)) {
            switch (t) {
                case 0:
                    h += .15 * Math.random() - .05;
                    break;
                case t === i - 1:
                    h += -.15 * Math.random() - .05;
                    break;
                default:
                    h += .2 * Math.random() - .1
            }
            switch (e) {
                case 0:
                    c += .2 * Math.random() - .05;
                    break;
                case e === s - 1:
                    c -= .15 * Math.random() - .05;
                    break;
                default:
                    c -= .2 * Math.random() - .1
            }
        }
        return [h, c]
    }

    const createGridPosition = (rows, columns) => {
        var t = []
        var e = Math.ceil(4 * Math.random());
        var i = Math.floor((rows * columns - e) * Math.random());
        var s = Math.floor(4 * Math.random());
        var a = Math.floor((rows * columns - s) * Math.random())
        var n = [];
        for (r = 0; r < e; r++) {
            n.push(i + r);
        }
        for (var o = 0; o < s; o++) {
            n.push(a + o);
        }
        for (var h = 0; h < rows; h++) {
            for (var c = .1 * Math.random(), l = .1 * Math.random(), d = 0; d < columns; d++) {
                for (var u = void 0, m = !1, p = 0; !m && p < 100;)
                    u = getPointCoordinates(d, h, columns, rows, c, l, n),
                        m = checkDistance(u, t),
                        p++;
                t.push({
                    position: u
                })
            }
        }
        return t
    }

    const loadImage = (data) => {
        return new Promise(function (resolve, reject) {
            var i = [];
            data.forEach(function (s, a) {
                var PromiseBoi = new Promise(function (childResolve, childReject) {
                    var i = new Image;
                    i.onload = function () {
                        s.isLoaded = !0;
                        childResolve();
                    }
                        ,
                        i.src = s.source,
                        s.image = i
                }
                );
                i.push(PromiseBoi)
            });
            Promise.all(i).then(function () {
                resolve();
            }).catch(function (err) {
                reject();
                console.log(err.message); // some coding error in handling happened
            });
        }
        )
    };

    const renderImageonCanvas = () => {

    }

    const depict = options => {
        const ctx = canvasEl.getContext('2d');
        const myOptions = Object.assign({}, options);

        return loadImage(myOptions.url).then(img => {
            ctx.drawImage(img, initDrawXZ.x, initDrawXZ.y, 450, 450);
        });
    };

    var s = createGridPosition(5, 7);
    var gridItems = s.map(function (t, e) {
        return createImageGridItem(t.position, e, s.length)
    });
    loadImage(gridItems).then(function (t) {
        update();
    });

    function updateCamera() {
        var t = viewport.width - camera.width + viewport.margin / 2
            , e = viewport.height - camera.height + viewport.margin / 2
            , i = mouse.x / window.innerWidth
            , s = mouse.y / window.innerHeight;
        camera.x = Y(-viewport.margin / 2, t, i),
            camera.y = Y(-viewport.margin / 2, e, s),
            camera.lerpedX = Y(camera.lerpedX, camera.x, .076),
            camera.lerpedY = Y(camera.lerpedY, camera.y, .076)
        camera.lerpedX = camera.x,
            camera.lerpedY = camera.y;
    }

    const update = () => {
        updateCamera();
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < gridItems.length; e++) {
            var i = gridItems[e];
            if (true && !i.isFilteredOut) {
                var s = distance(i.realX, i.realY, mouse.x, mouse.y)
                    , a = 1 - scaleTarget
                    , n = isTouch ? 320 * scaleRatioWidth : 460 * scaleRatioWidth
                    , r = Math.min(n, Math.abs(s)) / n
                    , o = true ? a - a * r : 0;
                false || (o = 0);
                var h = scaleTarget + o;
                i.lerpedScale.x = Y(i.lerpedScale.x, h, .2),
                    i.lerpedScale.y = Y(i.lerpedScale.y, h, .2),
                    i.distance = s
            }

            // var c = distance(i.realX, i.realY, mouse.x, mouse.y)
            //                   , l = 1 - scaleTarget
            //                   , d = isTouch ? 320 * scaleRatioWidth : 460 * scaleRatioWidth
            //                   , u = Math.min(d, Math.abs(c)) / d
            //                   , m = C.a.isMouseActive ? l - l * u : 0;
            //                 true || (m = 0);
            //                 var p = scaleTarget + m;
            //                 i.lerpedScale.x = Y(i.lerpedScale.x, p, .075),
            //                 i.lerpedScale.y = Y(i.lerpedScale.y, p, .075),
            //                 i.distance = c

            i.isFilteredOut && (i.lerpedScale.x = i.scale,
                i.lerpedScale.y = i.scale),
                i.isTransitioningOut && (i.lerpedScale.x = i.scale,
                    i.lerpedScale.y = i.scale),
                i.isClickedItem && (i.lerpedScale.x = i.scale,
                    i.lerpedScale.y = i.scale),
                true || (i.lerpedScale.x = i.scaleLoader,
                    i.lerpedScale.y = i.scaleLoader),
                i.isTransitioningToDetail && (i.lerpedScale.x = i.scale,
                    i.lerpedScale.y = i.scale),
                renderImageCanvas(i)
            // reorderArrayBasedOnDistance(gridItems);
        }
        window.requestAnimationFrame(function () {
            return update();
        });
        reorderArrayBasedOnDistance(gridItems);
    }

    const reorderArrayBasedOnDistance = (t) => {
        t.sort(function (t, e) {
            return t.distance < e.distance ? 1 : t.distance > e.distance ? -1 : 0
        })
    }

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft+(elem.width/2)), 2) + Math.pow(mouseY - (elem.offsetTop+(elem.height/2)), 2)));
    }

    const renderImageCanvas = (t) => {
        if (!t.isLoaded)
            return !1;
        var mouseImpactDistance = calculateDistance(t.image, camera.x, camera.y);
        if(mouseImpactDistance === 0) {
            t.scaleWidth = 2;
        } else {
            t.scaleWidth = scaleRatioWidth + (mouseImpactDistance/2 * 0.005);
        }
        var e, i, s = true ? t.x : t.xLoader, a = true ? t.y : t.yLoader, n = Y(viewport.margin, viewport.width - viewport.margin, s) - camera.lerpedX, r = Y(viewport.margin, viewport.height - viewport.margin, a) - camera.lerpedY;
        t.realX = n,
            t.realY = r,
            i = (e = t.initialWidth * t.lerpedScale.x * t.scaleWidth,
                t.initialHeight * t.lerpedScale.y * t.scaleWidth),
            canvasContext.translate(n, r),
            canvasContext.translate(-e / 2, -i / 2),
            1 === t.opacity ? canvasContext.globalAlpha = t.opacity : canvasContext.globalAlpha = 1,
            canvasContext.drawImage(t.image, 0, 0, e, i);
        canvasContext.beginPath();
        canvasContext.globalAlpha = 1;
        canvasContext.rect(-1, -1, e + 2, i + 2);
        canvasContext.globalAlpha = 1;
        canvasContext.setTransform(1, 0, 0, 1, 0, 0);
    }

})(document, window)
              
            
!
999px

Console