"Draggable Image Strip"
Bootstrap 4.1.1 Snippet by htmldoctor

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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('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('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('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('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('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> <div class="strip__item"> <div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/6.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>06</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('img/7.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>07</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('img/8.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>08</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('img/9.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span> </div> <div class="strip__item"> <div class="img-outer"><div class="img-inner" style="background-image:url('img/10.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>10</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('img/11.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>11</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('img/12.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>12</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('img/13.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>13</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('img/14.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>14</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('img/15.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>15</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('img/16.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>16</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('img/17.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span> </div> <div class="strip__item"> <div class="img-outer"><div class="img-inner" style="background-image:url('img/18.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>18</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('img/19.jpg');"></div></div> <span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span> </div> </div><!--/strip--> </div><!--/strip-inner--> <div class="strip-cover"> <h2 class="strip-cover__title">Morandi</h2> <span class="strip-cover__subtitle">2019</span> </div> </div><!--/strip-outer--> <div class="content"> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/1.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Assemblage</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/2.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Wherewithal</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/3.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Surreptitious</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/4.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Onomatopoeia</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/5.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Nemesis</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/6.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Penumbra</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/7.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/8.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Propinquity</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/9.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Lissome</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/10.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Moiety</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/11.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Mondegreen</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/12.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/13.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Gambol</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/14.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Forbearance</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/15.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Evanescent</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/16.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Embrocation</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/17.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Bucolic</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/18.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Eloquence</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/19.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button> </div> <div class="content"> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/1.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Assemblage</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/2.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Wherewithal</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/3.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Surreptitious</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/4.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Onomatopoeia</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/5.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Nemesis</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/6.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Penumbra</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/7.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/8.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Propinquity</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/9.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Lissome</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/10.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Moiety</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/11.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Mondegreen</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/12.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/13.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Gambol</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/14.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Forbearance</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/15.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Evanescent</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/16.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Embrocation</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/17.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Bucolic</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/18.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Eloquence</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <article class="content__item"> <div class="img-outer img-outer--content"> <div class="img-inner img-inner--content" style="background-image: url(img/19.jpg);"></div> </div> <div class="content__item-copy"> <h2 class="content__item-title">Cathedral</h2> <p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p> </div> </article> <button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button> </div>
*, *::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; -moz-osx-font-smoothing: grayscale; } .cursor { display: none; } /* Page Loader */ .js .loading::before { content: ''; position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { content: ''; position: fixed; z-index: 100000; top: calc(50% - 30px); left: calc(50% - 25px); width: 50px; height: 60px; pointer-events: none; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; } a:hover, a:focus { color: var(--color-link-hover); outline: none; } main { position: relative; height: 100vh; display: flex; flex-direction: column; } .message { background: var(--color-text); color: var(--color-bg); padding: 1rem; text-align: center; } .frame { padding: 1.5rem; position: absolute; top: 0; left: 0; z-index: 1000; pointer-events: none; } .frame a { pointer-events: auto; } .frame__title { font-size: 1rem; margin: 0 0 0.5rem; font-weight: normal; } .frame__links { display: flex; margin: 0.5rem 0; } .frame__links a { margin: 0 0.35rem; padding: 0 0.35rem; position: relative; } .frame__links a:first-child { margin-left: 0; padding-left: 0; } .frame__links a:not(:last-child)::after { content: ''; width: 1px; height: 1rem; background: var(--color-link); position: absolute; left: calc(100% + 0.35rem); top: calc(50% - 0.5rem); pointer-events: none; } .frame__subtitle { font-weight: normal; font-size: 1rem; margin: 0.5rem 0 1rem; } .frame__indicator { background: var(--color-indicator); width: 3rem; height: 0.5rem; transform-origin: 0 50%; } .strip-outer { width: 100%; height: 100vh; min-height: 750px; margin: auto; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; flex: none; } .strip-inner { position: relative; top: 0; height: 100%; width: -moz-fit-content; width: fit-content; } .draggable { height: 500px; top: calc(50% - 250px); width: 100%; position: absolute; cursor: grab; } .draggable:active { cursor: grabbing; } .strip { height: 100%; width: -moz-fit-content; width: fit-content; display: flex; align-items: start; position: relative; pointer-events: none; } .strip__item { height: 100%; position: relative; display: flex; flex-direction: column-reverse; justify-content: center; } .img-outer { --imgheight: 450px; height: var(--imgheight); width: calc(var(--imgheight) * 0.7); overflow: hidden; position: relative; flex: none; } .img-outer--size-s { --imgheight: 300px; } .img-outer--size-m { --imgheight: 360px; } .img-outer--size-l { --imgheight: 390px; } .img-outer--size-xl { --imgheight: 420px; } .img-inner { width: calc(100% + 40px); height: calc(100% + 40px); left: -20px; top: -20px; background-size: cover; background-position: 50% 50%; position: absolute; } .strip__item-number { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .strip__item-link { pointer-events: auto; cursor: pointer; display: block; position: relative; } .strip__item-link::before { content: ''; position: absolute; width: 160%; height: 120%; left: -30%; top: -10%; } .strip__item-link span { display: block; } .strip__item-plus { display: none; width: 13px; height: 13px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e"); background-size: 100%; } .strip__item-link:hover + .strip__item-plus { display: block; } .strip-cover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--color-cover); pointer-events: none; opacity: 0; } .strip-cover__title { font-family: fleisch-wolf, sans-serif; font-weight: 400; font-size: 20vw; margin: 0; line-height: 1; -webkit-text-stroke: 1px var(--color-cover); text-stroke: 1px var(--color-cover); -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; } .strip-cover__subtitle { font-size: 1.5rem; margin: 0; } .content { top: 0; position: absolute; height: 100vh; width: 100%; z-index: 1000; } .js .content { pointer-events: none; } .content__item { position: absolute; width: 100%; left: 0; top: 0; height: 100vh; display: grid; align-items: center; grid-template-rows: 50% 40% 10%; grid-column-gap: 0; grid-template-areas: 'content-img' 'content-copy' '...'; display: none; } .js .content__item { height: 100%; opacity: 0; pointer-events: none; } .js .content__item--current { pointer-events: auto; opacity: 1; top: 0; display: grid; } .img-outer--content { height: 100%; width: auto; grid-area: content-img; } .img-inner--content { background-position: 50% 35%; } .content__item-title { font-weight: normal; color: var(--color-content-title); } .content__item-copy { grid-area: content-copy; padding: 1.5rem 2rem; color: var(--color-copy); } .content__item-text { margin: 0; } .content__close { display: block; background: none; border: 0; margin: 0; padding: 0; color: inherit; opacity: 0; pointer-events: none; cursor: pointer; position: absolute; bottom: 1.5rem; left: 3rem; } .content__item--current ~ .content__close { pointer-events: auto; } .content__close svg { fill: currentColor; } .content__close:focus, .content__close:hover { outline: none; color: #fff; } /* Will-change */ .strip, .strip__item, .cursor__side, .content__close, .content__item-title, .content__item-copy { will-change: transform; } @media screen and (min-width: 53em) { body { overflow: hidden; } .frame { position: fixed; text-align: left; z-index: 10000; display: grid; align-content: space-between; width: 100%; max-width: none; height: 100vh; padding: 1.25rem 3rem; pointer-events: none; grid-template-columns: 80% 20%; grid-template-rows: auto auto auto; grid-template-areas: 'page-title links' '... ...' 'indicator sub-title'; } .frame__title-wrap{ grid-area: page-title; display: flex; } .frame__title { margin: 0; } .frame__subtitle { grid-area: sub-title; justify-self: end; margin: 0; } .frame__links { padding: 0; margin: 0 0 0 2rem; } .frame__indicator { grid-area: indicator; margin: 0; } .content__item { top: 0; grid-template-columns: 40% 45% 15%; grid-template-rows: 100%; grid-template-areas: 'content-copy content-img ... '; } .content__item-copy { max-width: 240px; justify-self: end; align-self: end; text-align: right; } .strip-cover__title { font-size: 15vw; -webkit-text-stroke: 2px var(--color-cover); text-stroke: 2px var(--color-cover); } .strip-cover__subtitle { font-size: 3rem; } } @media (any-pointer: fine) { .cursor { display: block; } .cursor__inner { z-index: 9999; pointer-events: none; position: absolute; top: 0; left: 0; mix-blend-mode: difference; border-radius: 50%; } .cursor__side { position: absolute; top: 50%; width: 5px; height: 1px; background: #fff; opacity: 0; } .cursor__side--left { right: calc(100% + 5px); } .cursor__side--right { left: calc(100% + 5px); } .cursor__inner--circle { width: 25px; height: 25px; border: 1px solid #fff; } }
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));

Related: See More


Questions / Comments: