├── .gitattributes ├── .gitignore ├── .htmlnanorc.uu ├── LICENSE ├── README.md ├── dist ├── 1.aff39bc3.avif ├── 11.2a0f28ae.avif ├── 12.06c227ec.avif ├── 13.8391f9d4.avif ├── 14.4a33558b.avif ├── 15.b0520adc.avif ├── 16.6f0bd98f.avif ├── 17.eeb89108.avif ├── 18.beb0863a.avif ├── 19.f0885634.avif ├── 2.2fa6cc26.avif ├── 20.38ad3e23.avif ├── 21.165ddc44.avif ├── 22.94e23353.avif ├── 23.c3cbf389.avif ├── 24.d90b6063.avif ├── 25.d891525a.avif ├── 26.ea6e9e57.avif ├── 27.48872dda.avif ├── 3.6159f68b.avif ├── 4.96814b66.avif ├── 5.d8edf092.avif ├── 6.a1367d9c.avif ├── 7.f482f327.avif ├── 8.7ef9268b.avif ├── 9.24e15c5a.avif ├── favicon.a64e97b2.ico ├── index.b5e7c14d.js ├── index.d73f7ad5.css ├── index.e9a2d1b4.js ├── index.html ├── index2.197e4afe.js ├── index2.f3cc60fa.js ├── index2.html ├── index3.63989a8a.js ├── index3.e402857d.js ├── index3.html ├── index4.6de50968.js ├── index4.dadee363.js ├── index4.html ├── index5.04a0f96a.js ├── index5.9b780c46.js └── index5.html ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.avif ├── 10.avif ├── 11.avif ├── 12.avif ├── 13.avif ├── 14.avif ├── 15.avif ├── 16.avif ├── 17.avif ├── 18.avif ├── 19.avif ├── 2.avif ├── 20.avif ├── 21.avif ├── 22.avif ├── 23.avif ├── 24.avif ├── 25.avif ├── 26.avif ├── 27.avif ├── 3.avif ├── 4.avif ├── 5.avif ├── 6.avif ├── 7.avif ├── 8.avif └── 9.avif ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html └── js ├── index.js ├── index2.js ├── index3.js ├── index4.js ├── index5.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.htmlnanorc.uu: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Panel Scroll Effects 2 | 3 | An exploration of smooth panel scroll effects based on [Margot Priolet's website](https://www.margotpriolet.com/). 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/10/ScrollPanels_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=65387) 8 | 9 | [Demo](http://tympanus.net/Development/ScrollPanels/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Images from [Unsplash](https://unsplash.com/) 35 | 36 | ## Misc 37 | 38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 39 | 40 | ## License 41 | [MIT](LICENSE) 42 | 43 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/1.aff39bc3.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/1.aff39bc3.avif -------------------------------------------------------------------------------- /dist/11.2a0f28ae.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/11.2a0f28ae.avif -------------------------------------------------------------------------------- /dist/12.06c227ec.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/12.06c227ec.avif -------------------------------------------------------------------------------- /dist/13.8391f9d4.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/13.8391f9d4.avif -------------------------------------------------------------------------------- /dist/14.4a33558b.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/14.4a33558b.avif -------------------------------------------------------------------------------- /dist/15.b0520adc.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/15.b0520adc.avif -------------------------------------------------------------------------------- /dist/16.6f0bd98f.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/16.6f0bd98f.avif -------------------------------------------------------------------------------- /dist/17.eeb89108.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/17.eeb89108.avif -------------------------------------------------------------------------------- /dist/18.beb0863a.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/18.beb0863a.avif -------------------------------------------------------------------------------- /dist/19.f0885634.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/19.f0885634.avif -------------------------------------------------------------------------------- /dist/2.2fa6cc26.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/2.2fa6cc26.avif -------------------------------------------------------------------------------- /dist/20.38ad3e23.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/20.38ad3e23.avif -------------------------------------------------------------------------------- /dist/21.165ddc44.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/21.165ddc44.avif -------------------------------------------------------------------------------- /dist/22.94e23353.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/22.94e23353.avif -------------------------------------------------------------------------------- /dist/23.c3cbf389.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/23.c3cbf389.avif -------------------------------------------------------------------------------- /dist/24.d90b6063.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/24.d90b6063.avif -------------------------------------------------------------------------------- /dist/25.d891525a.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/25.d891525a.avif -------------------------------------------------------------------------------- /dist/26.ea6e9e57.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/26.ea6e9e57.avif -------------------------------------------------------------------------------- /dist/27.48872dda.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/27.48872dda.avif -------------------------------------------------------------------------------- /dist/3.6159f68b.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/3.6159f68b.avif -------------------------------------------------------------------------------- /dist/4.96814b66.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/4.96814b66.avif -------------------------------------------------------------------------------- /dist/5.d8edf092.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/5.d8edf092.avif -------------------------------------------------------------------------------- /dist/6.a1367d9c.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/6.a1367d9c.avif -------------------------------------------------------------------------------- /dist/7.f482f327.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/7.f482f327.avif -------------------------------------------------------------------------------- /dist/8.7ef9268b.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/8.7ef9268b.avif -------------------------------------------------------------------------------- /dist/9.24e15c5a.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/9.24e15c5a.avif -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.d73f7ad5.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{--color-text:#000;--color-bg:#cbb6a9;--color-text-alt:#d72a28;--color-link:#000;--color-link-hover:#000;--ratio:1.3;--grid-item-width:32vw;--justify:space-between;--gap:2.5vw;--rotation:0deg;--radius:0px;--offset:-30vh;--radius-small:4px;font-size:16px}body{text-transform:uppercase;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:acumin-pro,sans-serif}.demo-2{--color-bg:#df6a26;--color-text-alt:#eaa750;--ratio:1;--grid-item-width:23vw;--radius:8px}.demo-3{--color-bg:#ede9e6;--color-text-alt:#d74528;--ratio:1.1;--grid-item-width:17vw;--radius:12px;--justify:center;--gap:2.5vw}.demo-4{--color-text:#fff;--color-link:#fff;--color-link-hover:#aaa;--color-bg:#0f0e0e;--color-text-alt:#d74528;--ratio:1;--grid-item-width:25vw;--radius:4px;--justify:center;--gap:2.5vw;--rotation:-45deg;--offset:20vh}.demo-5{--color-bg:#dacdcd;--color-text-alt:#d74528;--ratio:.8;--grid-item-width:30vw;--radius:0;--justify:center;--gap:1.5vw;--offset:0}.js .loading:before,.js .loading:after{content:"";z-index:1000;position:fixed}.js .loading:before{width:100%;height:100%;background:var(--color-bg);top:0;left:0}.js .loading:after{width:60px;height:60px;opacity:.4;background:var(--color-link);border-radius:50%;margin:-30px 0 0 -30px;animation:.7s linear infinite alternate forwards loaderAnim;top:50%;left:50%}@keyframes loaderAnim{to{opacity:1;transform:scale(.5)}}a{color:var(--color-link);cursor:pointer;outline:none;text-decoration:none}a:hover{color:var(--color-link-hover);outline:none}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:0 0}a:focus-visible{background:0 0;outline:2px solid red}.unbutton{font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.unbutton:focus{outline:none}.frame{width:100%;color:var(--color-title);grid-gap:1rem;z-index:100;grid-template-columns:auto auto;grid-template-areas:"title prev""nav nav""sponsor sponsor";padding:1rem;font-size:1rem;line-height:1.2;display:grid;position:absolute}.frame a:not(.frame__title-back),.row+p a{white-space:nowrap;position:relative;overflow:hidden}.frame a:not(.frame__title-back):before,.row+p a:before{content:"";height:1px;width:100%;transform-origin:0%;background:currentColor;transition:transform .3s;position:absolute;top:90%}.frame a:not(.frame__title-back):hover:before,.row+p a:hover:before{transform-origin:100%;transform:scaleX(0)}.frame__title{white-space:nowrap;grid-area:title;display:flex}.frame__title-main{margin:0;font-size:1rem;font-weight:400}.frame__title-back{align-items:flex-end;display:flex;position:relative}.frame__title-back span{display:none}.frame__title-back svg{fill:currentColor}.frame__prev{grid-area:prev;justify-self:end}.frame__demos{flex-wrap:wrap;grid-area:nav;justify-content:space-between;justify-self:stretch;display:flex}.frame__demos-title{width:100%;color:var(--color-text-alt);margin:0;font-size:1rem;font-weight:400}.frame__demos-item{grid-row:2}.section{z-index:4;width:100%;min-height:100vh;background:var(--color-bg);line-height:1;position:static;top:0}.section--intro{height:100vh;text-align:center;cursor:default;flex-direction:column;justify-content:center;align-items:center;margin-bottom:250vh;padding:8rem 0 2rem;display:flex}.section__title{text-transform:none;-moz-font-feature-settings:"swsh";-webkit-font-feature-settings:"swsh";font-feature-settings:"swsh";margin:5vh 0 6vh;font-family:kudryashev-d-excontrast-sans,sans-serif;font-size:clamp(2rem,17vw,12.5rem);font-weight:300;line-height:.9}.section__title--medium{font-size:clamp(1.5rem,12vw,9rem)}.section__text{max-width:400px;margin:0}.section__text--alt{color:var(--color-text-alt);margin-top:auto}.section__arrow{fill:currentColor;transform:translateY(3px)rotate(135deg)}.section--columns{z-index:-1;width:100%;height:100vh;position:fixed;inset:0}.columns{width:100%;justify-content:var(--justify);gap:var(--gap);height:100%;transform:rotate(var(--rotation));will-change:transform,opacity;align-items:center;display:flex;position:relative}.column-wrap{z-index:1;will-change:transform;flex-direction:column;padding:5vh 0 15vh;display:flex;position:relative}.column-wrap:nth-child(2n){margin-top:var(--offset)}.column{will-change:transform;display:block;position:relative}.column__item{--grid-item-height:calc(var(--grid-item-width)*var(--ratio));width:var(--grid-item-width);height:var(--grid-item-height);border-radius:var(--radius);cursor:pointer;margin:0 0 var(--gap)0;z-index:1;will-change:transform,filter;position:relative;overflow:hidden}.column__item-img{width:100%;height:100%;will-change:transform;background-position:50%;background-size:cover}.section--showcase{text-align:center;cursor:default;flex-direction:column;justify-content:center;align-items:center;padding:8rem 5vw 10vh;display:flex}.section__header{width:100%;border-bottom:1px solid #000;justify-content:space-around;align-items:center;margin-bottom:4rem;padding:4vh 8vw;display:flex}.section__year{color:var(--color-text-alt)}.row{text-align:left;width:100%}.row__header{width:100%;grid-gap:2rem;grid-template-rows:auto auto;grid-template-columns:4ch 1fr;justify-content:start;padding:6rem 0 3rem;display:grid}.row__header span:last-child{grid-column:1/span 2}.row__content{width:100%;grid-gap:1rem;grid-auto-flow:column;justify-content:start;display:grid}.row__content-imgwrap{border-radius:var(--radius-small);position:relative;overflow:hidden}.row__content-img{aspect-ratio:2;height:100px;background-position:50%;background-size:cover}.row__content-imgwrap:nth-child(2n) .row__content-img{aspect-ratio:1}.row__content-imgwrap:nth-child(4n) .row__content-img{aspect-ratio:1.5}.row__content-imgwrap:last-child{justify-content:end}.row__content-imgwrap:last-child .row__content-img{aspect-ratio:2.75}.row+p{margin-top:40vh}@media screen and (min-width:53em){.frame{grid-gap:2rem;grid-template:"title prev nav sponsor sponsor"/15% 15% 1fr 15% 15%;justify-content:start;place-items:center start;padding:2rem 3rem}.frame__prev{justify-self:start}.frame__demos{text-align:center;justify-self:center}.section,.row{font-size:1.45rem}.row__header{grid-template-rows:auto;grid-template-columns:4ch auto 1fr;display:grid}.row__header span:last-child{grid-column:revert;justify-self:end}} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Scroll Panels | Demo 1 | Codrops

Scroll Panels

Back to the article
Previous demo

Charlotte
LaRue

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

Discover Scroll

2000

Selected
Work

2022
2000 Bocage's Secret My mind drifts to a place where I find you
2002 Coolista Website Redesign Can we kiss with poison on our lips?
2010 Running away Take off your clothes and take off your mask
2012 Verona It's not over now, I won't leave you in the dark

Based on the effect seen on margotpriolet.com

-------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | Scroll Panels | Demo 2 | Codrops

Scroll Panels

Back to the article
Previous demo

Charlotte
LaRue

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

Discover Scroll

2000

Selected
Work

2022
2000 Bocage's Secret My mind drifts to a place where I find you
2002 Coolista Website Redesign Can we kiss with poison on our lips?
2010 Running away Take off your clothes and take off your mask
2012 Verona It's not over now, I won't leave you in the dark

Based on the effect seen on margotpriolet.com

-------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | Scroll Panels | Demo 3 | Codrops

Scroll Panels

Back to the article
Previous demo

Charlotte
LaRue

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

Discover Scroll

2000

Selected
Work

2022
2000 Bocage's Secret My mind drifts to a place where I find you
2002 Coolista Website Redesign Can we kiss with poison on our lips?
2010 Running away Take off your clothes and take off your mask
2012 Verona It's not over now, I won't leave you in the dark

Based on the effect seen on margotpriolet.com

-------------------------------------------------------------------------------- /dist/index4.html: -------------------------------------------------------------------------------- 1 | Scroll Panels | Demo 4 | Codrops

Scroll Panels

Back to the article
Previous demo

Charlotte
LaRue

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

Discover Scroll

2000

Selected
Work

2022
2000 Bocage's Secret My mind drifts to a place where I find you
2002 Coolista Website Redesign Can we kiss with poison on our lips?
2010 Running away Take off your clothes and take off your mask
2012 Verona It's not over now, I won't leave you in the dark

Based on the effect seen on margotpriolet.com

-------------------------------------------------------------------------------- /dist/index5.html: -------------------------------------------------------------------------------- 1 | Scroll Panels | Demo 5 | Codrops

Scroll Panels

Back to the article
Previous demo

Charlotte
LaRue

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

Discover Scroll

2000

Selected
Work

2022
2000 Bocage's Secret My mind drifts to a place where I find you
2002 Coolista Website Redesign Can we kiss with poison on our lips?
2010 Running away Take off your clothes and take off your mask
2012 Verona It's not over now, I won't leave you in the dark

Based on the effect seen on margotpriolet.com

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scrollpanels", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "An exploration of smooth panel scroll effects based on Margot Priolet's website.", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/codrops/ScrollPanels.git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/ScrollPanels/issues" 22 | }, 23 | "devDependencies": { 24 | "parcel": "^2.7.0" 25 | }, 26 | "dependencies": { 27 | "@studio-freight/lenis": "^0.2.9", 28 | "gsap": "^3.11.3", 29 | "imagesloaded": "^5.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 16px; 9 | --color-text: #000; 10 | --color-bg: hsl(22deg 25% 73%); 11 | --color-text-alt: hsl(1deg 69% 50%); 12 | --color-link: #000; 13 | --color-link-hover: #000; 14 | /* Column/item variables */ 15 | --ratio: 1.3; /* image ratio */ 16 | --grid-item-width: 32vw; /* image width */ 17 | --justify: space-between; /* spread columns or center */ 18 | --gap: 2.5vw; /* column gap and margin for items */ 19 | --rotation: 0deg; /* section rotation */ 20 | --radius: 0px; /* image border radius */ 21 | --offset: -30vh; /* offset of even columns */ 22 | /* content section */ 23 | --radius-small: 4px; /* border radius of small images */ 24 | } 25 | 26 | body { 27 | margin: 0; 28 | text-transform: uppercase; 29 | color: var(--color-text); 30 | background-color: var(--color-bg); 31 | font-family: acumin-pro, sans-serif; 32 | -webkit-font-smoothing: antialiased; 33 | -moz-osx-font-smoothing: grayscale; 34 | } 35 | 36 | .demo-2 { 37 | --color-bg: #df6a26; 38 | --color-text-alt: #eaa750; 39 | --ratio: 1; 40 | --grid-item-width: 23vw; 41 | --radius: 8px; 42 | } 43 | 44 | .demo-3 { 45 | --color-bg: #ede9e6; 46 | --color-text-alt: hsl(10deg 69% 50%); 47 | --ratio: 1.1; 48 | --grid-item-width: 17vw; 49 | --radius: 12px; 50 | --justify: center; 51 | --gap: 2.5vw; 52 | } 53 | 54 | .demo-4 { 55 | --color-text: #fff; 56 | --color-link: #fff; 57 | --color-link-hover: #aaa; 58 | --color-bg: #0f0e0e; 59 | --color-text-alt: hsl(10deg 69% 50%); 60 | --ratio: 1; 61 | --grid-item-width: 25vw; 62 | --radius: 4px; 63 | --justify: center; 64 | --gap: 2.5vw; 65 | --rotation: -45deg; 66 | --offset: 20vh; 67 | } 68 | 69 | .demo-5 { 70 | --color-bg: hsl(1deg 15% 83%); 71 | --color-text-alt: hsl(10deg 69% 50%); 72 | --ratio: 0.8; 73 | --grid-item-width: 30vw; 74 | --radius: 0; 75 | --justify: center; 76 | --gap: 1.5vw; 77 | --offset: 0; 78 | } 79 | 80 | /* Page Loader */ 81 | .js .loading::before, 82 | .js .loading::after { 83 | content: ''; 84 | position: fixed; 85 | z-index: 1000; 86 | } 87 | 88 | .js .loading::before { 89 | top: 0; 90 | left: 0; 91 | width: 100%; 92 | height: 100%; 93 | background: var(--color-bg); 94 | } 95 | 96 | .js .loading::after { 97 | top: 50%; 98 | left: 50%; 99 | width: 60px; 100 | height: 60px; 101 | margin: -30px 0 0 -30px; 102 | border-radius: 50%; 103 | opacity: 0.4; 104 | background: var(--color-link); 105 | animation: loaderAnim 0.7s linear infinite alternate forwards; 106 | 107 | } 108 | 109 | @keyframes loaderAnim { 110 | to { 111 | opacity: 1; 112 | transform: scale3d(0.5,0.5,1); 113 | } 114 | } 115 | 116 | a { 117 | text-decoration: none; 118 | color: var(--color-link); 119 | outline: none; 120 | cursor: pointer; 121 | } 122 | 123 | a:hover { 124 | color: var(--color-link-hover); 125 | outline: none; 126 | } 127 | 128 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 129 | a:focus { 130 | /* Provide a fallback style for browsers 131 | that don't support :focus-visible */ 132 | outline: none; 133 | background: lightgrey; 134 | } 135 | 136 | a:focus:not(:focus-visible) { 137 | /* Remove the focus indicator on mouse-focus for browsers 138 | that do support :focus-visible */ 139 | background: transparent; 140 | } 141 | 142 | a:focus-visible { 143 | /* Draw a very noticeable focus style for 144 | keyboard-focus on browsers that do support 145 | :focus-visible */ 146 | outline: 2px solid red; 147 | background: transparent; 148 | } 149 | 150 | .unbutton { 151 | background: none; 152 | border: 0; 153 | padding: 0; 154 | margin: 0; 155 | font: inherit; 156 | cursor: pointer; 157 | } 158 | 159 | .unbutton:focus { 160 | outline: none; 161 | } 162 | 163 | .frame { 164 | width: 100%; 165 | line-height: 1.2; 166 | font-size: 1rem; 167 | color: var(--color-title); 168 | padding: 1rem; 169 | display: grid; 170 | grid-template-columns: auto auto; 171 | grid-template-areas: 'title prev' 'nav nav' 'sponsor sponsor'; 172 | grid-gap: 1rem; 173 | z-index: 100; 174 | position: absolute; 175 | } 176 | 177 | .frame a:not(.frame__title-back), 178 | .row + p a { 179 | white-space: nowrap; 180 | overflow: hidden; 181 | position: relative; 182 | } 183 | 184 | .frame a:not(.frame__title-back)::before, 185 | .row + p a::before { 186 | content: ''; 187 | height: 1px; 188 | width: 100%; 189 | background: currentColor; 190 | position: absolute; 191 | top: 90%; 192 | transition: transform 0.3s; 193 | transform-origin: 0% 50%; 194 | } 195 | 196 | .frame a:not(.frame__title-back):hover::before, 197 | .row + p a:hover::before { 198 | transform: scaleX(0); 199 | transform-origin: 100% 50%; 200 | } 201 | 202 | .frame__title { 203 | grid-area: title; 204 | display: flex; 205 | white-space: nowrap; 206 | } 207 | 208 | .frame__title-main { 209 | font-size: 1rem; 210 | margin: 0; 211 | font-weight: normal; 212 | } 213 | 214 | .frame__title-back { 215 | position: relative; 216 | display: flex; 217 | align-items: flex-end; 218 | } 219 | 220 | .frame__title-back span { 221 | display: none; 222 | } 223 | 224 | .frame__title-back svg { 225 | fill: currentColor; 226 | } 227 | 228 | .frame__prev { 229 | justify-self: end; 230 | grid-area: prev; 231 | } 232 | 233 | .frame__demos { 234 | grid-area: nav; 235 | display: flex; 236 | flex-wrap: wrap; 237 | justify-self: stretch; 238 | justify-content: space-between; 239 | } 240 | 241 | .frame__demos-title { 242 | font-weight: 400; 243 | margin: 0; 244 | font-size: 1rem; 245 | width: 100%; 246 | color: var(--color-text-alt); 247 | } 248 | 249 | .frame__demos-item { 250 | grid-row: 2; 251 | } 252 | 253 | .section { 254 | line-height: 1; 255 | position: static; 256 | top: 0; 257 | z-index: 4; 258 | width: 100%; 259 | min-height: 100vh; 260 | background: var(--color-bg); 261 | } 262 | 263 | .section--intro { 264 | margin-bottom: 250vh; 265 | height: 100vh; 266 | display: flex; 267 | flex-direction: column; 268 | align-items: center; 269 | text-align: center; 270 | justify-content: center; 271 | padding: 8rem 0 2rem; 272 | cursor: default; 273 | } 274 | 275 | .section__title { 276 | font-family: kudryashev-d-excontrast-sans, sans-serif; 277 | font-weight: 300; 278 | font-size: clamp(2rem,17vw,12.5rem); 279 | margin: 5vh 0 6vh; 280 | line-height: 0.9; 281 | text-transform: none; 282 | -moz-font-feature-settings: "swsh"; 283 | -webkit-font-feature-settings: "swsh"; 284 | font-feature-settings: "swsh"; 285 | } 286 | 287 | .section__title--medium { 288 | font-size: clamp(1.5rem,12vw,9rem); 289 | } 290 | 291 | .section__text { 292 | margin: 0; 293 | max-width: 400px; 294 | } 295 | 296 | .section__text--alt { 297 | margin-top: auto; 298 | color: var(--color-text-alt); 299 | } 300 | 301 | .section__arrow { 302 | transform: translateY(3px) rotate(135deg); 303 | fill: currentColor; 304 | } 305 | 306 | .section--columns { 307 | position: fixed; 308 | left: 0; 309 | top: 0; 310 | right: 0; 311 | bottom: 0; 312 | z-index: -1; 313 | width: 100%; 314 | height: 100vh; 315 | } 316 | 317 | .columns { 318 | width: 100%; 319 | position: relative; 320 | display: flex; 321 | justify-content: var(--justify); 322 | gap: var(--gap); 323 | height: 100%; 324 | transform: rotate(var(--rotation)); 325 | align-items: center; 326 | will-change: transform, opacity; 327 | } 328 | 329 | .column-wrap { 330 | position: relative; 331 | z-index: 1; 332 | display: flex; 333 | flex-direction: column; 334 | padding: 5vh 0 15vh; 335 | will-change: transform; 336 | } 337 | 338 | .column-wrap:nth-child(even) { 339 | margin-top: var(--offset); 340 | } 341 | 342 | .column { 343 | position: relative; 344 | display: block; 345 | will-change: transform; 346 | } 347 | 348 | .column__item { 349 | --grid-item-height: calc(var(--grid-item-width) * var(--ratio)); 350 | width: var(--grid-item-width); 351 | height: var(--grid-item-height); 352 | position: relative; 353 | overflow: hidden; 354 | border-radius: var(--radius); 355 | cursor: pointer; 356 | margin: 0 0 var(--gap) 0; 357 | z-index: 1; 358 | will-change: transform, filter; 359 | } 360 | 361 | 362 | .column__item-img { 363 | width: 100%; 364 | height: 100%; 365 | background-size: cover; 366 | background-position: 50% 50%; 367 | will-change: transform; 368 | } 369 | 370 | .section--showcase { 371 | display: flex; 372 | flex-direction: column; 373 | align-items: center; 374 | text-align: center; 375 | justify-content: center; 376 | padding: 8rem 5vw 10vh; 377 | cursor: default; 378 | } 379 | 380 | .section__header { 381 | display: flex; 382 | border-bottom: 1px solid #000; 383 | width: 100%; 384 | align-items: center; 385 | justify-content: space-around; 386 | padding: 4vh 8vw; 387 | margin-bottom: 4rem; 388 | } 389 | 390 | .section__year { 391 | color: var(--color-text-alt); 392 | } 393 | 394 | .row { 395 | text-align: left; 396 | width: 100%; 397 | } 398 | 399 | .row__header { 400 | width: 100%; 401 | display: grid; 402 | grid-template-columns: 4ch 1fr; 403 | grid-template-rows: auto auto; 404 | grid-gap: 2rem; 405 | justify-content: start; 406 | padding: 6rem 0 3rem; 407 | } 408 | 409 | .row__header span:last-child { 410 | grid-column: 1 / span 2; 411 | } 412 | 413 | .row__content { 414 | display: grid; 415 | width: 100%; 416 | grid-auto-flow: column; 417 | grid-gap: 1rem; 418 | justify-content: start; 419 | } 420 | 421 | .row__content-imgwrap { 422 | overflow: hidden; 423 | position: relative; 424 | border-radius: var(--radius-small); 425 | } 426 | 427 | .row__content-img { 428 | aspect-ratio: 2; 429 | height: 100px; 430 | background-size: cover; 431 | background-position: 50% 50%; 432 | } 433 | 434 | .row__content-imgwrap:nth-child(even) .row__content-img{ 435 | aspect-ratio: 1; 436 | } 437 | 438 | .row__content-imgwrap:nth-child(4n) .row__content-img{ 439 | aspect-ratio: 1.5; 440 | } 441 | 442 | .row__content-imgwrap:last-child { 443 | justify-content: end; 444 | } 445 | 446 | .row__content-imgwrap:last-child .row__content-img { 447 | aspect-ratio: 2.75; 448 | } 449 | 450 | .row + p { 451 | margin-top: 40vh; 452 | } 453 | 454 | @media screen and (min-width: 53em) { 455 | .frame { 456 | grid-template-columns: 15% 15% 1fr 15% 15%; 457 | grid-template-rows: auto; 458 | padding: 2rem 3rem; 459 | grid-template-areas: 'title prev nav sponsor sponsor'; 460 | justify-content: start; 461 | grid-gap: 2rem; 462 | align-items: center; 463 | justify-items: start; 464 | } 465 | .frame__prev { 466 | justify-self: start; 467 | } 468 | .frame__demos { 469 | text-align: center; 470 | justify-self: center; 471 | } 472 | .section, 473 | .row { 474 | font-size: 1.45rem; 475 | } 476 | .row__header { 477 | display: grid; 478 | grid-template-columns: 4ch auto 1fr; 479 | grid-template-rows: auto; 480 | } 481 | .row__header span:last-child { 482 | justify-self: end; 483 | grid-column: revert; 484 | } 485 | } 486 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/1.avif -------------------------------------------------------------------------------- /src/img/10.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/10.avif -------------------------------------------------------------------------------- /src/img/11.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/11.avif -------------------------------------------------------------------------------- /src/img/12.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/12.avif -------------------------------------------------------------------------------- /src/img/13.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/13.avif -------------------------------------------------------------------------------- /src/img/14.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/14.avif -------------------------------------------------------------------------------- /src/img/15.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/15.avif -------------------------------------------------------------------------------- /src/img/16.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/16.avif -------------------------------------------------------------------------------- /src/img/17.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/17.avif -------------------------------------------------------------------------------- /src/img/18.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/18.avif -------------------------------------------------------------------------------- /src/img/19.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/19.avif -------------------------------------------------------------------------------- /src/img/2.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/2.avif -------------------------------------------------------------------------------- /src/img/20.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/20.avif -------------------------------------------------------------------------------- /src/img/21.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/21.avif -------------------------------------------------------------------------------- /src/img/22.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/22.avif -------------------------------------------------------------------------------- /src/img/23.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/23.avif -------------------------------------------------------------------------------- /src/img/24.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/24.avif -------------------------------------------------------------------------------- /src/img/25.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/25.avif -------------------------------------------------------------------------------- /src/img/26.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/26.avif -------------------------------------------------------------------------------- /src/img/27.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/27.avif -------------------------------------------------------------------------------- /src/img/3.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/3.avif -------------------------------------------------------------------------------- /src/img/4.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/4.avif -------------------------------------------------------------------------------- /src/img/5.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/5.avif -------------------------------------------------------------------------------- /src/img/6.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/6.avif -------------------------------------------------------------------------------- /src/img/7.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/7.avif -------------------------------------------------------------------------------- /src/img/8.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/8.avif -------------------------------------------------------------------------------- /src/img/9.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ScrollPanels/cb0e61a339e37178ec8a1e10c21f42c5e7e06988/src/img/9.avif -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Panels | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Scroll Panels

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 | 36 |
37 |
38 |

Charlotte
LaRue

39 |

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

40 |

41 | Discover 42 | 43 | Scroll 44 |

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 2000 95 |

Selected
Work

96 | 2022 97 |
98 |
99 |
100 | 2000 101 | Bocage's Secret 102 | My mind drifts to a place where I find you 103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | 2002 122 | Coolista Website Redesign 123 | Can we kiss with poison on our lips? 124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | 2010 143 | Running away 144 | Take off your clothes and take off your mask 145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 | 2012 167 | Verona 168 | It's not over now, I won't leave you in the dark 169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |

Based on the effect seen on margotpriolet.com

186 |
187 |
188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Panels | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Scroll Panels

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 | 36 |
37 |
38 |

Charlotte
LaRue

39 |

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

40 |

41 | Discover 42 | 43 | Scroll 44 |

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | 2000 111 |

Selected
Work

112 | 2022 113 |
114 |
115 |
116 | 2000 117 | Bocage's Secret 118 | My mind drifts to a place where I find you 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | 2002 138 | Coolista Website Redesign 139 | Can we kiss with poison on our lips? 140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 | 2010 159 | Running away 160 | Take off your clothes and take off your mask 161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | 2012 183 | Verona 184 | It's not over now, I won't leave you in the dark 185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |

Based on the effect seen on margotpriolet.com

202 |
203 |
204 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Panels | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Scroll Panels

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 | 36 |
37 |
38 |

Charlotte
LaRue

39 |

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

40 |

41 | Discover 42 | 43 | Scroll 44 |

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | 2000 104 |

Selected
Work

105 | 2022 106 |
107 |
108 |
109 | 2000 110 | Bocage's Secret 111 | My mind drifts to a place where I find you 112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | 2002 131 | Coolista Website Redesign 132 | Can we kiss with poison on our lips? 133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | 2010 152 | Running away 153 | Take off your clothes and take off your mask 154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 | 2012 176 | Verona 177 | It's not over now, I won't leave you in the dark 178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |

Based on the effect seen on margotpriolet.com

195 |
196 |
197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /src/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Panels | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Scroll Panels

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 | 36 |
37 |
38 |

Charlotte
LaRue

39 |

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

40 |

41 | Discover 42 | 43 | Scroll 44 |

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | 2000 134 |

Selected
Work

135 | 2022 136 |
137 |
138 |
139 | 2000 140 | Bocage's Secret 141 | My mind drifts to a place where I find you 142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 | 2002 161 | Coolista Website Redesign 162 | Can we kiss with poison on our lips? 163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 | 2010 182 | Running away 183 | Take off your clothes and take off your mask 184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 | 2012 206 | Verona 207 | It's not over now, I won't leave you in the dark 208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |

Based on the effect seen on margotpriolet.com

225 |
226 |
227 | 228 | 229 | 230 | -------------------------------------------------------------------------------- /src/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Panels | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Scroll Panels

21 | 22 | Back to the article 23 | 24 | 25 | 26 |
27 | Previous demo 28 | 36 |
37 |
38 |

Charlotte
LaRue

39 |

We think having capacity to choose gives us freedom. Choice is the very denial of freedom.

40 |

41 | Discover 42 | 43 | Scroll 44 |

45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | 2000 105 |

Selected
Work

106 | 2022 107 |
108 |
109 |
110 | 2000 111 | Bocage's Secret 112 | My mind drifts to a place where I find you 113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | 2002 132 | Coolista Website Redesign 133 | Can we kiss with poison on our lips? 134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 | 2010 153 | Running away 154 | Take off your clothes and take off your mask 155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 | 2012 177 | Verona 178 | It's not over now, I won't leave you in the dark 179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |

Based on the effect seen on margotpriolet.com

196 |
197 |
198 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const DOM = { 8 | sections: { 9 | columns: document.querySelector('.section--columns'), 10 | showcase: document.querySelector('.section--showcase'), 11 | }, 12 | columns: document.querySelectorAll('.section--columns > .columns'), 13 | columnWraps: document.querySelectorAll('.section--columns .column-wrap'), 14 | itemsWrappers: document.querySelectorAll('.section--columns .column-wrap .column'), 15 | items: document.querySelectorAll('.section--columns .column__item'), 16 | images: document.querySelectorAll('.section--columns .column__item-img'), 17 | }; 18 | 19 | // Lenis smooth scrolling 20 | let lenis; 21 | 22 | // Initialize Lenis smooth scrolling 23 | const initSmoothScrolling = () => { 24 | lenis = new Lenis({ 25 | lerp: 0.2, 26 | smooth: true, 27 | }); 28 | const scrollFn = (time) => { 29 | lenis.raf(time); 30 | requestAnimationFrame(scrollFn); 31 | }; 32 | requestAnimationFrame(scrollFn); 33 | }; 34 | 35 | // GSAP Scroll Triggers 36 | const scroll = () => { 37 | gsap.timeline({ 38 | scrollTrigger: { 39 | start: 0, 40 | end: 'max', 41 | scrub: true 42 | } 43 | }) 44 | .addLabel('start', 0) 45 | .to(DOM.sections.columns, { 46 | ease: 'none', 47 | startAt: {scale: 1.1}, 48 | scale: 1, 49 | }, 'start') 50 | .to(DOM.sections.columns, { 51 | scrollTrigger: { 52 | trigger: DOM.sections.showcase, 53 | start: 0, 54 | end: 'top top', 55 | scrub: true 56 | }, 57 | ease: 'power4.inOut', 58 | startAt: { 59 | opacity: 0.2, 60 | }, 61 | opacity: 1, 62 | // repeat once (go back to "startAt" values) 63 | yoyo: true, 64 | repeat: 1 65 | }, 'start') 66 | .to(DOM.columnWraps, { 67 | ease: 'none', 68 | yPercent: pos => pos%2 ? 3 : -3 69 | }, 'start') 70 | }; 71 | 72 | // Preload images 73 | preloadImages('.column__item-img').then(() => { 74 | document.body.classList.remove('loading'); 75 | // Lenis (smooth scrolling) 76 | initSmoothScrolling(); 77 | // GSAP Scroll Triggers 78 | scroll(); 79 | }); -------------------------------------------------------------------------------- /src/js/index2.js: -------------------------------------------------------------------------------- 1 | import { preloadImages, getTranslationDistance } from './utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const DOM = { 8 | sections: { 9 | columns: document.querySelector('.section--columns'), 10 | showcase: document.querySelector('.section--showcase'), 11 | }, 12 | columns: document.querySelectorAll('.section--columns > .columns'), 13 | columnWraps: document.querySelectorAll('.section--columns .column-wrap'), 14 | itemsWrappers: document.querySelectorAll('.section--columns .column-wrap .column'), 15 | items: document.querySelectorAll('.section--columns .column__item'), 16 | images: document.querySelectorAll('.section--columns .column__item-img'), 17 | }; 18 | 19 | // Lenis smooth scrolling 20 | let lenis; 21 | 22 | // Initialize Lenis smooth scrolling 23 | const initSmoothScrolling = () => { 24 | lenis = new Lenis({ 25 | lerp: 0.2, 26 | smooth: true, 27 | }); 28 | const scrollFn = (time) => { 29 | lenis.raf(time); 30 | requestAnimationFrame(scrollFn); 31 | }; 32 | requestAnimationFrame(scrollFn); 33 | }; 34 | 35 | // GSAP Scroll Triggers 36 | const scroll = () => { 37 | gsap.timeline({ 38 | scrollTrigger: { 39 | start: 0, 40 | end: 'max', 41 | scrub: true 42 | } 43 | }) 44 | .addLabel('start', 0) 45 | .to(DOM.sections.columns, { 46 | ease: 'none', 47 | startAt: {scale: .7}, 48 | scale: 1, 49 | }, 'start') 50 | .to(DOM.sections.columns, { 51 | scrollTrigger: { 52 | trigger: DOM.sections.showcase, 53 | start: 0, 54 | end: 'top top', 55 | scrub: true 56 | }, 57 | ease: 'power4.inOut', 58 | startAt: { 59 | opacity: 0.2, 60 | }, 61 | opacity: 1, 62 | // repeat once (go back to "startAt" values) 63 | yoyo: true, 64 | repeat: 1 65 | }, 'start') 66 | .to(DOM.images, { 67 | ease: 'none', 68 | scale: 1.4, 69 | }, 'start') 70 | 71 | .to(DOM.items, { 72 | scrollTrigger: { 73 | trigger: DOM.sections.showcase, 74 | start: 0, 75 | end: 'top top', 76 | scrub: true 77 | }, 78 | ease: 'none', 79 | x: (pos, target) => { 80 | return getTranslationDistance(target, 600)['x']; 81 | }, 82 | y: (pos, target) => { 83 | return getTranslationDistance(target, 600)['y']; 84 | }, 85 | }, 'start') 86 | }; 87 | 88 | // Preload images 89 | preloadImages('.column__item-img').then(() => { 90 | document.body.classList.remove('loading'); 91 | // Lenis (smooth scrolling) 92 | initSmoothScrolling(); 93 | // GSAP Scroll Triggers 94 | scroll(); 95 | }); -------------------------------------------------------------------------------- /src/js/index3.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const DOM = { 8 | sections: { 9 | columns: document.querySelector('.section--columns'), 10 | showcase: document.querySelector('.section--showcase'), 11 | }, 12 | columns: document.querySelectorAll('.section--columns > .columns'), 13 | columnWraps: document.querySelectorAll('.section--columns .column-wrap'), 14 | itemsWrappers: document.querySelectorAll('.section--columns .column-wrap .column'), 15 | items: document.querySelectorAll('.section--columns .column__item'), 16 | images: document.querySelectorAll('.section--columns .column__item-img'), 17 | }; 18 | 19 | // Lenis smooth scrolling 20 | let lenis; 21 | 22 | // Initialize Lenis smooth scrolling 23 | const initSmoothScrolling = () => { 24 | lenis = new Lenis({ 25 | lerp: 0.2, 26 | smooth: true, 27 | }); 28 | const scrollFn = (time) => { 29 | lenis.raf(time); 30 | requestAnimationFrame(scrollFn); 31 | }; 32 | requestAnimationFrame(scrollFn); 33 | }; 34 | 35 | // GSAP Scroll Triggers 36 | const scroll = () => { 37 | gsap.timeline({ 38 | scrollTrigger: { 39 | start: 0, 40 | end: 'max', 41 | scrub: true 42 | } 43 | }) 44 | .addLabel('start', 0) 45 | .to(DOM.sections.columns, { 46 | ease: 'none', 47 | startAt: {scale: 0.8}, 48 | scale: 1, 49 | }, 'start') 50 | .to(DOM.items, { 51 | scrollTrigger: { 52 | trigger: DOM.sections.showcase, 53 | start: 0, 54 | end: 'top top', 55 | scrub: true 56 | }, 57 | ease: 'power4.inOut', 58 | startAt: { 59 | filter: 'grayscale(100%)' 60 | }, 61 | filter: 'grayscale(0%) ', 62 | // repeat once (go back to "startAt" values) 63 | yoyo: true, 64 | repeat: 1 65 | }, 'start') 66 | .to(DOM.columnWraps, { 67 | ease: 'none', 68 | yPercent: pos => pos%2 ? 10 : -10 69 | }, 'start') 70 | .to(DOM.images, { 71 | ease: 'none', 72 | scale: 3, 73 | }, 'start') 74 | }; 75 | 76 | // Preload images 77 | preloadImages('.column__item-img').then(() => { 78 | document.body.classList.remove('loading'); 79 | // Lenis (smooth scrolling) 80 | initSmoothScrolling(); 81 | // GSAP Scroll Triggers 82 | scroll(); 83 | }); -------------------------------------------------------------------------------- /src/js/index4.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from './utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const DOM = { 8 | sections: { 9 | columns: document.querySelector('.section--columns'), 10 | showcase: document.querySelector('.section--showcase'), 11 | }, 12 | columns: document.querySelectorAll('.section--columns > .columns'), 13 | columnWraps: document.querySelectorAll('.section--columns .column-wrap'), 14 | itemsWrappers: document.querySelectorAll('.section--columns .column-wrap .column'), 15 | items: document.querySelectorAll('.section--columns .column__item'), 16 | images: document.querySelectorAll('.section--columns .column__item-img'), 17 | }; 18 | 19 | // Lenis smooth scrolling 20 | let lenis; 21 | 22 | // Initialize Lenis smooth scrolling 23 | const initSmoothScrolling = () => { 24 | lenis = new Lenis({ 25 | lerp: 0.2, 26 | smooth: true, 27 | }); 28 | const scrollFn = (time) => { 29 | lenis.raf(time); 30 | requestAnimationFrame(scrollFn); 31 | }; 32 | requestAnimationFrame(scrollFn); 33 | }; 34 | 35 | // GSAP Scroll Triggers 36 | const scroll = () => { 37 | gsap.timeline({ 38 | scrollTrigger: { 39 | start: 0, 40 | end: 'max', 41 | scrub: true 42 | } 43 | }) 44 | .addLabel('start', 0) 45 | /* 46 | .to(DOM.sections.columns, { 47 | ease: 'none', 48 | startAt: {scale: 1.2}, 49 | scale: 1, 50 | }, 'start') 51 | */ 52 | .to(DOM.items, { 53 | scrollTrigger: { 54 | trigger: DOM.sections.showcase, 55 | start: 0, 56 | end: 'top top', 57 | scrub: true 58 | }, 59 | ease: 'power4.inOut', 60 | startAt: { 61 | opacity: 0, 62 | filter: 'brightness(300%)' 63 | }, 64 | opacity: 1, 65 | filter: 'brightness(100%)', 66 | // repeat once (go back to "startAt" values) 67 | yoyo: true, 68 | repeat: 1 69 | }, 'start') 70 | .to(DOM.columnWraps, { 71 | ease: 'none', 72 | yPercent: pos => pos*-15-15 73 | }, 'start') 74 | }; 75 | 76 | // Preload images 77 | preloadImages('.column__item-img').then(() => { 78 | document.body.classList.remove('loading'); 79 | // Lenis (smooth scrolling) 80 | initSmoothScrolling(); 81 | // GSAP Scroll Triggers 82 | scroll(); 83 | }); -------------------------------------------------------------------------------- /src/js/index5.js: -------------------------------------------------------------------------------- 1 | import { preloadImages, getTranslationDistance } from './utils'; 2 | import Lenis from '@studio-freight/lenis' 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const DOM = { 8 | sections: { 9 | columns: document.querySelector('.section--columns'), 10 | showcase: document.querySelector('.section--showcase'), 11 | }, 12 | columns: document.querySelectorAll('.section--columns > .columns'), 13 | columnWraps: document.querySelectorAll('.section--columns .column-wrap'), 14 | itemsWrappers: document.querySelectorAll('.section--columns .column-wrap .column'), 15 | items: document.querySelectorAll('.section--columns .column__item'), 16 | images: document.querySelectorAll('.section--columns .column__item-img'), 17 | }; 18 | 19 | // Lenis smooth scrolling 20 | let lenis; 21 | 22 | // Initialize Lenis smooth scrolling 23 | const initSmoothScrolling = () => { 24 | lenis = new Lenis({ 25 | lerp: 0.2, 26 | smooth: true, 27 | }); 28 | const scrollFn = (time) => { 29 | lenis.raf(time); 30 | requestAnimationFrame(scrollFn); 31 | }; 32 | requestAnimationFrame(scrollFn); 33 | }; 34 | 35 | // GSAP Scroll Triggers 36 | const scroll = () => { 37 | gsap.timeline({ 38 | scrollTrigger: { 39 | start: 0, 40 | end: 'max', 41 | scrub: true 42 | } 43 | }) 44 | .addLabel('start', 0) 45 | .to(DOM.sections.columns, { 46 | ease: 'none', 47 | startAt: {scale: .7}, 48 | scale: 1, 49 | }, 'start') 50 | .to(DOM.images, { 51 | ease: 'none', 52 | scale: 1.4, 53 | }, 'start') 54 | 55 | .set(DOM.itemsWrappers, {perspective: 1000}, 'start') 56 | .to(DOM.items, { 57 | scrollTrigger: { 58 | trigger: DOM.sections.showcase, 59 | start: 0, 60 | end: 'top top', 61 | scrub: true 62 | }, 63 | ease: 'none', 64 | startAt: { 65 | rotationX: () => gsap.utils.random(20,30), 66 | x: (pos, target) => { 67 | return getTranslationDistance(target)['x']; 68 | }, 69 | y: (pos, target) => { 70 | return getTranslationDistance(target)['y']; 71 | }, 72 | filter: 'blur(6px)' 73 | }, 74 | x: 0, 75 | y: 0, 76 | rotationX: 0, 77 | rotationY: 0, 78 | filter: 'blur(0px)' 79 | }, 'start') 80 | }; 81 | 82 | // Preload images 83 | preloadImages('.column__item-img').then(() => { 84 | document.body.classList.remove('loading'); 85 | // Lenis (smooth scrolling) 86 | initSmoothScrolling(); 87 | // GSAP Scroll Triggers 88 | scroll(); 89 | }); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | /** 4 | * Preload images 5 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img' 6 | */ 7 | const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 10 | }); 11 | }; 12 | 13 | /** 14 | * Map number x from range [a, b] to [c, d] 15 | * @param {Number} x - changing value 16 | * @param {Number} a 17 | * @param {Number} b 18 | * @param {Number} c 19 | * @param {Number} d 20 | */ 21 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c; 22 | 23 | /** 24 | * Calculates how much (x and y) the element1 needs to move away from the center of the screen for a distance of [spread]px 25 | * @param {Element} element1 26 | * @param {JSON} position 27 | * @param {Number} spread - The maximum distance the element1 could have from element2. This will depend on how far the elements are from each other. The closer they are, the higher the returned values. If the distance equals or is higher than [maxDistance] then the return value will be {0,0} 28 | * @param {Number} maxDistance - The maximum distance for a possible translation to occur 29 | * @returns {JSON} the x,y translation values 30 | */ 31 | const getTranslationDistance = (element1, spread = 400, maxDistance = 5000) => { 32 | const winsize = {width: window.innerWidth, height: window.innerHeight} 33 | const rect = element1.getBoundingClientRect(); 34 | const elCenter = {x: rect.left + element1.offsetWidth/2, y: rect.top + element1.offsetHeight/2}; 35 | const win = {x: winsize.width/2, y: winsize.height/2}; 36 | 37 | spread = Math.max( map(getDistanceToCenter(element1), 0, maxDistance, spread, 0) , 0); 38 | 39 | const angle = Math.atan2(Math.abs(win.y - elCenter.y), Math.abs(win.x - elCenter.x)); 40 | 41 | let x = Math.abs(Math.cos(angle) * spread); 42 | let y = Math.abs(Math.sin(angle) * spread); 43 | 44 | return { 45 | x: elCenter.x < win.x ? x*-1 : x, 46 | y: elCenter.y < win.y ? y*-1 : y 47 | }; 48 | }; 49 | 50 | /** 51 | * Gets the distance between the element and the center of the viewport 52 | * @param {Element} element1 53 | * @returns {Number} The distance value 54 | */ 55 | const getDistanceToCenter = (element1) => { 56 | const winsize = {width: window.innerWidth, height: window.innerHeight} 57 | const elCenter = {x: element1.offsetLeft + element1.offsetWidth/2, y: element1.offsetTop + element1.offsetHeight/2}; 58 | const wincenter = {x:winsize.width/2, y: winsize.height/2}; 59 | return Math.hypot(elCenter.x - wincenter.x, elCenter.y - wincenter.y); 60 | } 61 | 62 | export { 63 | preloadImages, 64 | map, 65 | getTranslationDistance, 66 | getDistanceToCenter, 67 | }; --------------------------------------------------------------------------------