Draggable Image Strip

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="strip-outer">
                <div class="strip-inner">
                    <div class="draggable"></div>
                    <div class="strip">
                        <div class="strip__item">
                            <div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('https://tympanus.net/Development/DraggableImageStrip/img/1.jpg');"></div></div>
                            <span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
                        </div>
                        <div class="strip__item">
                            <div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('https://tympanus.net/Development/DraggableImageStrip/img/2.jpg');"></div></div>
                            <span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
                        </div>
                        <div class="strip__item">
                            <div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('https://tympanus.net/Development/DraggableImageStrip/img/3.jpg');"></div></div>
                            <span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
                        </div>
                        <div class="strip__item">
                            <div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('https://tympanus.net/Development/DraggableImageStrip/img/4.jpg');"></div></div>
                            <span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
                        </div>
                        <div class="strip__item">
                            <div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('https://tympanus.net/Development/DraggableImageStrip/img/5.jpg');"></div></div>
                            <span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
                        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*,
*::after,
*::before {
    box-sizing: border-box;
}
:root {
    font-size: 15px;
}
body {
    --color-text: #767676;
    --color-bg: #000;
    --color-link: #c35340;
    --color-link-hover: #fff;
    --color-cover: #c35340;
    --color-copy: #767676;
    --color-content-title: #c35340;
    --color-indicator: #1b1b1b;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: ff-more-web-pro, serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
/**
* demo.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* Copyright 2019, Codrops
* http://www.codrops.com
*/
{
    const body = document.body;
    const MathUtils = {
        lineEq: (y2, y1, x2, x1, currentVal) => {
            // y = mx + b 
            var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
            return m * currentVal + b;
        },
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX