├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 1.04213a58.jpg ├── 1.a45131b3.jpg ├── 2.3ff1fdb6.jpg ├── 2.cccf08ef.jpg ├── 3.3ef41889.jpg ├── 3.b606be87.jpg ├── 4.0e5501ba.jpg ├── 4.24fd614c.jpg ├── 5.d13f5e61.jpg ├── 5.f63eb06a.jpg ├── 6.786c7db4.jpg ├── 6.a9c5f8cd.jpg ├── favicon.824cf0c5.ico ├── favicon.a64e97b2.ico ├── index.01b4f97a.css ├── index.d046a61c.css ├── index.d046a61c.css.map ├── index.html ├── index2.html ├── index3.739bf03c.js ├── index3.739bf03c.js.map ├── index3.b5e7c14d.js ├── index3.e9a2d1b4.js └── index3.html ├── package.json ├── src.zip └── src ├── css └── base.css ├── favicon.ico ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg └── button.svg ├── index.html ├── index2.html ├── index3.html └── js ├── index.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 -------------------------------------------------------------------------------- /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 | # Background Shift Animation with CSS Blend Modes 2 | 3 | A background color shift effect using a CSS blend mode and a multi-layer animation. 4 | 5 | ![Image Title](https://tympanus.net/codrops/wp-content/uploads/2022/01/BackgroundShift_feat.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=58511) 8 | 9 | [Demo](http://tympanus.net/Development/BackgroundShift/) 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.04213a58.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/1.04213a58.jpg -------------------------------------------------------------------------------- /dist/1.a45131b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/1.a45131b3.jpg -------------------------------------------------------------------------------- /dist/2.3ff1fdb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/2.3ff1fdb6.jpg -------------------------------------------------------------------------------- /dist/2.cccf08ef.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/2.cccf08ef.jpg -------------------------------------------------------------------------------- /dist/3.3ef41889.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/3.3ef41889.jpg -------------------------------------------------------------------------------- /dist/3.b606be87.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/3.b606be87.jpg -------------------------------------------------------------------------------- /dist/4.0e5501ba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/4.0e5501ba.jpg -------------------------------------------------------------------------------- /dist/4.24fd614c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/4.24fd614c.jpg -------------------------------------------------------------------------------- /dist/5.d13f5e61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/5.d13f5e61.jpg -------------------------------------------------------------------------------- /dist/5.f63eb06a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/5.f63eb06a.jpg -------------------------------------------------------------------------------- /dist/6.786c7db4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/6.786c7db4.jpg -------------------------------------------------------------------------------- /dist/6.a9c5f8cd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/6.a9c5f8cd.jpg -------------------------------------------------------------------------------- /dist/favicon.824cf0c5.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/favicon.824cf0c5.ico -------------------------------------------------------------------------------- /dist/favicon.a64e97b2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/dist/favicon.a64e97b2.ico -------------------------------------------------------------------------------- /dist/index.01b4f97a.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:22px}body{--color-text:#fff;--color-bg:#e1ddd8;--color-link:#4ebbfb;--color-link-hover:#fff;--color-bg-shift:#1e2227;--page-padding:2vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:brother-1816,sans-serif;margin:0}.demo-2{--color-bg:#d8d8e1;--color-link:#fbae4e;--color-bg-shift:#2b2b3c}.demo-3{--color-bg:#e1d8dc;--color-link:#4efbf3;--color-bg-shift:#2e2125}.invert{-webkit-filter:invert(1);filter:invert(1)}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:var(--color-bg);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite alternate forwards;background:#000;border-radius:50%;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.4;top:50%;width:60px}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);cursor:pointer;text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}.unbutton{background:none;border:0;font:inherit;margin:0;padding:0}.unbutton:focus{outline:none}main{position:relative;z-index:100}.bg{background:var(--color-bg)}.bg,.shift{height:100%;pointer-events:none;position:fixed;top:0;width:100%}.shift{display:grid}.shift--rotated{height:120vh;top:-10vh}.shift--horizontal{grid-auto-flow:row;grid-auto-rows:1fr}.shift--vertical{grid-auto-columns:1fr;grid-auto-flow:column}.shift__layer{overflow:hidden;position:relative}.shift--rotated .shift__layer{left:-10%;transform:rotate(4deg) scale(1.1);width:120%}.shift__layer-inner{background:var(--color-bg-shift);height:100%;transform:translate3d(0,101%,0)}.shift--vertical .shift__layer-inner{transform:translate3d(101%,0,0)}.blend{mix-blend-mode:exclusion}.intro{grid-gap:5vh;display:grid;grid-template-areas:"intro-images intro-menu" "intro-title intro-title";grid-template-columns:1fr auto;grid-template-rows:auto auto;height:100vh;padding:0 var(--page-padding) var(--page-padding);position:relative}.intro__title{align-self:end;grid-area:intro-title;text-transform:uppercase}.intro__title-links{display:flex;flex-wrap:wrap;font-size:.65rem;margin-left:.25rem}.demos{width:100%}.current{color:var(--color-text)}.intro__title-links a{margin-right:.5rem}.intro__title-main{font-family:ivypresto-display,serif;font-size:13vw;font-weight:400;line-height:.9;margin:0;pointer-events:none}.intro__title-sub{font-size:4vw;font-size:clamp(1rem,4vw,1.35rem);font-weight:300;line-height:1;margin:.5rem 0 0}.intro__gallery{grid-gap:1rem;display:grid;grid-area:intro-images;grid-template-columns:repeat(3,1fr)}.intro__gallery-item{background-position:50% 50%;background-size:cover;border-radius:13vw;display:block;margin-top:1rem;width:100%}.intro__gallery-item--top{border-radius:0 0 13vw 13vw;margin:0 0 50%}.intro__menu-button{align-self:start;background:none;border:0;cursor:not-allowed;height:60px;justify-self:end;margin-top:1rem;width:60px}.lines{stroke-width:4px}.present{padding:0 var(--page-padding) 10vh;position:relative}.present__text--large{font-size:5.5vw;font-size:clamp(1rem,5.25vw,10rem);font-weight:300;grid-area:present-large;-webkit-hyphens:auto;hyphens:auto;line-height:1;max-width:95%}.present__text--small{font-size:1.25rem;font-size:clamp(1rem,2vw,1.25rem);font-weight:300;grid-area:present-small;line-height:1.3}.present__text--small p{margin-bottom:10vh}.present__visual{align-self:center;background-position:50% 50%;background-size:cover;border-radius:20vw;grid-area:present-visual;height:105vh;justify-self:center;max-width:70vh;position:relative;width:70%}.projects{display:grid;grid-template-areas:"... ... project-latest" "project-img-left ... project-title" "project-img-left project-img-right project-img-right" "project-more project-more project-more";grid-template-columns:35% 15% 1fr;position:relative}.project__latest{font-weight:300;grid-area:project-latest;margin-left:5vw;padding-bottom:20vh;position:relative;text-align:center;text-transform:uppercase;width:20vw;z-index:0}.project__latest:after{border:1px solid #fff;border-radius:50%;content:"";height:44vw;left:50%;margin-left:-22vw;position:absolute;top:-25%;width:44vw}.projects__img{background-position:50% 50%;background-size:cover;position:relative}.projects__title{font-family:ivypresto-display,serif;font-weight:400;grid-area:project-title;padding-right:var(--page-padding);text-align:right;text-transform:uppercase}.projects__title-main{display:block;font-size:10vw;font-size:clamp(2rem,10vw,9rem);line-height:.9}.projects__title-sub{font-size:4vw;font-size:clamp(1.5rem,4vw,3rem);font-style:italic;line-height:1;margin-right:.5vw}.projects__img--left{border-radius:0 30vh 30vh 0;grid-area:project-img-left;grid-column-end:3;height:60vh}.projects__img--right{border-radius:40vh 0 0 40vh;grid-area:project-img-right;height:80vh}.projects__more{font-size:1.5rem;font-size:clamp(1rem,3vw,1.5rem);font-weight:300;grid-area:project-more;justify-self:center;margin:15vh 0 35vh;text-decoration:underline}.type{counter-reset:type-link;padding:30vh var(--page-padding)}.type__link{color:#fff;display:block;font-size:5vw;font-size:clamp(2rem,5vw,6rem);font-weight:300;margin:0 1rem 0 0;position:relative;white-space:nowrap}.type__link:focus,.type__link:hover{color:#fff}.type__link:nth-child(2n){font-family:ivypresto-display,serif;font-style:italic}.type__link:before{content:counter(type-link);counter-increment:type-link;display:inline-block;font-family:brother-1816,sans-serif;font-size:1.15rem;font-style:normal;margin-right:.5rem;vertical-align:110%}.footer{min-height:400px;padding:0 var(--page-padding)}.footer__links{font-size:1.25rem;font-weight:300;grid-area:footer-list;list-style:none;margin:0;padding:0}.footer__links a{filter:invert(1)}.footer__links a:focus,.footer__links a:hover{filter:none}.footer__img{align-self:end;background-position:50% 50%;background-size:cover;border-radius:20vh 20vh 0 0;grid-area:footer-img;height:80vh;justify-self:center;max-height:400px;max-width:300px;width:40vh}.footer__author{align-self:end;font-family:ivypresto-display,serif;font-size:5vw;font-size:clamp(2rem,4vw,5rem);font-weight:400;grid-area:footer-author;margin:0;padding:1rem 0}.footer__year{align-self:end;font-size:1.25rem;font-size:clamp(1rem,2vw,1.25rem);font-weight:300;grid-area:footer-year;padding-bottom:1rem}@media screen and (min-width:53em){body{--page-padding:1.5rem}.lines{stroke-width:2px}.intro__menu-button{height:105px;width:105px}.intro{grid-template-areas:"intro-images intro-menu" "intro-images intro-ad" "intro-title ...";grid-template-columns:67% 1fr;grid-template-rows:1fr 1fr auto}.intro__title{white-space:nowrap}.demos{position:relative;width:auto}.demos:before{border-bottom:1px solid;content:"";display:inline-block;margin:0 .5rem;vertical-align:middle;width:3rem}.present{display:grid;grid-template-areas:"present-large present-large""present-small present-visual";grid-template-columns:40% 1fr}.type__link{display:inline-block}.footer{align-content:space-between;display:grid;grid-template-areas:"footer-list footer-img ...""footer-author footer-img footer-year";grid-template-columns:auto 1fr auto}.footer__links{column-count:2}} 2 | 3 | /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{display:inline-block;height:100vh;white-space:nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;height:100%;vertical-align:top;white-space:nowrap}.c-scrollbar{height:100%;opacity:0;position:absolute;right:0;top:0;transform-origin:center right;transition:transform .3s,opacity .3s;width:11px}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{bottom:0;height:10px;top:auto;transform:scaleY(1);width:100%}[data-scroll-direction=horizontal] .c-scrollbar:hover{transform:scaleY(1.3)}.c-scrollbar_thumb{background-color:#000;border-radius:10px;cursor:-webkit-grab;cursor:grab;margin:2px;opacity:.5;position:absolute;right:0;top:0;width:7px}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{bottom:0;right:auto} -------------------------------------------------------------------------------- /dist/index.d046a61c.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 22px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #e1ddd8; 15 | --color-link: #4ebbfb; 16 | --color-link-hover: #fff; 17 | --color-bg-shift: #1e2227; 18 | --page-padding: 2vw; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | font-family: brother-1816, sans-serif; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .demo-2 { 27 | --color-bg: #d8d8e1; 28 | --color-link: #fbae4e; 29 | --color-bg-shift: #2b2b3c; 30 | } 31 | 32 | .demo-3 { 33 | --color-bg: #e1d8dc; 34 | --color-link: #4efbf3; 35 | --color-bg-shift: #2e2125; 36 | } 37 | 38 | .invert { 39 | -webkit-filter: invert(1); 40 | filter: invert(1); 41 | } 42 | 43 | /* Page Loader */ 44 | .js .loading::before, 45 | .js .loading::after { 46 | content: ''; 47 | position: fixed; 48 | z-index: 1000; 49 | } 50 | 51 | .js .loading::before { 52 | top: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background: var(--color-bg); 57 | } 58 | 59 | .js .loading::after { 60 | top: 50%; 61 | left: 50%; 62 | width: 60px; 63 | height: 60px; 64 | margin: -30px 0 0 -30px; 65 | border-radius: 50%; 66 | opacity: 0.4; 67 | background: #000; 68 | animation: loaderAnim 0.7s linear infinite alternate forwards; 69 | 70 | } 71 | 72 | @keyframes loaderAnim { 73 | to { 74 | opacity: 1; 75 | transform: scale3d(0.5, 0.5, 1); 76 | } 77 | } 78 | 79 | a { 80 | text-decoration: none; 81 | color: var(--color-link); 82 | outline: none; 83 | cursor: pointer; 84 | } 85 | 86 | a:hover { 87 | color: var(--color-link-hover); 88 | outline: none; 89 | } 90 | 91 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 92 | a:focus { 93 | /* Provide a fallback style for browsers 94 | that don't support :focus-visible */ 95 | outline: none; 96 | background: lightgrey; 97 | } 98 | 99 | a:focus:not(:focus-visible) { 100 | /* Remove the focus indicator on mouse-focus for browsers 101 | that do support :focus-visible */ 102 | background: transparent; 103 | } 104 | 105 | a:focus-visible { 106 | /* Draw a very noticeable focus style for 107 | keyboard-focus on browsers that do support 108 | :focus-visible */ 109 | outline: 2px solid red; 110 | background: transparent; 111 | } 112 | 113 | .unbutton { 114 | background: none; 115 | border: 0; 116 | padding: 0; 117 | margin: 0; 118 | font: inherit; 119 | } 120 | 121 | .unbutton:focus { 122 | outline: none; 123 | } 124 | 125 | main { 126 | position: relative; 127 | z-index: 100; 128 | } 129 | 130 | .bg { 131 | background: var(--color-bg); 132 | position: fixed; 133 | top: 0; 134 | height: 100%; 135 | width: 100%; 136 | pointer-events: none; 137 | } 138 | 139 | .shift { 140 | position: fixed; 141 | top: 0; 142 | height: 100%; 143 | width: 100%; 144 | display: grid; 145 | pointer-events: none; 146 | } 147 | 148 | .shift--rotated { 149 | height: 120vh; 150 | top: -10vh; 151 | } 152 | 153 | .shift--horizontal { 154 | grid-auto-rows: 1fr; 155 | grid-auto-flow: row; 156 | } 157 | 158 | .shift--vertical { 159 | grid-auto-columns: 1fr; 160 | grid-auto-flow: column; 161 | } 162 | 163 | .shift__layer { 164 | position: relative; 165 | overflow: hidden; 166 | margin-top: -0.5px; 167 | } 168 | 169 | .shift--rotated .shift__layer { 170 | transform: rotate(4deg) scale(1.1); 171 | width: 120%; 172 | left: -10%; 173 | } 174 | 175 | .shift__layer-inner { 176 | height: 100%; 177 | background: var(--color-bg-shift); 178 | transform: translate3d(0, 101%, 0); 179 | } 180 | 181 | .shift--vertical .shift__layer-inner { 182 | transform: translate3d(101%, 0, 0); 183 | } 184 | 185 | .blend { 186 | mix-blend-mode: exclusion; 187 | } 188 | 189 | .intro { 190 | position: relative; 191 | display: grid; 192 | grid-template-areas: 193 | 'intro-images intro-menu' 194 | 'intro-title intro-title'; 195 | grid-template-columns: 1fr auto; 196 | grid-template-rows: auto auto; 197 | padding: 0 var(--page-padding) var(--page-padding); 198 | grid-gap: 5vh; 199 | height: 100vh; 200 | } 201 | 202 | .intro__title { 203 | grid-area: intro-title; 204 | text-transform: uppercase; 205 | align-self: end; 206 | } 207 | 208 | .intro__title-links { 209 | font-size: 0.65rem; 210 | margin-left: 0.25rem; 211 | display: flex; 212 | flex-wrap: wrap; 213 | } 214 | 215 | .demos { 216 | width: 100%; 217 | } 218 | 219 | .current { 220 | color: var(--color-text); 221 | } 222 | 223 | .intro__title-links a { 224 | margin-right: 0.5rem; 225 | } 226 | 227 | .intro__title-main { 228 | font-size: 13vw; 229 | font-family: ivypresto-display, serif; 230 | font-weight: 400; 231 | margin: 0; 232 | line-height: 0.9; 233 | pointer-events: none; 234 | } 235 | 236 | .intro__title-sub { 237 | font-size: 4vw; 238 | font-size: clamp(1rem, 4vw, 1.35rem); 239 | font-weight: 300; 240 | margin: 0.5rem 0 0 0; 241 | line-height: 1; 242 | } 243 | 244 | .intro__gallery { 245 | grid-area: intro-images; 246 | display: grid; 247 | grid-template-columns: repeat(3, 1fr); 248 | grid-gap: 1rem; 249 | } 250 | 251 | .intro__gallery-item { 252 | width: 100%; 253 | display: block; 254 | background-size: cover; 255 | border-radius: 13vw; 256 | margin-top: 1rem; 257 | background-position: 50% 50%; 258 | } 259 | 260 | .intro__gallery-item--top { 261 | border-radius: 0 0 13vw 13vw; 262 | margin: 0 0 50%; 263 | } 264 | 265 | .intro__menu-button { 266 | align-self: start; 267 | justify-self: end; 268 | border: 0; 269 | margin-top: 1rem; 270 | background: none; 271 | cursor: not-allowed; 272 | width: 60px; 273 | height: 60px; 274 | } 275 | 276 | .lines { 277 | stroke-width: 4px; 278 | } 279 | 280 | .present { 281 | position: relative; 282 | padding: 0 var(--page-padding) 10vh; 283 | } 284 | 285 | .present__text--large { 286 | grid-area: present-large; 287 | max-width: 95%; 288 | -webkit-hyphens: auto; 289 | hyphens: auto; 290 | font-size: 5.5vw; 291 | font-size: clamp(1rem, 5.25vw, 10rem); 292 | line-height: 1; 293 | font-weight: 300; 294 | } 295 | 296 | .present__text--small { 297 | grid-area: present-small; 298 | font-size: 1.25rem; 299 | font-size: clamp(1rem, 2vw, 1.25rem); 300 | line-height: 1.3; 301 | font-weight: 300; 302 | } 303 | 304 | .present__text--small p { 305 | margin-bottom: 10vh; 306 | } 307 | 308 | .present__visual { 309 | grid-area: present-visual; 310 | border-radius: 20vw; 311 | background-size: cover; 312 | background-position: 50% 50%; 313 | height: 105vh; 314 | width: 70%; 315 | max-width: 70vh; 316 | align-self: center; 317 | justify-self: center; 318 | position: relative; 319 | } 320 | 321 | .projects { 322 | position: relative; 323 | display: grid; 324 | grid-template-columns: 35% 15% 1fr; 325 | grid-template-areas: '... ... project-latest' 326 | 'project-img-left ... project-title' 327 | 'project-img-left project-img-right project-img-right' 328 | 'project-more project-more project-more'; 329 | } 330 | 331 | .project__latest { 332 | grid-area: project-latest; 333 | text-transform: uppercase; 334 | font-weight: 300; 335 | text-align: center; 336 | position: relative; 337 | padding-bottom: 20vh; 338 | margin-left: 5vw; 339 | width: 20vw; 340 | z-index: 0; 341 | } 342 | 343 | .project__latest::after { 344 | content: ''; 345 | position: absolute; 346 | width: 44vw; 347 | height: 44vw; 348 | border: 1px solid #fff; 349 | border-radius: 50%; 350 | left: 50%; 351 | top: -25%; 352 | margin-left: -22vw; 353 | } 354 | 355 | .projects__img { 356 | position: relative; 357 | background-size: cover; 358 | background-position: 50% 50%; 359 | } 360 | 361 | .projects__title { 362 | grid-area: project-title; 363 | text-align: right; 364 | padding-right: var(--page-padding); 365 | font-family: ivypresto-display, serif; 366 | font-weight: 400; 367 | text-transform: uppercase; 368 | } 369 | 370 | .projects__title-main { 371 | font-size: 10vw; 372 | font-size: clamp(2rem, 10vw, 9rem); 373 | display: block; 374 | line-height: 0.9; 375 | } 376 | 377 | .projects__title-sub { 378 | font-size: 4vw; 379 | font-size: clamp(1.5rem, 4vw, 3rem); 380 | font-style: italic; 381 | line-height: 1; 382 | margin-right: 0.5vw; 383 | } 384 | 385 | .projects__img--left { 386 | grid-area: project-img-left; 387 | grid-column-end: 3; 388 | border-radius: 0 30vh 30vh 0; 389 | height: 60vh; 390 | } 391 | 392 | .projects__img--right { 393 | grid-area: project-img-right; 394 | border-radius: 40vh 0 0 40vh; 395 | height: 80vh; 396 | } 397 | 398 | .projects__more { 399 | grid-area: project-more; 400 | justify-self: center; 401 | text-decoration: underline; 402 | font-size: 1.5rem; 403 | font-size: clamp(1rem, 3vw, 1.5rem); 404 | margin: 15vh 0 35vh; 405 | font-weight: 300; 406 | } 407 | 408 | .type { 409 | padding: 30vh var(--page-padding); 410 | counter-reset: type-link; 411 | } 412 | 413 | .type__link { 414 | font-size: 5vw; 415 | font-size: clamp(2rem, 5vw, 6rem); 416 | font-weight: 300; 417 | color: #fff; 418 | margin: 0 1rem 0 0; 419 | position: relative; 420 | white-space: nowrap; 421 | display: block; 422 | } 423 | 424 | .type__link:hover, 425 | .type__link:focus { 426 | color: #fff; 427 | } 428 | 429 | .type__link:nth-child(even) { 430 | font-family: ivypresto-display, serif; 431 | font-style: italic; 432 | } 433 | 434 | .type__link::before { 435 | counter-increment: type-link; 436 | content: counter(type-link); 437 | font-family: brother-1816, sans-serif; 438 | font-size: 1.15rem; 439 | font-style: normal; 440 | display: inline-block; 441 | margin-right: 0.5rem; 442 | vertical-align: 110%; 443 | } 444 | 445 | .footer { 446 | min-height: 400px; 447 | padding: 0 var(--page-padding); 448 | } 449 | 450 | .footer__links { 451 | grid-area: footer-list; 452 | list-style: none; 453 | margin: 0; 454 | padding: 0; 455 | font-size: 1.25rem; 456 | font-weight: 300; 457 | } 458 | 459 | .footer__links a { 460 | filter: invert(1); 461 | } 462 | 463 | .footer__links a:hover, 464 | .footer__links a:focus { 465 | filter: none; 466 | } 467 | 468 | .footer__img { 469 | grid-area: footer-img; 470 | max-width: 300px; 471 | max-height: 400px; 472 | height: 80vh; 473 | width: 40vh; 474 | background-size: cover; 475 | background-position: 50% 50%; 476 | align-self: end; 477 | justify-self: center; 478 | border-radius: 20vh 20vh 0 0; 479 | } 480 | 481 | .footer__author { 482 | grid-area: footer-author; 483 | margin: 0; 484 | align-self: end; 485 | padding: 1rem 0; 486 | font-family: ivypresto-display, serif; 487 | font-weight: 400; 488 | font-size: 5vw; 489 | font-size: clamp(2rem, 4vw, 5rem); 490 | } 491 | 492 | .footer__year { 493 | grid-area: footer-year; 494 | align-self: end; 495 | padding-bottom: 1rem; 496 | font-size: 1.25rem; 497 | font-size: clamp(1rem, 2vw, 1.25rem); 498 | font-weight: 300; 499 | } 500 | 501 | @media screen and (min-width: 53em) { 502 | body { 503 | --page-padding: 1.5rem; 504 | } 505 | 506 | .lines { 507 | stroke-width: 2px; 508 | } 509 | 510 | .intro__menu-button { 511 | width: 105px; 512 | height: 105px; 513 | } 514 | 515 | .intro { 516 | grid-template-areas: 517 | 'intro-images intro-menu' 518 | 'intro-images intro-ad' 519 | 'intro-title ...'; 520 | grid-template-columns: 67% 1fr; 521 | grid-template-rows: 1fr 1fr auto; 522 | } 523 | 524 | .intro__title { 525 | white-space: nowrap; 526 | } 527 | 528 | .demos { 529 | position: relative; 530 | width: auto; 531 | } 532 | 533 | .demos::before { 534 | content: ''; 535 | width: 3rem; 536 | border-bottom: 1px solid; 537 | display: inline-block; 538 | vertical-align: middle; 539 | margin: 0 0.5rem; 540 | } 541 | 542 | .present { 543 | display: grid; 544 | grid-template-areas: 'present-large present-large''present-small present-visual'; 545 | grid-template-columns: 40% 1fr; 546 | } 547 | 548 | .type__link { 549 | display: inline-block; 550 | } 551 | 552 | .footer { 553 | display: grid; 554 | grid-template-areas: 'footer-list footer-img ...''footer-author footer-img footer-year'; 555 | grid-template-columns: auto 1fr auto; 556 | align-content: space-between; 557 | } 558 | 559 | .footer__links { 560 | column-count: 2; 561 | } 562 | } 563 | 564 | /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 565 | html.has-scroll-smooth { 566 | overflow: hidden; 567 | position: fixed; 568 | top: 0; 569 | left: 0; 570 | right: 0; 571 | bottom: 0; 572 | } 573 | 574 | html.has-scroll-dragging { 575 | -webkit-user-select: none; 576 | -moz-user-select: none; 577 | -ms-user-select: none; 578 | user-select: none; 579 | } 580 | 581 | .has-scroll-smooth body { 582 | overflow: hidden; 583 | } 584 | 585 | .has-scroll-smooth [data-scroll-container] { 586 | min-height: 100vh; 587 | } 588 | 589 | [data-scroll-direction="horizontal"] [data-scroll-container] { 590 | height: 100vh; 591 | display: inline-block; 592 | white-space: nowrap; 593 | } 594 | 595 | [data-scroll-direction="horizontal"] [data-scroll-section] { 596 | display: inline-block; 597 | vertical-align: top; 598 | white-space: nowrap; 599 | height: 100%; 600 | } 601 | 602 | .c-scrollbar { 603 | position: absolute; 604 | right: 0; 605 | top: 0; 606 | width: 11px; 607 | height: 100%; 608 | transform-origin: center right; 609 | transition: transform 0.3s, opacity 0.3s; 610 | opacity: 0; 611 | } 612 | 613 | .c-scrollbar:hover { 614 | transform: scaleX(1.45); 615 | } 616 | 617 | .c-scrollbar:hover, 618 | .has-scroll-scrolling .c-scrollbar, 619 | .has-scroll-dragging .c-scrollbar { 620 | opacity: 1; 621 | } 622 | 623 | [data-scroll-direction="horizontal"] .c-scrollbar { 624 | width: 100%; 625 | height: 10px; 626 | top: auto; 627 | bottom: 0; 628 | transform: scaleY(1); 629 | } 630 | 631 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 632 | transform: scaleY(1.3); 633 | } 634 | 635 | .c-scrollbar_thumb { 636 | position: absolute; 637 | top: 0; 638 | right: 0; 639 | background-color: black; 640 | opacity: 0.5; 641 | width: 7px; 642 | border-radius: 10px; 643 | margin: 2px; 644 | cursor: -webkit-grab; 645 | cursor: grab; 646 | } 647 | 648 | .has-scroll-dragging .c-scrollbar_thumb { 649 | cursor: -webkit-grabbing; 650 | cursor: grabbing; 651 | } 652 | 653 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 654 | right: auto; 655 | bottom: 0; 656 | } 657 | /*# sourceMappingURL=index.d046a61c.css.map */ 658 | -------------------------------------------------------------------------------- /dist/index.d046a61c.css.map: -------------------------------------------------------------------------------- 1 | {"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["src/css/base.css"],"sourcesContent":["*,\r\n*::after,\r\n*::before {\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n:root {\r\n\tfont-size: 22px;\r\n}\r\n\r\nbody {\r\n\tmargin: 0;\r\n\t--color-text: #fff;\r\n\t--color-bg: #e1ddd8;\r\n\t--color-link: #4ebbfb;\r\n\t--color-link-hover: #fff;\r\n\t--color-bg-shift: #1e2227;\r\n\t--page-padding: 2vw;\r\n\tcolor: var(--color-text);\r\n\tbackground-color: var(--color-bg);\r\n\tfont-family: brother-1816, sans-serif;\r\n\t-webkit-font-smoothing: antialiased;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.demo-2 {\r\n\t--color-bg: #d8d8e1;\r\n\t--color-link: #fbae4e;\r\n\t--color-bg-shift: #2b2b3c;\r\n}\r\n\r\n.demo-3 {\r\n\t--color-bg: #e1d8dc;\r\n\t--color-link: #4efbf3;\r\n\t--color-bg-shift: #2e2125;\r\n}\r\n\r\n.invert {\r\n\t-webkit-filter: invert(1);\r\n\tfilter: invert(1);\r\n}\r\n\r\n/* Page Loader */\r\n.js .loading::before,\r\n.js .loading::after {\r\n\tcontent: '';\r\n\tposition: fixed;\r\n\tz-index: 1000;\r\n}\r\n\r\n.js .loading::before {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: var(--color-bg);\r\n}\r\n\r\n.js .loading::after {\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n\tmargin: -30px 0 0 -30px;\r\n\tborder-radius: 50%;\r\n\topacity: 0.4;\r\n\tbackground: #000;\r\n\tanimation: loaderAnim 0.7s linear infinite alternate forwards;\r\n\r\n}\r\n\r\n@keyframes loaderAnim {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: scale3d(0.5, 0.5, 1);\r\n\t}\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n\tcolor: var(--color-link);\r\n\toutline: none;\r\n\tcursor: pointer;\r\n}\r\n\r\na:hover {\r\n\tcolor: var(--color-link-hover);\r\n\toutline: none;\r\n}\r\n\r\n/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */\r\na:focus {\r\n\t/* Provide a fallback style for browsers\r\n\t that don't support :focus-visible */\r\n\toutline: none;\r\n\tbackground: lightgrey;\r\n}\r\n\r\na:focus:not(:focus-visible) {\r\n\t/* Remove the focus indicator on mouse-focus for browsers\r\n\t that do support :focus-visible */\r\n\tbackground: transparent;\r\n}\r\n\r\na:focus-visible {\r\n\t/* Draw a very noticeable focus style for\r\n\t keyboard-focus on browsers that do support\r\n\t :focus-visible */\r\n\toutline: 2px solid red;\r\n\tbackground: transparent;\r\n}\r\n\r\n.unbutton {\r\n\tbackground: none;\r\n\tborder: 0;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont: inherit;\r\n}\r\n\r\n.unbutton:focus {\r\n\toutline: none;\r\n}\r\n\r\nmain {\r\n\tposition: relative;\r\n\tz-index: 100;\r\n}\r\n\r\n.bg {\r\n\tbackground: var(--color-bg);\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tpointer-events: none;\r\n}\r\n\r\n.shift {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tdisplay: grid;\r\n\tpointer-events: none;\r\n}\r\n\r\n.shift--rotated {\r\n\theight: 120vh;\r\n\ttop: -10vh;\r\n}\r\n\r\n.shift--horizontal {\r\n\tgrid-auto-rows: 1fr;\r\n\tgrid-auto-flow: row;\r\n}\r\n\r\n.shift--vertical {\r\n\tgrid-auto-columns: 1fr;\r\n\tgrid-auto-flow: column;\r\n}\r\n\r\n.shift__layer {\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n\tmargin-top: -0.5px;\r\n}\r\n\r\n.shift--rotated .shift__layer {\r\n transform: rotate(4deg) scale(1.1);\r\n width: 120%;\r\n left: -10%;\r\n}\r\n\r\n.shift__layer-inner {\r\n\theight: 100%;\r\n\tbackground: var(--color-bg-shift);\r\n\ttransform: translate3d(0, 101%, 0);\r\n}\r\n\r\n.shift--vertical .shift__layer-inner { \r\n\ttransform: translate3d(101%, 0, 0);\r\n}\r\n\r\n.blend {\r\n\tmix-blend-mode: exclusion;\r\n}\r\n\r\n.intro {\r\n\tposition: relative;\r\n\tdisplay: grid;\r\n\tgrid-template-areas:\r\n\t\t'intro-images intro-menu'\r\n\t\t'intro-title intro-title';\r\n\tgrid-template-columns: 1fr auto;\r\n\tgrid-template-rows: auto auto;\r\n\tpadding: 0 var(--page-padding) var(--page-padding);\r\n\tgrid-gap: 5vh;\r\n\theight: 100vh;\r\n}\r\n\r\n.intro__title {\r\n\tgrid-area: intro-title;\r\n\ttext-transform: uppercase;\r\n\talign-self: end;\r\n}\r\n\r\n.intro__title-links {\r\n\tfont-size: 0.65rem;\r\n\tmargin-left: 0.25rem;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n}\r\n\r\n.demos {\r\n\twidth: 100%;\r\n}\r\n\r\n.current {\r\n\tcolor: var(--color-text);\r\n}\r\n\r\n.intro__title-links a {\r\n\tmargin-right: 0.5rem;\r\n}\r\n\r\n.intro__title-main {\r\n\tfont-size: 13vw;\r\n\tfont-family: ivypresto-display, serif;\r\n\tfont-weight: 400;\r\n\tmargin: 0;\r\n\tline-height: 0.9;\r\n\tpointer-events: none;\r\n}\r\n\r\n.intro__title-sub {\r\n\tfont-size: 4vw;\r\n\tfont-size: clamp(1rem, 4vw, 1.35rem);\r\n\tfont-weight: 300;\r\n\tmargin: 0.5rem 0 0 0;\r\n\tline-height: 1;\r\n}\r\n\r\n.intro__gallery {\r\n\tgrid-area: intro-images;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: repeat(3, 1fr);\r\n\tgrid-gap: 1rem;\r\n}\r\n\r\n.intro__gallery-item {\r\n\twidth: 100%;\r\n\tdisplay: block;\r\n\tbackground-size: cover;\r\n\tborder-radius: 13vw;\r\n\tmargin-top: 1rem;\r\n\tbackground-position: 50% 50%;\r\n}\r\n\r\n.intro__gallery-item--top {\r\n\tborder-radius: 0 0 13vw 13vw;\r\n\tmargin: 0 0 50%;\r\n}\r\n\r\n.intro__menu-button {\r\n\talign-self: start;\r\n\tjustify-self: end;\r\n\tborder: 0;\r\n\tmargin-top: 1rem;\r\n\tbackground: none;\r\n\tcursor: not-allowed;\r\n\twidth: 60px;\r\n\theight: 60px;\r\n}\r\n\r\n.lines {\r\n\tstroke-width: 4px;\r\n}\r\n\r\n.present {\r\n\tposition: relative;\r\n\tpadding: 0 var(--page-padding) 10vh;\r\n}\r\n\r\n.present__text--large {\r\n\tgrid-area: present-large;\r\n\tmax-width: 95%;\r\n\t-webkit-hyphens: auto;\r\n\thyphens: auto;\r\n\tfont-size: 5.5vw;\r\n\tfont-size: clamp(1rem, 5.25vw, 10rem);\r\n\tline-height: 1;\r\n\tfont-weight: 300;\r\n}\r\n\r\n.present__text--small {\r\n\tgrid-area: present-small;\r\n\tfont-size: 1.25rem;\r\n\tfont-size: clamp(1rem, 2vw, 1.25rem);\r\n\tline-height: 1.3;\r\n\tfont-weight: 300;\r\n}\r\n\r\n.present__text--small p {\r\n\tmargin-bottom: 10vh;\r\n}\r\n\r\n.present__visual {\r\n\tgrid-area: present-visual;\r\n\tborder-radius: 20vw;\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n\theight: 105vh;\r\n\twidth: 70%;\r\n\tmax-width: 70vh;\r\n\talign-self: center;\r\n\tjustify-self: center;\r\n\tposition: relative;\r\n}\r\n\r\n.projects {\r\n\tposition: relative;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 35% 15% 1fr;\r\n\tgrid-template-areas: '... ... project-latest'\r\n\t\t'project-img-left ... project-title'\r\n\t\t'project-img-left project-img-right project-img-right'\r\n\t\t'project-more project-more project-more';\r\n}\r\n\r\n.project__latest {\r\n\tgrid-area: project-latest;\r\n\ttext-transform: uppercase;\r\n\tfont-weight: 300;\r\n\ttext-align: center;\r\n\tposition: relative;\r\n\tpadding-bottom: 20vh;\r\n\tmargin-left: 5vw;\r\n\twidth: 20vw;\r\n\tz-index: 0;\r\n}\r\n\r\n.project__latest::after {\r\n\tcontent: '';\r\n\tposition: absolute;\r\n\twidth: 44vw;\r\n\theight: 44vw;\r\n\tborder: 1px solid #fff;\r\n\tborder-radius: 50%;\r\n\tleft: 50%;\r\n\ttop: -25%;\r\n\tmargin-left: -22vw;\r\n}\r\n\r\n.projects__img {\r\n\tposition: relative;\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n}\r\n\r\n.projects__title {\r\n\tgrid-area: project-title;\r\n\ttext-align: right;\r\n\tpadding-right: var(--page-padding);\r\n\tfont-family: ivypresto-display, serif;\r\n\tfont-weight: 400;\r\n\ttext-transform: uppercase;\r\n}\r\n\r\n.projects__title-main {\r\n\tfont-size: 10vw;\r\n\tfont-size: clamp(2rem, 10vw, 9rem);\r\n\tdisplay: block;\r\n\tline-height: 0.9;\r\n}\r\n\r\n.projects__title-sub {\r\n\tfont-size: 4vw;\r\n\tfont-size: clamp(1.5rem, 4vw, 3rem);\r\n\tfont-style: italic;\r\n\tline-height: 1;\r\n\tmargin-right: 0.5vw;\r\n}\r\n\r\n.projects__img--left {\r\n\tgrid-area: project-img-left;\r\n\tgrid-column-end: 3;\r\n\tborder-radius: 0 30vh 30vh 0;\r\n\theight: 60vh;\r\n}\r\n\r\n.projects__img--right {\r\n\tgrid-area: project-img-right;\r\n\tborder-radius: 40vh 0 0 40vh;\r\n\theight: 80vh;\r\n}\r\n\r\n.projects__more {\r\n\tgrid-area: project-more;\r\n\tjustify-self: center;\r\n\ttext-decoration: underline;\r\n\tfont-size: 1.5rem;\r\n\tfont-size: clamp(1rem, 3vw, 1.5rem);\r\n\tmargin: 15vh 0 35vh;\r\n\tfont-weight: 300;\r\n}\r\n\r\n.type {\r\n\tpadding: 30vh var(--page-padding);\r\n\tcounter-reset: type-link;\r\n}\r\n\r\n.type__link {\r\n\tfont-size: 5vw;\r\n\tfont-size: clamp(2rem, 5vw, 6rem);\r\n\tfont-weight: 300;\r\n\tcolor: #fff;\r\n\tmargin: 0 1rem 0 0;\r\n\tposition: relative;\r\n\twhite-space: nowrap;\r\n\tdisplay: block;\r\n}\r\n\r\n.type__link:hover,\r\n.type__link:focus {\r\n\tcolor: #fff;\r\n}\r\n\r\n.type__link:nth-child(even) {\r\n\tfont-family: ivypresto-display, serif;\r\n\tfont-style: italic;\r\n}\r\n\r\n.type__link::before {\r\n\tcounter-increment: type-link;\r\n\tcontent: counter(type-link);\r\n\tfont-family: brother-1816, sans-serif;\r\n\tfont-size: 1.15rem;\r\n\tfont-style: normal;\r\n\tdisplay: inline-block;\r\n\tmargin-right: 0.5rem;\r\n\tvertical-align: 110%;\r\n}\r\n\r\n.footer {\r\n\tmin-height: 400px;\r\n\tpadding: 0 var(--page-padding);\r\n}\r\n\r\n.footer__links {\r\n\tgrid-area: footer-list;\r\n\tlist-style: none;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tfont-size: 1.25rem;\r\n\tfont-weight: 300;\r\n}\r\n\r\n.footer__links a {\r\n\tfilter: invert(1);\r\n}\r\n\r\n.footer__links a:hover,\r\n.footer__links a:focus {\r\n\tfilter: none;\r\n}\r\n\r\n.footer__img {\r\n\tgrid-area: footer-img;\r\n\tmax-width: 300px;\r\n\tmax-height: 400px;\r\n\theight: 80vh;\r\n\twidth: 40vh;\r\n\tbackground-size: cover;\r\n\tbackground-position: 50% 50%;\r\n\talign-self: end;\r\n\tjustify-self: center;\r\n\tborder-radius: 20vh 20vh 0 0;\r\n}\r\n\r\n.footer__author {\r\n\tgrid-area: footer-author;\r\n\tmargin: 0;\r\n\talign-self: end;\r\n\tpadding: 1rem 0;\r\n\tfont-family: ivypresto-display, serif;\r\n\tfont-weight: 400;\r\n\tfont-size: 5vw;\r\n\tfont-size: clamp(2rem, 4vw, 5rem);\r\n}\r\n\r\n.footer__year {\r\n\tgrid-area: footer-year;\r\n\talign-self: end;\r\n\tpadding-bottom: 1rem;\r\n\tfont-size: 1.25rem;\r\n\tfont-size: clamp(1rem, 2vw, 1.25rem);\r\n\tfont-weight: 300;\r\n}\r\n\r\n@media screen and (min-width: 53em) {\r\n\tbody {\r\n\t\t--page-padding: 1.5rem;\r\n\t}\r\n\r\n\t.lines {\r\n\t\tstroke-width: 2px;\r\n\t}\r\n\r\n\t.intro__menu-button {\r\n\t\twidth: 105px;\r\n\t\theight: 105px;\r\n\t}\r\n\r\n\t.intro {\r\n\t\tgrid-template-areas: \r\n\t\t'intro-images intro-menu'\r\n\t\t'intro-images intro-ad'\r\n\t\t'intro-title ...';\r\n\t\tgrid-template-columns: 67% 1fr;\r\n\t\tgrid-template-rows: 1fr 1fr auto;\r\n\t}\r\n\r\n\t.intro__title {\r\n\t\twhite-space: nowrap;\r\n\t}\r\n\r\n\t.demos {\r\n\t\tposition: relative;\r\n\t\twidth: auto;\r\n\t}\r\n\r\n\t.demos::before {\r\n\t\tcontent: '';\r\n\t\twidth: 3rem;\r\n\t\tborder-bottom: 1px solid;\r\n\t\tdisplay: inline-block;\r\n\t\tvertical-align: middle;\r\n\t\tmargin: 0 0.5rem;\r\n\t}\r\n\r\n\t.present {\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-areas: 'present-large present-large''present-small present-visual';\r\n\t\tgrid-template-columns: 40% 1fr;\r\n\t}\r\n\r\n\t.type__link {\r\n\t\tdisplay: inline-block;\r\n\t}\r\n\r\n\t.footer {\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-areas: 'footer-list footer-img ...''footer-author footer-img footer-year';\r\n\t\tgrid-template-columns: auto 1fr auto;\r\n\t\talign-content: space-between;\r\n\t}\r\n\r\n\t.footer__links {\r\n\t\tcolumn-count: 2;\r\n\t}\r\n}\r\n\r\n/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */\r\nhtml.has-scroll-smooth {\r\n\toverflow: hidden;\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n\r\nhtml.has-scroll-dragging {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n.has-scroll-smooth body {\r\n\toverflow: hidden;\r\n}\r\n\r\n.has-scroll-smooth [data-scroll-container] {\r\n\tmin-height: 100vh;\r\n}\r\n\r\n[data-scroll-direction=\"horizontal\"] [data-scroll-container] {\r\n\theight: 100vh;\r\n\tdisplay: inline-block;\r\n\twhite-space: nowrap;\r\n}\r\n\r\n[data-scroll-direction=\"horizontal\"] [data-scroll-section] {\r\n\tdisplay: inline-block;\r\n\tvertical-align: top;\r\n\twhite-space: nowrap;\r\n\theight: 100%;\r\n}\r\n\r\n.c-scrollbar {\r\n\tposition: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\twidth: 11px;\r\n\theight: 100%;\r\n\ttransform-origin: center right;\r\n\ttransition: transform 0.3s, opacity 0.3s;\r\n\topacity: 0;\r\n}\r\n\r\n.c-scrollbar:hover {\r\n\ttransform: scaleX(1.45);\r\n}\r\n\r\n.c-scrollbar:hover,\r\n.has-scroll-scrolling .c-scrollbar,\r\n.has-scroll-dragging .c-scrollbar {\r\n\topacity: 1;\r\n}\r\n\r\n[data-scroll-direction=\"horizontal\"] .c-scrollbar {\r\n\twidth: 100%;\r\n\theight: 10px;\r\n\ttop: auto;\r\n\tbottom: 0;\r\n\ttransform: scaleY(1);\r\n}\r\n\r\n[data-scroll-direction=\"horizontal\"] .c-scrollbar:hover {\r\n\ttransform: scaleY(1.3);\r\n}\r\n\r\n.c-scrollbar_thumb {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tbackground-color: black;\r\n\topacity: 0.5;\r\n\twidth: 7px;\r\n\tborder-radius: 10px;\r\n\tmargin: 2px;\r\n\tcursor: -webkit-grab;\r\n\tcursor: grab;\r\n}\r\n\r\n.has-scroll-dragging .c-scrollbar_thumb {\r\n\tcursor: -webkit-grabbing;\r\n\tcursor: grabbing;\r\n}\r\n\r\n[data-scroll-direction=\"horizontal\"] .c-scrollbar_thumb {\r\n\tright: auto;\r\n\tbottom: 0;\r\n}"],"names":[],"version":3,"file":"index.d046a61c.css.map","sourceRoot":"/__parcel_source_root/"} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Previous demo 38 | Article 39 | GitHub 40 |
41 |
42 | Demo 1 43 | Demo 2 44 | Demo 3 45 |
46 |
47 |

Mia Farkas

48 |

Designer & Visual Story Teller

49 |
50 |
51 |
52 |
53 |
54 |
55 | 61 |
62 |
63 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

64 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

65 |
66 |
67 |
Latest
68 |

69 | Phœbus 70 | Hearken 71 |

72 |
73 |
74 | See all projects 75 |
76 |
77 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

78 |
79 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

80 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

81 |
82 |
83 |
84 |
85 | Astrø 86 | Butterflies 87 | Hot Stuff 88 | Mr. Chekhov 89 | Modern Man 90 | Vedic Pi 91 | Search of Soul 92 | Nidanakatha 93 | Sankhya Dub 94 | Good Heart 95 | Good Mind 96 | The Skanda Purana 97 | Mio 98 | Mèahuasca 99 | Dhammapada 100 | Eternal 101 |
102 |
103 | 113 |

Mia Farkas

114 |
2022
115 |
116 |
117 |
118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Previous demo 42 | Article 43 | GitHub 44 |
45 |
46 | Demo 1 47 | Demo 2 48 | Demo 3 49 |
50 |
51 |

Mia Farkas

52 |

Designer & Visual Story Teller

53 |
54 |
55 |
56 |
57 |
58 |
59 | 65 |
66 |
67 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

68 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

69 |
70 |
71 |
Latest
72 |

73 | Phœbus 74 | Hearken 75 |

76 |
77 |
78 | See all projects 79 |
80 |
81 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

82 |
83 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

84 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

85 |
86 |
87 |
88 |
89 | Astrø 90 | Butterflies 91 | Hot Stuff 92 | Mr. Chekhov 93 | Modern Man 94 | Vedic Pi 95 | Search of Soul 96 | Nidanakatha 97 | Sankhya Dub 98 | Good Heart 99 | Good Mind 100 | The Skanda Purana 101 | Mio 102 | Mèahuasca 103 | Dhammapada 104 | Eternal 105 |
106 |
107 | 117 |

Mia Farkas

118 |
2022
119 |
120 |
121 |
122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /dist/index3.b5e7c14d.js: -------------------------------------------------------------------------------- 1 | !function(){var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},n=t.parcelRequire349f;null==n&&((n=function(t){if(t in e)return e[t].exports;if(t in i){var n=i[t];delete i[t];var s={id:t,exports:{}};return e[t]=s,n.call(s.exports,s,s.exports),s.exports}var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(t,e){i[t]=e},t.parcelRequire349f=n),n.register("hobco",(function(t,e){!function(e,i){"function"==typeof define&&define.amd?define(i):t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){"use strict";function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],s=0;s=l?l:o;var o,r,l},r=function(t){return null!=t&&"object"==typeof t},l=function(t,e){var i=Object.keys(t),n=Object.keys(e);if(i.length!==n.length)return!1;var s=!0,o=!1,a=void 0;try{for(var c,h=i[Symbol.iterator]();!(s=(c=h.next()).done);s=!0){var d=c.value,u=t[d],f=e[d],p=r(u)&&r(f);if(p&&!l(u,f)||!p&&u!==f)return!1}}catch(t){o=!0,a=t}finally{try{s||null==h.return||h.return()}finally{if(o)throw a}}return!0};function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var i=0;it.length)&&(e=t.length);for(var i=0,n=new Array(e);i0&&void 0!==arguments[0]?arguments[0]:{};a(this,t),Object.assign(this,T,e),this.smartphone=T.smartphone,e.smartphone&&Object.assign(this.smartphone,e.smartphone),this.tablet=T.tablet,e.tablet&&Object.assign(this.tablet,e.tablet),this.namespace="locomotive",this.html=document.documentElement,this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.els={},this.currentElements={},this.listeners={},this.hasScrollTicking=!1,this.hasCallEventSet=!1,this.checkScroll=this.checkScroll.bind(this),this.checkResize=this.checkResize.bind(this),this.checkEvent=this.checkEvent.bind(this),this.instance={scroll:{x:0,y:0},limit:{x:this.html.offsetWidth,y:this.html.offsetHeight},currentElements:this.currentElements},this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",this.isMobile&&(this.direction=this[this.context].direction),"horizontal"===this.direction?this.directionAxis="x":this.directionAxis="y",this.getDirection&&(this.instance.direction=null),this.getDirection&&(this.instance.speed=0),this.html.classList.add(this.initClass),window.addEventListener("resize",this.checkResize,!1)}return h(t,[{key:"init",value:function(){this.initEvents()}},{key:"checkScroll",value:function(){this.dispatchScroll()}},{key:"checkResize",value:function(){var t=this;this.resizeTick||(this.resizeTick=!0,requestAnimationFrame((function(){t.resize(),t.resizeTick=!1})))}},{key:"resize",value:function(){}},{key:"checkContext",value:function(){if(this.reloadOnContextChange){this.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||this.windowWidth=this.tablet.breakpoint;var t=this.context;if(this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",t!=this.context)("desktop"==t?this.smooth:this[t].smooth)!=("desktop"==this.context?this.smooth:this[this.context].smooth)&&window.location.reload()}}},{key:"initEvents",value:function(){var t=this;this.scrollToEls=this.el.querySelectorAll("[data-".concat(this.name,"-to]")),this.setScrollTo=this.setScrollTo.bind(this),this.scrollToEls.forEach((function(e){e.addEventListener("click",t.setScrollTo,!1)}))}},{key:"setScrollTo",value:function(t){t.preventDefault(),this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name,"-href"))||t.currentTarget.getAttribute("href"),{offset:t.currentTarget.getAttribute("data-".concat(this.name,"-offset"))})}},{key:"addElements",value:function(){}},{key:"detectElements",value:function(t){var e=this,i=this.instance.scroll.y,n=i+this.windowHeight,s=this.instance.scroll.x,o=s+this.windowWidth;Object.entries(this.els).forEach((function(r){var l=x(r,2),a=l[0],c=l[1];if(!c||c.inView&&!t||("horizontal"===e.direction?o>=c.left&&s=c.top&&ic.right)&&e.setOutOfView(c,a)}else{var d=c.bottom-c.top;c.progress=(e.instance.scroll.y-(c.top-e.windowHeight))/(d+e.windowHeight),(nc.bottom)&&e.setOutOfView(c,a)}})),this.hasScrollTicking=!1}},{key:"setInView",value:function(t,e){this.els[e].inView=!0,t.el.classList.add(t.class),this.currentElements[e]=t,t.call&&this.hasCallEventSet&&(this.dispatchCall(t,"enter"),t.repeat||(this.els[e].call=!1))}},{key:"setOutOfView",value:function(t,e){var i=this;this.els[e].inView=!1,Object.keys(this.currentElements).forEach((function(t){t===e&&delete i.currentElements[t]})),t.call&&this.hasCallEventSet&&this.dispatchCall(t,"exit"),t.repeat&&t.el.classList.remove(t.class)}},{key:"dispatchCall",value:function(t,e){this.callWay=e,this.callValue=t.call.split(",").map((function(t){return t.trim()})),this.callObj=t,1==this.callValue.length&&(this.callValue=this.callValue[0]);var i=new Event(this.namespace+"call");this.el.dispatchEvent(i)}},{key:"dispatchScroll",value:function(){var t=new Event(this.namespace+"scroll");this.el.dispatchEvent(t)}},{key:"setEvents",value:function(t,e){this.listeners[t]||(this.listeners[t]=[]);var i=this.listeners[t];i.push(e),1===i.length&&this.el.addEventListener(this.namespace+t,this.checkEvent,!1),"call"===t&&(this.hasCallEventSet=!0,this.detectElements(!0))}},{key:"unsetEvents",value:function(t,e){if(this.listeners[t]){var i=this.listeners[t],n=i.indexOf(e);n<0||(i.splice(n,1),0===i.index&&this.el.removeEventListener(this.namespace+t,this.checkEvent,!1))}}},{key:"checkEvent",value:function(t){var e=this,i=t.type.replace(this.namespace,""),n=this.listeners[i];n&&0!==n.length&&n.forEach((function(t){switch(i){case"scroll":return t(e.instance);case"call":return t(e.callValue,e.callWay,e.callObj);default:return t()}}))}},{key:"startScroll",value:function(){}},{key:"stopScroll",value:function(){}},{key:"setScroll",value:function(t,e){this.instance.scroll={x:0,y:0}}},{key:"destroy",value:function(){var t=this;window.removeEventListener("resize",this.checkResize,!1),Object.keys(this.listeners).forEach((function(e){t.el.removeEventListener(t.namespace+e,t.checkEvent,!1)})),this.listeners={},this.scrollToEls.forEach((function(e){e.removeEventListener("click",t.setScrollTo,!1)})),this.html.classList.remove(this.initClass)}}]),t}(),O="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{};function L(t,e){return t(e={exports:{}},e.exports),e.exports}var D=L((function(t,e){t.exports={polyfill:function(){var t=window,e=document;if(!("scrollBehavior"in e.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var i,n=t.HTMLElement||t.Element,s={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:n.prototype.scroll||l,scrollIntoView:n.prototype.scrollIntoView},o=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,r=(i=t.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(i)?1:0);t.scroll=t.scrollTo=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?p.call(t,e.body,void 0!==arguments[0].left?~~arguments[0].left:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:t.scrollY||t.pageYOffset):s.scroll.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:t.scrollY||t.pageYOffset))},t.scrollBy=function(){void 0!==arguments[0]&&(a(arguments[0])?s.scrollBy.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):p.call(t,e.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},n.prototype.scroll=n.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,e=arguments[0].top;p.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===e?this.scrollTop:~~e)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},n.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):s.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},n.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var i=u(this),n=i.getBoundingClientRect(),o=this.getBoundingClientRect();i!==e.body?(p.call(this,i,i.scrollLeft+o.left-n.left,i.scrollTop+o.top-n.top),"fixed"!==t.getComputedStyle(i).position&&t.scrollBy({left:n.left,top:n.top,behavior:"smooth"})):t.scrollBy({left:o.left,top:o.top,behavior:"smooth"})}else s.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function l(t,e){this.scrollLeft=t,this.scrollTop=e}function a(t){if(null===t||"object"!=typeof t||void 0===t.behavior||"auto"===t.behavior||"instant"===t.behavior)return!0;if("object"==typeof t&&"smooth"===t.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+t.behavior+" is not a valid value for enumeration ScrollBehavior.")}function c(t,e){return"Y"===e?t.clientHeight+r1?1:l,i=.5*(1-Math.cos(Math.PI*r)),n=e.startX+(e.x-e.startX)*i,s=e.startY+(e.y-e.startY)*i,e.method.call(e.scrollable,n,s),n===e.x&&s===e.y||t.requestAnimationFrame(f.bind(t,e))}function p(i,n,r){var a,c,h,d,u=o();i===e.body?(a=t,c=t.scrollX||t.pageXOffset,h=t.scrollY||t.pageYOffset,d=s.scroll):(a=i,c=i.scrollLeft,h=i.scrollTop,d=l),f({scrollable:a,method:d,startTime:u,startX:c,startY:h,x:n,y:r})}}}})),j=(D.polyfill,function(t){p(i,t);var e=b(i);function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a(this,i),(t=e.call(this,n)).resetNativeScroll&&(history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0)),window.addEventListener("scroll",t.checkScroll,!1),void 0===window.smoothscrollPolyfill&&(window.smoothscrollPolyfill=D,window.smoothscrollPolyfill.polyfill()),t}return h(i,[{key:"init",value:function(){this.instance.scroll.y=window.pageYOffset,this.addElements(),this.detectElements(),w(m(i.prototype),"init",this).call(this)}},{key:"checkScroll",value:function(){var t=this;w(m(i.prototype),"checkScroll",this).call(this),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.instance.scroll.y=window.pageYOffset,Object.entries(this.els).length&&(this.hasScrollTicking||(requestAnimationFrame((function(){t.detectElements()})),this.hasScrollTicking=!0))}},{key:"addDirection",value:function(){window.pageYOffset>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):window.pageYOffset1&&void 0!==arguments[1]?arguments[1]:{},i=parseInt(e.offset)||0,n=!!e.callback&&e.callback;if("string"==typeof t){if("top"===t)t=this.html;else if("bottom"===t)t=this.html.offsetHeight-window.innerHeight;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");i="number"!=typeof t?t.getBoundingClientRect().top+i+this.instance.scroll.y:t+i;var s=function(){return parseInt(window.pageYOffset)===parseInt(i)};if(n){if(s())return void n();var o=function t(){s()&&(window.removeEventListener("scroll",t),n())};window.addEventListener("scroll",o)}window.scrollTo({top:i,behavior:0===e.duration?"auto":"smooth"})}},{key:"update",value:function(){this.addElements(),this.detectElements()}},{key:"destroy",value:function(){w(m(i.prototype),"destroy",this).call(this),window.removeEventListener("scroll",this.checkScroll,!1)}}]),i}(A)),C=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;function B(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var I=function(){try{if(!Object.assign)return!1;if("5"===Object.getOwnPropertyNames("abc")[0])return!1;for(var t={},e=0;e<10;e++)t["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach((function(t){i[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},i)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var i,n,s=B(t),o=1;o=e;1<=e?t++:t--)i.push(null);return i}.call(this),this.lastDownDeltas=function(){var t,e,i;for(i=[],t=1,e=2*this.stability;1<=e?t<=e:t>=e;1<=e?t++:t--)i.push(null);return i}.call(this),this.deltasTimestamp=function(){var t,e,i;for(i=[],t=1,e=2*this.stability;1<=e?t<=e:t>=e;1<=e?t++:t--)i.push(null);return i}.call(this)}return t.prototype.check=function(t){var e;return null!=(t=t.originalEvent||t).wheelDelta?e=t.wheelDelta:null!=t.deltaY?e=-40*t.deltaY:null==t.detail&&0!==t.detail||(e=-40*t.detail),this.deltasTimestamp.push(Date.now()),this.deltasTimestamp.shift(),e>0?(this.lastUpDeltas.push(e),this.lastUpDeltas.shift(),this.isInertia(1)):(this.lastDownDeltas.push(e),this.lastDownDeltas.shift(),this.isInertia(-1))},t.prototype.isInertia=function(t){var e,i,n,s,o,r,l;return null===(e=-1===t?this.lastDownDeltas:this.lastUpDeltas)[0]?t:!(this.deltasTimestamp[2*this.stability-2]+this.delay>Date.now()&&e[0]===e[2*this.stability-1])&&(n=e.slice(0,this.stability),i=e.slice(this.stability,2*this.stability),l=n.reduce((function(t,e){return t+e})),o=i.reduce((function(t,e){return t+e})),r=l/n.length,s=o/i.length,Math.abs(r)1,hasPointer:!!window.navigator.msPointerEnabled,hasKeyDown:"onkeydown"in document,isFirefox:navigator.userAgent.indexOf("Firefox")>-1},Y=Object.prototype.toString,z=Object.prototype.hasOwnProperty;function X(t,e){return function(){return t.apply(e,arguments)}}var q=H.Lethargy,V="virtualscroll",F=J,K=37,N=38,U=39,Q=40,$=32;function J(t){!function(t){if(!t)return console.warn("bindAll requires at least one argument.");var e=Array.prototype.slice.call(arguments,1);if(0===e.length)for(var i in t)z.call(t,i)&&"function"==typeof t[i]&&"[object Function]"==Y.call(t[i])&&e.push(i);for(var n=0;n=.001?function(t,e,i,n){for(var s=0;s<4;++s){var o=lt(e,i,n);if(0===o)return e;e-=(rt(e,i,n)-t)/o}return e}(e,r,t,i):0===l?r:function(t,e,i,n,s){var o,r,l=0;do{(o=rt(r=e+(i-e)/2,n,s)-t)>0?i=r:e=r}while(Math.abs(o)>1e-7&&++l<10);return r}(e,n,n+et,t,i)}return function(t){return 0===t?0:1===t?1:rt(r(t),e,n)}},ht=38,dt=40,ut=32,ft=9,pt=33,mt=34,vt=36,yt=35,gt=function(t){p(i,t);var e=b(i);function i(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a(this,i),history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0),(t=e.call(this,n)).inertia&&(t.lerp=.1*t.inertia),t.isScrolling=!1,t.isDraggingScrollbar=!1,t.isTicking=!1,t.hasScrollTicking=!1,t.parallaxElements={},t.stop=!1,t.scrollbarContainer=n.scrollbarContainer,t.checkKey=t.checkKey.bind(y(t)),window.addEventListener("keydown",t.checkKey,!1),t}return h(i,[{key:"init",value:function(){var t=this;this.html.classList.add(this.smoothClass),this.html.setAttribute("data-".concat(this.name,"-direction"),this.direction),this.instance=f({delta:{x:this.initPosition.x,y:this.initPosition.y},scroll:{x:this.initPosition.x,y:this.initPosition.y}},this.instance),this.vs=new F({el:this.scrollFromAnywhere?document:this.el,mouseMultiplier:navigator.platform.indexOf("Win")>-1?1:.4,firefoxMultiplier:this.firefoxMultiplier,touchMultiplier:this.touchMultiplier,useKeyboard:!1,passive:!0}),this.vs.on((function(e){t.stop||t.isDraggingScrollbar||requestAnimationFrame((function(){t.updateDelta(e),t.isScrolling||t.startScrolling()}))})),this.setScrollLimit(),this.initScrollBar(),this.addSections(),this.addElements(),this.checkScroll(!0),this.transformElements(!0,!0),w(m(i.prototype),"init",this).call(this)}},{key:"setScrollLimit",value:function(){if(this.instance.limit.y=this.el.offsetHeight-this.windowHeight,"horizontal"===this.direction){for(var t=0,e=this.el.children,i=0;ithis.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis]),this.stopScrolling(),this.isScrolling=!0,this.checkScroll(),this.html.classList.add(this.scrollingClass)}}},{key:"checkScroll",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e||this.isScrolling||this.isDraggingScrollbar){this.hasScrollTicking||(this.checkScrollRaf=requestAnimationFrame((function(){return t.checkScroll()})),this.hasScrollTicking=!0),this.updateScroll();var n=Math.abs(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis]),s=Date.now()-this.startScrollTs;if(!this.animatingScroll&&s>100&&(n<.5&&0!=this.instance.delta[this.directionAxis]||n<.5&&0==this.instance.delta[this.directionAxis])&&this.stopScrolling(),Object.entries(this.sections).forEach((function(i){var n=x(i,2),s=(n[0],n[1]);s.persistent||t.instance.scroll[t.directionAxis]>s.offset[t.directionAxis]&&t.instance.scroll[t.directionAxis]this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis])}},{key:"updateScroll",value:function(t){this.isScrolling||this.isDraggingScrollbar?this.instance.scroll[this.directionAxis]=G(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis],this.lerp):this.instance.scroll[this.directionAxis]>this.instance.limit[this.directionAxis]?this.setScroll(this.instance.scroll[this.directionAxis],this.instance.limit[this.directionAxis]):this.instance.scroll.y<0?this.setScroll(this.instance.scroll[this.directionAxis],0):this.setScroll(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis])}},{key:"addDirection",value:function(){this.instance.delta.y>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):this.instance.delta.ythis.instance.scroll.x?"right"!==this.instance.direction&&(this.instance.direction="right"):this.instance.delta.x0&&n0&&i1&&void 0!==arguments[1]&&arguments[1],n=this.instance.scroll.x+this.windowWidth,s=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=x(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(s-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;case"elementLeft":c=(n-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.xa.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.ya.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=parseInt(i.offset)||0,s=isNaN(parseInt(i.duration))?1e3:parseInt(i.duration),o=i.easing||[.25,0,.35,1],r=!!i.disableLerp,l=!!i.callback&&i.callback;if(o=ct.apply(void 0,k(o)),"string"==typeof t){if("top"===t)t=0;else if("bottom"===t)t=this.instance.limit.y;else if("left"===t)t=0;else if("right"===t)t=this.instance.limit.x;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");if("number"!=typeof t){var a=tt(t).includes(this.el);if(!a)return;var c=t.getBoundingClientRect(),h=c.top,d=c.left,u=tt(t),f=u.find((function(t){return Object.entries(e.sections).map((function(t){var e=x(t,2);e[0];return e[1]})).find((function(e){return e.el==t}))})),p=0;p=f?Z(f)[this.directionAxis]:-this.instance.scroll[this.directionAxis],n="horizontal"===this.direction?d+n-p:h+n-p}else n=t+n;var m=parseFloat(this.instance.delta[this.directionAxis]),v=Math.max(0,Math.min(n,this.instance.limit[this.directionAxis])),y=v-m,g=function(t){r?"horizontal"===e.direction?e.setScroll(m+y*t,e.instance.delta.y):e.setScroll(e.instance.delta.x,m+y*t):e.instance.delta[e.directionAxis]=m+y*t};this.animatingScroll=!0,this.stopScrolling(),this.startScrolling();var b=Date.now(),w=function t(){var i=(Date.now()-b)/s;i>1?(g(1),e.animatingScroll=!1,0==s&&e.update(),l&&l()):(e.scrollToRaf=requestAnimationFrame(t),g(o(i)))};w()}},{key:"update",value:function(){this.setScrollLimit(),this.addSections(),this.addElements(),this.detectElements(),this.updateScroll(),this.transformElements(!0),this.reinitScrollBar(),this.checkScroll(!0)}},{key:"startScroll",value:function(){this.stop=!1}},{key:"stopScroll",value:function(){this.stop=!0}},{key:"setScroll",value:function(t,e){this.instance=f(f({},this.instance),{},{scroll:{x:t,y:e},delta:{x:t,y:e},speed:0})}},{key:"destroy",value:function(){w(m(i.prototype),"destroy",this).call(this),this.stopScrolling(),this.html.classList.remove(this.smoothClass),this.vs.destroy(),this.destroyScrollBar(),window.removeEventListener("keydown",this.checkKey,!1)}}]),i}(A),bt=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,t),this.options=e,Object.assign(this,T,e),this.smartphone=T.smartphone,e.smartphone&&Object.assign(this.smartphone,e.smartphone),this.tablet=T.tablet,e.tablet&&Object.assign(this.tablet,e.tablet),this.smooth||"horizontal"!=this.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"),this.tablet.smooth||"horizontal"!=this.tablet.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"),this.smartphone.smooth||"horizontal"!=this.smartphone.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"),this.init()}return h(t,[{key:"init",value:function(){if(this.options.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||window.innerWidth=this.tablet.breakpoint,this.smooth&&!this.options.isMobile||this.tablet.smooth&&this.options.isTablet||this.smartphone.smooth&&this.options.isMobile&&!this.options.isTablet?this.scroll=new gt(this.options):this.scroll=new j(this.options),this.scroll.init(),window.location.hash){var t=window.location.hash.slice(1,window.location.hash.length),e=document.getElementById(t);e&&this.scroll.scrollTo(e)}}},{key:"update",value:function(){this.scroll.update()}},{key:"start",value:function(){this.scroll.startScroll()}},{key:"stop",value:function(){this.scroll.stopScroll()}},{key:"scrollTo",value:function(t,e){this.scroll.scrollTo(t,e)}},{key:"setScroll",value:function(t,e){this.scroll.setScroll(t,e)}},{key:"on",value:function(t,e){this.scroll.setEvents(t,e)}},{key:"off",value:function(t,e){this.scroll.unsetEvents(t,e)}},{key:"destroy",value:function(){this.scroll.destroy()}}]),t}(),wt=bt,xt=0,kt=101,St=document.querySelector(".shift"),Et="h";St.classList.contains("shift--vertical")?Et="v":St.classList.contains("shift--rotated")&&(Et="r");var Tt,At,Ot,Lt=function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e0&&void 0!==arguments[0]?arguments[0]:"img";return new Promise((function(e){s(document.querySelectorAll(t),{background:!0},e)}))})(".projects__img, .footer__img, .intro__gallery-item").then((function(){document.body.classList.remove("loading");var t=new wt({el:document.querySelector("[data-scroll-container]"),smooth:!0,smartphone:{smooth:!0},tablet:{smooth:!0}});Mt(),t.on("scroll",(function(t){jt=t.scroll.y,_t.x="v"!==Et?0:o(jt+At.height-Ot,0,400,-1*kt,xt),_t.y="v"===Et?0:o(jt+At.height-Ot,0,400,"h"===Et?kt:-1*kt,xt),Ct.layersTranslation&&l(_t,Ct.layersTranslation)&&Lt.forEach((function(t){return t.style.transform="translate3d(".concat(_t.x,"%, ").concat(_t.y,"%, 0)")})),Ct.layersTranslation=_t})),window.addEventListener("resize",Mt)}))}(); -------------------------------------------------------------------------------- /dist/index3.e9a2d1b4.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},i={},s=t.parcelRequire349f;null==s&&((s=function(t){if(t in e)return e[t].exports;if(t in i){var s=i[t];delete i[t];var n={id:t,exports:{}};return e[t]=n,s.call(n.exports,n,n.exports),n.exports}var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(t,e){i[t]=e},t.parcelRequire349f=s),s.register("4hJWI",(function(t,e){!function(e,i){"function"==typeof define&&define.amd?define(i):t.exports?t.exports=i():e.EvEmitter=i()}("undefined"!=typeof window?window:t.exports,(function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},s=i[t]=i[t]||[];return-1==s.indexOf(e)&&s.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var s=i.indexOf(e);return-1!=s&&i.splice(s,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var s=this._onceEvents&&this._onceEvents[t],n=0;n{return o=(t-e)*(n-s)/(i-e)+s,r=Math.min(s,n),l=Math.max(s,n),o<=r?r:o>=l?l:o;var o,r,l},r=t=>null!=t&&"object"==typeof t,l=(t,e)=>{const i=Object.keys(t),s=Object.keys(e);if(i.length!==s.length)return!1;for(const s of i){const i=t[s],n=e[s],o=r(i)&&r(n);if(o&&!l(i,n)||!o&&i!==n)return!1}return!0};function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var i=0;it.length)&&(e=t.length);for(var i=0,s=new Array(e);i0&&void 0!==arguments[0]?arguments[0]:{};a(this,t),Object.assign(this,T,e),this.smartphone=T.smartphone,e.smartphone&&Object.assign(this.smartphone,e.smartphone),this.tablet=T.tablet,e.tablet&&Object.assign(this.tablet,e.tablet),this.namespace="locomotive",this.html=document.documentElement,this.windowHeight=window.innerHeight,this.windowWidth=window.innerWidth,this.windowMiddle={x:this.windowWidth/2,y:this.windowHeight/2},this.els={},this.currentElements={},this.listeners={},this.hasScrollTicking=!1,this.hasCallEventSet=!1,this.checkScroll=this.checkScroll.bind(this),this.checkResize=this.checkResize.bind(this),this.checkEvent=this.checkEvent.bind(this),this.instance={scroll:{x:0,y:0},limit:{x:this.html.offsetWidth,y:this.html.offsetHeight},currentElements:this.currentElements},this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",this.isMobile&&(this.direction=this[this.context].direction),"horizontal"===this.direction?this.directionAxis="x":this.directionAxis="y",this.getDirection&&(this.instance.direction=null),this.getDirection&&(this.instance.speed=0),this.html.classList.add(this.initClass),window.addEventListener("resize",this.checkResize,!1)}return h(t,[{key:"init",value:function(){this.initEvents()}},{key:"checkScroll",value:function(){this.dispatchScroll()}},{key:"checkResize",value:function(){var t=this;this.resizeTick||(this.resizeTick=!0,requestAnimationFrame((function(){t.resize(),t.resizeTick=!1})))}},{key:"resize",value:function(){}},{key:"checkContext",value:function(){if(this.reloadOnContextChange){this.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||this.windowWidth=this.tablet.breakpoint;var t=this.context;if(this.isMobile?this.isTablet?this.context="tablet":this.context="smartphone":this.context="desktop",t!=this.context)("desktop"==t?this.smooth:this[t].smooth)!=("desktop"==this.context?this.smooth:this[this.context].smooth)&&window.location.reload()}}},{key:"initEvents",value:function(){var t=this;this.scrollToEls=this.el.querySelectorAll("[data-".concat(this.name,"-to]")),this.setScrollTo=this.setScrollTo.bind(this),this.scrollToEls.forEach((function(e){e.addEventListener("click",t.setScrollTo,!1)}))}},{key:"setScrollTo",value:function(t){t.preventDefault(),this.scrollTo(t.currentTarget.getAttribute("data-".concat(this.name,"-href"))||t.currentTarget.getAttribute("href"),{offset:t.currentTarget.getAttribute("data-".concat(this.name,"-offset"))})}},{key:"addElements",value:function(){}},{key:"detectElements",value:function(t){var e=this,i=this.instance.scroll.y,s=i+this.windowHeight,n=this.instance.scroll.x,o=n+this.windowWidth;Object.entries(this.els).forEach((function(r){var l=x(r,2),a=l[0],c=l[1];if(!c||c.inView&&!t||("horizontal"===e.direction?o>=c.left&&n=c.top&&ic.right)&&e.setOutOfView(c,a)}else{var d=c.bottom-c.top;c.progress=(e.instance.scroll.y-(c.top-e.windowHeight))/(d+e.windowHeight),(sc.bottom)&&e.setOutOfView(c,a)}})),this.hasScrollTicking=!1}},{key:"setInView",value:function(t,e){this.els[e].inView=!0,t.el.classList.add(t.class),this.currentElements[e]=t,t.call&&this.hasCallEventSet&&(this.dispatchCall(t,"enter"),t.repeat||(this.els[e].call=!1))}},{key:"setOutOfView",value:function(t,e){var i=this;this.els[e].inView=!1,Object.keys(this.currentElements).forEach((function(t){t===e&&delete i.currentElements[t]})),t.call&&this.hasCallEventSet&&this.dispatchCall(t,"exit"),t.repeat&&t.el.classList.remove(t.class)}},{key:"dispatchCall",value:function(t,e){this.callWay=e,this.callValue=t.call.split(",").map((function(t){return t.trim()})),this.callObj=t,1==this.callValue.length&&(this.callValue=this.callValue[0]);var i=new Event(this.namespace+"call");this.el.dispatchEvent(i)}},{key:"dispatchScroll",value:function(){var t=new Event(this.namespace+"scroll");this.el.dispatchEvent(t)}},{key:"setEvents",value:function(t,e){this.listeners[t]||(this.listeners[t]=[]);var i=this.listeners[t];i.push(e),1===i.length&&this.el.addEventListener(this.namespace+t,this.checkEvent,!1),"call"===t&&(this.hasCallEventSet=!0,this.detectElements(!0))}},{key:"unsetEvents",value:function(t,e){if(this.listeners[t]){var i=this.listeners[t],s=i.indexOf(e);s<0||(i.splice(s,1),0===i.index&&this.el.removeEventListener(this.namespace+t,this.checkEvent,!1))}}},{key:"checkEvent",value:function(t){var e=this,i=t.type.replace(this.namespace,""),s=this.listeners[i];s&&0!==s.length&&s.forEach((function(t){switch(i){case"scroll":return t(e.instance);case"call":return t(e.callValue,e.callWay,e.callObj);default:return t()}}))}},{key:"startScroll",value:function(){}},{key:"stopScroll",value:function(){}},{key:"setScroll",value:function(t,e){this.instance.scroll={x:0,y:0}}},{key:"destroy",value:function(){var t=this;window.removeEventListener("resize",this.checkResize,!1),Object.keys(this.listeners).forEach((function(e){t.el.removeEventListener(t.namespace+e,t.checkEvent,!1)})),this.listeners={},this.scrollToEls.forEach((function(e){e.removeEventListener("click",t.setScrollTo,!1)})),this.html.classList.remove(this.initClass)}}]),t}(),O="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{};function L(t,e){return t(e={exports:{}},e.exports),e.exports}var D=L((function(t,e){t.exports={polyfill:function(){var t=window,e=document;if(!("scrollBehavior"in e.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var i,s=t.HTMLElement||t.Element,n={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:s.prototype.scroll||l,scrollIntoView:s.prototype.scrollIntoView},o=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,r=(i=t.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(i)?1:0);t.scroll=t.scrollTo=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?p.call(t,e.body,void 0!==arguments[0].left?~~arguments[0].left:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:t.scrollY||t.pageYOffset):n.scroll.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:t.scrollY||t.pageYOffset))},t.scrollBy=function(){void 0!==arguments[0]&&(a(arguments[0])?n.scrollBy.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):p.call(t,e.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},s.prototype.scroll=s.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,e=arguments[0].top;p.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===e?this.scrollTop:~~e)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");n.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},s.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):n.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},s.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var i=u(this),s=i.getBoundingClientRect(),o=this.getBoundingClientRect();i!==e.body?(p.call(this,i,i.scrollLeft+o.left-s.left,i.scrollTop+o.top-s.top),"fixed"!==t.getComputedStyle(i).position&&t.scrollBy({left:s.left,top:s.top,behavior:"smooth"})):t.scrollBy({left:o.left,top:o.top,behavior:"smooth"})}else n.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function l(t,e){this.scrollLeft=t,this.scrollTop=e}function a(t){if(null===t||"object"!=typeof t||void 0===t.behavior||"auto"===t.behavior||"instant"===t.behavior)return!0;if("object"==typeof t&&"smooth"===t.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+t.behavior+" is not a valid value for enumeration ScrollBehavior.")}function c(t,e){return"Y"===e?t.clientHeight+r1?1:l,i=.5*(1-Math.cos(Math.PI*r)),s=e.startX+(e.x-e.startX)*i,n=e.startY+(e.y-e.startY)*i,e.method.call(e.scrollable,s,n),s===e.x&&n===e.y||t.requestAnimationFrame(f.bind(t,e))}function p(i,s,r){var a,c,h,d,u=o();i===e.body?(a=t,c=t.scrollX||t.pageXOffset,h=t.scrollY||t.pageYOffset,d=n.scroll):(a=i,c=i.scrollLeft,h=i.scrollTop,d=l),f({scrollable:a,method:d,startTime:u,startX:c,startY:h,x:s,y:r})}}}})),C=(D.polyfill,function(t){p(i,A);var e=w(i);function i(){var t,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a(this,i),(t=e.call(this,s)).resetNativeScroll&&(history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0)),window.addEventListener("scroll",t.checkScroll,!1),void 0===window.smoothscrollPolyfill&&(window.smoothscrollPolyfill=D,window.smoothscrollPolyfill.polyfill()),t}return h(i,[{key:"init",value:function(){this.instance.scroll.y=window.pageYOffset,this.addElements(),this.detectElements(),b(m(i.prototype),"init",this).call(this)}},{key:"checkScroll",value:function(){var t=this;b(m(i.prototype),"checkScroll",this).call(this),this.getDirection&&this.addDirection(),this.getSpeed&&(this.addSpeed(),this.speedTs=Date.now()),this.instance.scroll.y=window.pageYOffset,Object.entries(this.els).length&&(this.hasScrollTicking||(requestAnimationFrame((function(){t.detectElements()})),this.hasScrollTicking=!0))}},{key:"addDirection",value:function(){window.pageYOffset>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):window.pageYOffset1&&void 0!==arguments[1]?arguments[1]:{},i=parseInt(e.offset)||0,s=!!e.callback&&e.callback;if("string"==typeof t){if("top"===t)t=this.html;else if("bottom"===t)t=this.html.offsetHeight-window.innerHeight;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");i="number"!=typeof t?t.getBoundingClientRect().top+i+this.instance.scroll.y:t+i;var n=function(){return parseInt(window.pageYOffset)===parseInt(i)};if(s){if(n())return void s();var o=function t(){n()&&(window.removeEventListener("scroll",t),s())};window.addEventListener("scroll",o)}window.scrollTo({top:i,behavior:0===e.duration?"auto":"smooth"})}},{key:"update",value:function(){this.addElements(),this.detectElements()}},{key:"destroy",value:function(){b(m(i.prototype),"destroy",this).call(this),window.removeEventListener("scroll",this.checkScroll,!1)}}]),i}()),_=Object.getOwnPropertySymbols,j=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;function B(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var I=function(){try{if(!Object.assign)return!1;if("abc"[5]="de","5"===Object.getOwnPropertyNames("abc")[0])return!1;for(var t={},e=0;e<10;e++)t["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach((function(t){i[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},i)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var i,s,n=B(t),o=1;o=e;1<=e?t++:t--)i.push(null);return i}.call(this),this.lastDownDeltas=function(){var t,e,i;for(i=[],t=1,e=2*this.stability;1<=e?t<=e:t>=e;1<=e?t++:t--)i.push(null);return i}.call(this),this.deltasTimestamp=function(){var t,e,i;for(i=[],t=1,e=2*this.stability;1<=e?t<=e:t>=e;1<=e?t++:t--)i.push(null);return i}.call(this)}return t.prototype.check=function(t){var e;return null!=(t=t.originalEvent||t).wheelDelta?e=t.wheelDelta:null!=t.deltaY?e=-40*t.deltaY:null==t.detail&&0!==t.detail||(e=-40*t.detail),this.deltasTimestamp.push(Date.now()),this.deltasTimestamp.shift(),e>0?(this.lastUpDeltas.push(e),this.lastUpDeltas.shift(),this.isInertia(1)):(this.lastDownDeltas.push(e),this.lastDownDeltas.shift(),this.isInertia(-1))},t.prototype.isInertia=function(t){var e,i,s,n,o,r,l;return null===(e=-1===t?this.lastDownDeltas:this.lastUpDeltas)[0]?t:!(this.deltasTimestamp[2*this.stability-2]+this.delay>Date.now()&&e[0]===e[2*this.stability-1])&&(s=e.slice(0,this.stability),i=e.slice(this.stability,2*this.stability),l=s.reduce((function(t,e){return t+e})),o=i.reduce((function(t,e){return t+e})),r=l/s.length,n=o/i.length,Math.abs(r)1,hasPointer:!!window.navigator.msPointerEnabled,hasKeyDown:"onkeydown"in document,isFirefox:navigator.userAgent.indexOf("Firefox")>-1},Y=Object.prototype.toString,z=Object.prototype.hasOwnProperty;function X(t,e){return function(){return t.apply(e,arguments)}}var q=H.Lethargy,V=J,F=37,K=38,N=39,U=40,$=32;function J(t){!function(t){if(!t)return console.warn("bindAll requires at least one argument.");var e=Array.prototype.slice.call(arguments,1);if(0===e.length)for(var i in t)z.call(t,i)&&"function"==typeof t[i]&&"[object Function]"==Y.call(t[i])&&e.push(i);for(var s=0;s=.001?function(t,e,i,s){for(var n=0;n<4;++n){var o=ot(e,i,s);if(0===o)return e;e-=(nt(e,i,s)-t)/o}return e}(e,r,t,i):0===l?r:function(t,e,i,s,n){var o,r,l=0;do{(o=nt(r=e+(i-e)/2,s,n)-t)>0?i=r:e=r}while(Math.abs(o)>1e-7&&++l<10);return r}(e,s,s+.1,t,i)}return function(t){return 0===t?0:1===t?1:nt(r(t),e,s)}},at=38,ct=40,ht=32,dt=9,ut=33,ft=34,pt=36,mt=35,vt=function(t){p(i,A);var e=w(i);function i(){var t,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a(this,i),history.scrollRestoration&&(history.scrollRestoration="manual"),window.scrollTo(0,0),(t=e.call(this,s)).inertia&&(t.lerp=.1*t.inertia),t.isScrolling=!1,t.isDraggingScrollbar=!1,t.isTicking=!1,t.hasScrollTicking=!1,t.parallaxElements={},t.stop=!1,t.scrollbarContainer=s.scrollbarContainer,t.checkKey=t.checkKey.bind(y(t)),window.addEventListener("keydown",t.checkKey,!1),t}return h(i,[{key:"init",value:function(){var t=this;this.html.classList.add(this.smoothClass),this.html.setAttribute("data-".concat(this.name,"-direction"),this.direction),this.instance=f({delta:{x:this.initPosition.x,y:this.initPosition.y},scroll:{x:this.initPosition.x,y:this.initPosition.y}},this.instance),this.vs=new V({el:this.scrollFromAnywhere?document:this.el,mouseMultiplier:navigator.platform.indexOf("Win")>-1?1:.4,firefoxMultiplier:this.firefoxMultiplier,touchMultiplier:this.touchMultiplier,useKeyboard:!1,passive:!0}),this.vs.on((function(e){t.stop||t.isDraggingScrollbar||requestAnimationFrame((function(){t.updateDelta(e),t.isScrolling||t.startScrolling()}))})),this.setScrollLimit(),this.initScrollBar(),this.addSections(),this.addElements(),this.checkScroll(!0),this.transformElements(!0,!0),b(m(i.prototype),"init",this).call(this)}},{key:"setScrollLimit",value:function(){if(this.instance.limit.y=this.el.offsetHeight-this.windowHeight,"horizontal"===this.direction){for(var t=0,e=this.el.children,i=0;ithis.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis]),this.stopScrolling(),this.isScrolling=!0,this.checkScroll(),this.html.classList.add(this.scrollingClass)}}},{key:"checkScroll",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e||this.isScrolling||this.isDraggingScrollbar){this.hasScrollTicking||(this.checkScrollRaf=requestAnimationFrame((function(){return t.checkScroll()})),this.hasScrollTicking=!0),this.updateScroll();var s=Math.abs(this.instance.delta[this.directionAxis]-this.instance.scroll[this.directionAxis]),n=Date.now()-this.startScrollTs;if(!this.animatingScroll&&n>100&&(s<.5&&0!=this.instance.delta[this.directionAxis]||s<.5&&0==this.instance.delta[this.directionAxis])&&this.stopScrolling(),Object.entries(this.sections).forEach((function(i){var s=x(i,2),n=(s[0],s[1]);n.persistent||t.instance.scroll[t.directionAxis]>n.offset[t.directionAxis]&&t.instance.scroll[t.directionAxis]this.instance.limit[this.directionAxis]&&(this.instance.delta[this.directionAxis]=this.instance.limit[this.directionAxis])}},{key:"updateScroll",value:function(t){this.isScrolling||this.isDraggingScrollbar?this.instance.scroll[this.directionAxis]=Q(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis],this.lerp):this.instance.scroll[this.directionAxis]>this.instance.limit[this.directionAxis]?this.setScroll(this.instance.scroll[this.directionAxis],this.instance.limit[this.directionAxis]):this.instance.scroll.y<0?this.setScroll(this.instance.scroll[this.directionAxis],0):this.setScroll(this.instance.scroll[this.directionAxis],this.instance.delta[this.directionAxis])}},{key:"addDirection",value:function(){this.instance.delta.y>this.instance.scroll.y?"down"!==this.instance.direction&&(this.instance.direction="down"):this.instance.delta.ythis.instance.scroll.x?"right"!==this.instance.direction&&(this.instance.direction="right"):this.instance.delta.x0&&s0&&i1&&void 0!==arguments[1]&&arguments[1],s=this.instance.scroll.x+this.windowWidth,n=this.instance.scroll.y+this.windowHeight,o={x:this.instance.scroll.x+this.windowMiddle.x,y:this.instance.scroll.y+this.windowMiddle.y};Object.entries(this.parallaxElements).forEach((function(r){var l=x(r,2),a=(l[0],l[1]),c=!1;if(t&&(c=0),a.inView||i)switch(a.position){case"top":case"left":c=e.instance.scroll[e.directionAxis]*-a.speed;break;case"elementTop":c=(n-a.top)*-a.speed;break;case"bottom":c=(e.instance.limit[e.directionAxis]-n+e.windowHeight)*a.speed;break;case"elementLeft":c=(s-a.left)*-a.speed;break;case"right":c=(e.instance.limit[e.directionAxis]-s+e.windowHeight)*a.speed;break;default:c=(o[e.directionAxis]-a.middle[e.directionAxis])*-a.speed}a.sticky&&(c=a.inView?"horizontal"===e.direction?e.instance.scroll.x-a.left+window.innerWidth:e.instance.scroll.y-a.top+window.innerHeight:"horizontal"===e.direction?e.instance.scroll.xa.right&&e.instance.scroll.x>a.right+100&&a.right-a.left+window.innerWidth:e.instance.scroll.ya.bottom&&e.instance.scroll.y>a.bottom+100&&a.bottom-a.top+window.innerHeight),!1!==c&&("horizontal"===a.direction||"horizontal"===e.direction&&"vertical"!==a.direction?e.transform(a.el,c,0,!t&&a.delay):e.transform(a.el,0,c,!t&&a.delay))}))}},{key:"scrollTo",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=parseInt(i.offset)||0,n=isNaN(parseInt(i.duration))?1e3:parseInt(i.duration),o=i.easing||[.25,0,.35,1],r=!!i.disableLerp,l=!!i.callback&&i.callback;if(o=lt.apply(void 0,k(o)),"string"==typeof t){if("top"===t)t=0;else if("bottom"===t)t=this.instance.limit.y;else if("left"===t)t=0;else if("right"===t)t=this.instance.limit.x;else if(!(t=document.querySelector(t)))return}else if("number"==typeof t)t=parseInt(t);else if(!t||!t.tagName)return void console.warn("`target` parameter is not valid");if("number"!=typeof t){var a=Z(t).includes(this.el);if(!a)return;var c=t.getBoundingClientRect(),h=c.top,d=c.left,u=Z(t),f=u.find((function(t){return Object.entries(e.sections).map((function(t){var e=x(t,2);e[0];return e[1]})).find((function(e){return e.el==t}))})),p=0;p=f?G(f)[this.directionAxis]:-this.instance.scroll[this.directionAxis],s="horizontal"===this.direction?d+s-p:h+s-p}else s=t+s;var m=parseFloat(this.instance.delta[this.directionAxis]),v=Math.max(0,Math.min(s,this.instance.limit[this.directionAxis])),y=v-m,g=function(t){r?"horizontal"===e.direction?e.setScroll(m+y*t,e.instance.delta.y):e.setScroll(e.instance.delta.x,m+y*t):e.instance.delta[e.directionAxis]=m+y*t};this.animatingScroll=!0,this.stopScrolling(),this.startScrolling();var w=Date.now(),b=function t(){var i=(Date.now()-w)/n;i>1?(g(1),e.animatingScroll=!1,0==n&&e.update(),l&&l()):(e.scrollToRaf=requestAnimationFrame(t),g(o(i)))};b()}},{key:"update",value:function(){this.setScrollLimit(),this.addSections(),this.addElements(),this.detectElements(),this.updateScroll(),this.transformElements(!0),this.reinitScrollBar(),this.checkScroll(!0)}},{key:"startScroll",value:function(){this.stop=!1}},{key:"stopScroll",value:function(){this.stop=!0}},{key:"setScroll",value:function(t,e){this.instance=f(f({},this.instance),{},{scroll:{x:t,y:e},delta:{x:t,y:e},speed:0})}},{key:"destroy",value:function(){b(m(i.prototype),"destroy",this).call(this),this.stopScrolling(),this.html.classList.remove(this.smoothClass),this.vs.destroy(),this.destroyScrollBar(),window.removeEventListener("keydown",this.checkKey,!1)}}]),i}(),yt=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,t),this.options=e,Object.assign(this,T,e),this.smartphone=T.smartphone,e.smartphone&&Object.assign(this.smartphone,e.smartphone),this.tablet=T.tablet,e.tablet&&Object.assign(this.tablet,e.tablet),this.smooth||"horizontal"!=this.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible"),this.tablet.smooth||"horizontal"!=this.tablet.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (tablet)"),this.smartphone.smooth||"horizontal"!=this.smartphone.direction||console.warn("🚨 `smooth:false` & `horizontal` direction are not yet compatible (smartphone)"),this.init()}return h(t,[{key:"init",value:function(){if(this.options.isMobile=/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"MacIntel"===navigator.platform&&navigator.maxTouchPoints>1||window.innerWidth=this.tablet.breakpoint,this.smooth&&!this.options.isMobile||this.tablet.smooth&&this.options.isTablet||this.smartphone.smooth&&this.options.isMobile&&!this.options.isTablet?this.scroll=new vt(this.options):this.scroll=new C(this.options),this.scroll.init(),window.location.hash){var t=window.location.hash.slice(1,window.location.hash.length),e=document.getElementById(t);e&&this.scroll.scrollTo(e)}}},{key:"update",value:function(){this.scroll.update()}},{key:"start",value:function(){this.scroll.startScroll()}},{key:"stop",value:function(){this.scroll.stopScroll()}},{key:"scrollTo",value:function(t,e){this.scroll.scrollTo(t,e)}},{key:"setScroll",value:function(t,e){this.scroll.setScroll(t,e)}},{key:"on",value:function(t,e){this.scroll.setEvents(t,e)}},{key:"off",value:function(t,e){this.scroll.unsetEvents(t,e)}},{key:"destroy",value:function(){this.scroll.destroy()}}]),t}(),gt=yt;const wt=0,bt=101,xt=document.querySelector(".shift");let kt="h";xt.classList.contains("shift--vertical")?kt="v":xt.classList.contains("shift--rotated")&&(kt="r");const St=[...xt.querySelectorAll(".shift__layer-inner")],Et=document.querySelector("#trigger");let Tt,At,Ot=0,Lt={},Dt={x:0,y:0};const Ct=()=>{Tt={width:window.innerWidth,height:window.innerHeight},At=Et.getBoundingClientRect().top+Ot};((t="img")=>new Promise((e=>{n(document.querySelectorAll(t),{background:!0},e)})))(".projects__img, .footer__img, .intro__gallery-item").then((()=>{document.body.classList.remove("loading");const t=new gt({el:document.querySelector("[data-scroll-container]"),smooth:!0,smartphone:{smooth:!0},tablet:{smooth:!0}});Ct(),t.on("scroll",(t=>{Ot=t.scroll.y,Dt.x="v"!==kt?0:o(Ot+Tt.height-At,0,400,-1*bt,wt),Dt.y="v"===kt?0:o(Ot+Tt.height-At,0,400,"h"===kt?bt:-1*bt,wt),Lt.layersTranslation&&l(Dt,Lt.layersTranslation)&&St.forEach((t=>t.style.transform=`translate3d(${Dt.x}%, ${Dt.y}%, 0)`)),Lt.layersTranslation=Dt})),window.addEventListener("resize",Ct)})); -------------------------------------------------------------------------------- /dist/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Previous demo 38 | Article 39 | GitHub 40 |
41 |
42 | Demo 1 43 | Demo 2 44 | Demo 3 45 |
46 |
47 |

Mia Farkas

48 |

Designer & Visual Story Teller

49 |
50 |
51 |
52 |
53 |
54 |
55 | 61 |
62 |
63 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

64 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

65 |
66 |
67 |
Latest
68 |

69 | Phœbus 70 | Hearken 71 |

72 |
73 |
74 | See all projects 75 |
76 |
77 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

78 |
79 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

80 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

81 |
82 |
83 |
84 |
85 | Astrø 86 | Butterflies 87 | Hot Stuff 88 | Mr. Chekhov 89 | Modern Man 90 | Vedic Pi 91 | Search of Soul 92 | Nidanakatha 93 | Sankhya Dub 94 | Good Heart 95 | Good Mind 96 | The Skanda Purana 97 | Mio 98 | Mèahuasca 99 | Dhammapada 100 | Eternal 101 |
102 |
103 | 113 |

Mia Farkas

114 |
2022
115 |
116 |
117 |
118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backgroundshift", 3 | "version": "1.0.0", 4 | "browserslist": "> 0.5%, last 2 versions, not dead", 5 | "description": "", 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/[NAME].git" 15 | }, 16 | "keywords": [], 17 | "author": "Codrops", 18 | "license": "MIT", 19 | "homepage": "https://tympanus.net/codrops", 20 | "bugs": { 21 | "url": "https://github.com/codrops/[NAME]/issues" 22 | }, 23 | "dependencies": { 24 | "imagesloaded": "^4.1.4", 25 | "locomotive-scroll": "^4.1.3", 26 | "parcel": "latest" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src.zip -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 22px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #fff; 14 | --color-bg: #e1ddd8; 15 | --color-link: #4ebbfb; 16 | --color-link-hover: #fff; 17 | --color-bg-shift: #1e2227; 18 | --page-padding: 2vw; 19 | color: var(--color-text); 20 | background-color: var(--color-bg); 21 | font-family: brother-1816, sans-serif; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .demo-2 { 27 | --color-bg: #d8d8e1; 28 | --color-link: #fbae4e; 29 | --color-bg-shift: #2b2b3c; 30 | } 31 | 32 | .demo-3 { 33 | --color-bg: #e1d8dc; 34 | --color-link: #4efbf3; 35 | --color-bg-shift: #2e2125; 36 | } 37 | 38 | .invert { 39 | -webkit-filter: invert(1); 40 | filter: invert(1); 41 | } 42 | 43 | /* Page Loader */ 44 | .js .loading::before, 45 | .js .loading::after { 46 | content: ''; 47 | position: fixed; 48 | z-index: 1000; 49 | } 50 | 51 | .js .loading::before { 52 | top: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background: var(--color-bg); 57 | } 58 | 59 | .js .loading::after { 60 | top: 50%; 61 | left: 50%; 62 | width: 60px; 63 | height: 60px; 64 | margin: -30px 0 0 -30px; 65 | border-radius: 50%; 66 | opacity: 0.4; 67 | background: #000; 68 | animation: loaderAnim 0.7s linear infinite alternate forwards; 69 | 70 | } 71 | 72 | @keyframes loaderAnim { 73 | to { 74 | opacity: 1; 75 | transform: scale3d(0.5, 0.5, 1); 76 | } 77 | } 78 | 79 | a { 80 | text-decoration: none; 81 | color: var(--color-link); 82 | outline: none; 83 | cursor: pointer; 84 | } 85 | 86 | a:hover { 87 | color: var(--color-link-hover); 88 | outline: none; 89 | } 90 | 91 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 92 | a:focus { 93 | /* Provide a fallback style for browsers 94 | that don't support :focus-visible */ 95 | outline: none; 96 | background: lightgrey; 97 | } 98 | 99 | a:focus:not(:focus-visible) { 100 | /* Remove the focus indicator on mouse-focus for browsers 101 | that do support :focus-visible */ 102 | background: transparent; 103 | } 104 | 105 | a:focus-visible { 106 | /* Draw a very noticeable focus style for 107 | keyboard-focus on browsers that do support 108 | :focus-visible */ 109 | outline: 2px solid red; 110 | background: transparent; 111 | } 112 | 113 | .unbutton { 114 | background: none; 115 | border: 0; 116 | padding: 0; 117 | margin: 0; 118 | font: inherit; 119 | } 120 | 121 | .unbutton:focus { 122 | outline: none; 123 | } 124 | 125 | main { 126 | position: relative; 127 | z-index: 100; 128 | } 129 | 130 | .bg { 131 | background: var(--color-bg); 132 | position: fixed; 133 | top: 0; 134 | height: 100%; 135 | width: 100%; 136 | pointer-events: none; 137 | } 138 | 139 | .shift { 140 | position: fixed; 141 | top: 0; 142 | height: 100%; 143 | width: 100%; 144 | display: grid; 145 | pointer-events: none; 146 | } 147 | 148 | .shift--rotated { 149 | height: 120vh; 150 | top: -10vh; 151 | } 152 | 153 | .shift--horizontal { 154 | grid-auto-rows: 1fr; 155 | grid-auto-flow: row; 156 | } 157 | 158 | .shift--vertical { 159 | grid-auto-columns: 1fr; 160 | grid-auto-flow: column; 161 | } 162 | 163 | .shift__layer { 164 | position: relative; 165 | overflow: hidden; 166 | margin-top: -0.5px; 167 | } 168 | 169 | .shift--rotated .shift__layer { 170 | transform: rotate(4deg) scale(1.1); 171 | width: 120%; 172 | left: -10%; 173 | } 174 | 175 | .shift__layer-inner { 176 | height: 100%; 177 | background: var(--color-bg-shift); 178 | transform: translate3d(0, 101%, 0); 179 | } 180 | 181 | .shift--vertical .shift__layer-inner { 182 | transform: translate3d(101%, 0, 0); 183 | } 184 | 185 | .blend { 186 | mix-blend-mode: exclusion; 187 | } 188 | 189 | .intro { 190 | position: relative; 191 | display: grid; 192 | grid-template-areas: 193 | 'intro-images intro-menu' 194 | 'intro-title intro-title'; 195 | grid-template-columns: 1fr auto; 196 | grid-template-rows: auto auto; 197 | padding: 0 var(--page-padding) var(--page-padding); 198 | grid-gap: 5vh; 199 | height: 100vh; 200 | } 201 | 202 | .intro__title { 203 | grid-area: intro-title; 204 | text-transform: uppercase; 205 | align-self: end; 206 | } 207 | 208 | .intro__title-links { 209 | font-size: 0.65rem; 210 | margin-left: 0.25rem; 211 | display: flex; 212 | flex-wrap: wrap; 213 | } 214 | 215 | .demos { 216 | width: 100%; 217 | } 218 | 219 | .current { 220 | color: var(--color-text); 221 | } 222 | 223 | .intro__title-links a { 224 | margin-right: 0.5rem; 225 | } 226 | 227 | .intro__title-main { 228 | font-size: 13vw; 229 | font-family: ivypresto-display, serif; 230 | font-weight: 400; 231 | margin: 0; 232 | line-height: 0.9; 233 | pointer-events: none; 234 | } 235 | 236 | .intro__title-sub { 237 | font-size: 4vw; 238 | font-size: clamp(1rem, 4vw, 1.35rem); 239 | font-weight: 300; 240 | margin: 0.5rem 0 0 0; 241 | line-height: 1; 242 | } 243 | 244 | .intro__gallery { 245 | grid-area: intro-images; 246 | display: grid; 247 | grid-template-columns: repeat(3, 1fr); 248 | grid-gap: 1rem; 249 | } 250 | 251 | .intro__gallery-item { 252 | width: 100%; 253 | display: block; 254 | background-size: cover; 255 | border-radius: 13vw; 256 | margin-top: 1rem; 257 | background-position: 50% 50%; 258 | } 259 | 260 | .intro__gallery-item--top { 261 | border-radius: 0 0 13vw 13vw; 262 | margin: 0 0 50%; 263 | } 264 | 265 | .intro__menu-button { 266 | align-self: start; 267 | justify-self: end; 268 | border: 0; 269 | margin-top: 1rem; 270 | background: none; 271 | cursor: not-allowed; 272 | width: 60px; 273 | height: 60px; 274 | } 275 | 276 | .lines { 277 | stroke-width: 4px; 278 | } 279 | 280 | .present { 281 | position: relative; 282 | padding: 0 var(--page-padding) 10vh; 283 | } 284 | 285 | .present__text--large { 286 | grid-area: present-large; 287 | max-width: 95%; 288 | -webkit-hyphens: auto; 289 | hyphens: auto; 290 | font-size: 5.5vw; 291 | font-size: clamp(1rem, 5.25vw, 10rem); 292 | line-height: 1; 293 | font-weight: 300; 294 | } 295 | 296 | .present__text--small { 297 | grid-area: present-small; 298 | font-size: 1.25rem; 299 | font-size: clamp(1rem, 2vw, 1.25rem); 300 | line-height: 1.3; 301 | font-weight: 300; 302 | } 303 | 304 | .present__text--small p { 305 | margin-bottom: 10vh; 306 | } 307 | 308 | .present__visual { 309 | grid-area: present-visual; 310 | border-radius: 20vw; 311 | background-size: cover; 312 | background-position: 50% 50%; 313 | height: 105vh; 314 | width: 70%; 315 | max-width: 70vh; 316 | align-self: center; 317 | justify-self: center; 318 | position: relative; 319 | } 320 | 321 | .projects { 322 | position: relative; 323 | display: grid; 324 | grid-template-columns: 35% 15% 1fr; 325 | grid-template-areas: '... ... project-latest' 326 | 'project-img-left ... project-title' 327 | 'project-img-left project-img-right project-img-right' 328 | 'project-more project-more project-more'; 329 | } 330 | 331 | .project__latest { 332 | grid-area: project-latest; 333 | text-transform: uppercase; 334 | font-weight: 300; 335 | text-align: center; 336 | position: relative; 337 | padding-bottom: 20vh; 338 | margin-left: 5vw; 339 | width: 20vw; 340 | z-index: 0; 341 | } 342 | 343 | .project__latest::after { 344 | content: ''; 345 | position: absolute; 346 | width: 44vw; 347 | height: 44vw; 348 | border: 1px solid #fff; 349 | border-radius: 50%; 350 | left: 50%; 351 | top: -25%; 352 | margin-left: -22vw; 353 | } 354 | 355 | .projects__img { 356 | position: relative; 357 | background-size: cover; 358 | background-position: 50% 50%; 359 | } 360 | 361 | .projects__title { 362 | grid-area: project-title; 363 | text-align: right; 364 | padding-right: var(--page-padding); 365 | font-family: ivypresto-display, serif; 366 | font-weight: 400; 367 | text-transform: uppercase; 368 | } 369 | 370 | .projects__title-main { 371 | font-size: 10vw; 372 | font-size: clamp(2rem, 10vw, 9rem); 373 | display: block; 374 | line-height: 0.9; 375 | } 376 | 377 | .projects__title-sub { 378 | font-size: 4vw; 379 | font-size: clamp(1.5rem, 4vw, 3rem); 380 | font-style: italic; 381 | line-height: 1; 382 | margin-right: 0.5vw; 383 | } 384 | 385 | .projects__img--left { 386 | grid-area: project-img-left; 387 | grid-column-end: 3; 388 | border-radius: 0 30vh 30vh 0; 389 | height: 60vh; 390 | } 391 | 392 | .projects__img--right { 393 | grid-area: project-img-right; 394 | border-radius: 40vh 0 0 40vh; 395 | height: 80vh; 396 | } 397 | 398 | .projects__more { 399 | grid-area: project-more; 400 | justify-self: center; 401 | text-decoration: underline; 402 | font-size: 1.5rem; 403 | font-size: clamp(1rem, 3vw, 1.5rem); 404 | margin: 15vh 0 35vh; 405 | font-weight: 300; 406 | } 407 | 408 | .type { 409 | padding: 30vh var(--page-padding); 410 | counter-reset: type-link; 411 | } 412 | 413 | .type__link { 414 | font-size: 5vw; 415 | font-size: clamp(2rem, 5vw, 6rem); 416 | font-weight: 300; 417 | color: #fff; 418 | margin: 0 1rem 0 0; 419 | position: relative; 420 | white-space: nowrap; 421 | display: block; 422 | } 423 | 424 | .type__link:hover, 425 | .type__link:focus { 426 | color: #fff; 427 | } 428 | 429 | .type__link:nth-child(even) { 430 | font-family: ivypresto-display, serif; 431 | font-style: italic; 432 | } 433 | 434 | .type__link::before { 435 | counter-increment: type-link; 436 | content: counter(type-link); 437 | font-family: brother-1816, sans-serif; 438 | font-size: 1.15rem; 439 | font-style: normal; 440 | display: inline-block; 441 | margin-right: 0.5rem; 442 | vertical-align: 110%; 443 | } 444 | 445 | .footer { 446 | min-height: 400px; 447 | padding: 0 var(--page-padding); 448 | } 449 | 450 | .footer__links { 451 | grid-area: footer-list; 452 | list-style: none; 453 | margin: 0; 454 | padding: 0; 455 | font-size: 1.25rem; 456 | font-weight: 300; 457 | } 458 | 459 | .footer__links a { 460 | filter: invert(1); 461 | } 462 | 463 | .footer__links a:hover, 464 | .footer__links a:focus { 465 | filter: none; 466 | } 467 | 468 | .footer__img { 469 | grid-area: footer-img; 470 | max-width: 300px; 471 | max-height: 400px; 472 | height: 80vh; 473 | width: 40vh; 474 | background-size: cover; 475 | background-position: 50% 50%; 476 | align-self: end; 477 | justify-self: center; 478 | border-radius: 20vh 20vh 0 0; 479 | } 480 | 481 | .footer__author { 482 | grid-area: footer-author; 483 | margin: 0; 484 | align-self: end; 485 | padding: 1rem 0; 486 | font-family: ivypresto-display, serif; 487 | font-weight: 400; 488 | font-size: 5vw; 489 | font-size: clamp(2rem, 4vw, 5rem); 490 | } 491 | 492 | .footer__year { 493 | grid-area: footer-year; 494 | align-self: end; 495 | padding-bottom: 1rem; 496 | font-size: 1.25rem; 497 | font-size: clamp(1rem, 2vw, 1.25rem); 498 | font-weight: 300; 499 | } 500 | 501 | @media screen and (min-width: 53em) { 502 | body { 503 | --page-padding: 1.5rem; 504 | } 505 | 506 | .lines { 507 | stroke-width: 2px; 508 | } 509 | 510 | .intro__menu-button { 511 | width: 105px; 512 | height: 105px; 513 | } 514 | 515 | .intro { 516 | grid-template-areas: 517 | 'intro-images intro-menu' 518 | 'intro-images intro-ad' 519 | 'intro-title ...'; 520 | grid-template-columns: 67% 1fr; 521 | grid-template-rows: 1fr 1fr auto; 522 | } 523 | 524 | .intro__title { 525 | white-space: nowrap; 526 | } 527 | 528 | .demos { 529 | position: relative; 530 | width: auto; 531 | } 532 | 533 | .demos::before { 534 | content: ''; 535 | width: 3rem; 536 | border-bottom: 1px solid; 537 | display: inline-block; 538 | vertical-align: middle; 539 | margin: 0 0.5rem; 540 | } 541 | 542 | .present { 543 | display: grid; 544 | grid-template-areas: 'present-large present-large''present-small present-visual'; 545 | grid-template-columns: 40% 1fr; 546 | } 547 | 548 | .type__link { 549 | display: inline-block; 550 | } 551 | 552 | .footer { 553 | display: grid; 554 | grid-template-areas: 'footer-list footer-img ...''footer-author footer-img footer-year'; 555 | grid-template-columns: auto 1fr auto; 556 | align-content: space-between; 557 | } 558 | 559 | .footer__links { 560 | column-count: 2; 561 | } 562 | } 563 | 564 | /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 565 | html.has-scroll-smooth { 566 | overflow: hidden; 567 | position: fixed; 568 | top: 0; 569 | left: 0; 570 | right: 0; 571 | bottom: 0; 572 | } 573 | 574 | html.has-scroll-dragging { 575 | -webkit-user-select: none; 576 | -moz-user-select: none; 577 | -ms-user-select: none; 578 | user-select: none; 579 | } 580 | 581 | .has-scroll-smooth body { 582 | overflow: hidden; 583 | } 584 | 585 | .has-scroll-smooth [data-scroll-container] { 586 | min-height: 100vh; 587 | } 588 | 589 | [data-scroll-direction="horizontal"] [data-scroll-container] { 590 | height: 100vh; 591 | display: inline-block; 592 | white-space: nowrap; 593 | } 594 | 595 | [data-scroll-direction="horizontal"] [data-scroll-section] { 596 | display: inline-block; 597 | vertical-align: top; 598 | white-space: nowrap; 599 | height: 100%; 600 | } 601 | 602 | .c-scrollbar { 603 | position: absolute; 604 | right: 0; 605 | top: 0; 606 | width: 11px; 607 | height: 100%; 608 | transform-origin: center right; 609 | transition: transform 0.3s, opacity 0.3s; 610 | opacity: 0; 611 | } 612 | 613 | .c-scrollbar:hover { 614 | transform: scaleX(1.45); 615 | } 616 | 617 | .c-scrollbar:hover, 618 | .has-scroll-scrolling .c-scrollbar, 619 | .has-scroll-dragging .c-scrollbar { 620 | opacity: 1; 621 | } 622 | 623 | [data-scroll-direction="horizontal"] .c-scrollbar { 624 | width: 100%; 625 | height: 10px; 626 | top: auto; 627 | bottom: 0; 628 | transform: scaleY(1); 629 | } 630 | 631 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 632 | transform: scaleY(1.3); 633 | } 634 | 635 | .c-scrollbar_thumb { 636 | position: absolute; 637 | top: 0; 638 | right: 0; 639 | background-color: black; 640 | opacity: 0.5; 641 | width: 7px; 642 | border-radius: 10px; 643 | margin: 2px; 644 | cursor: -webkit-grab; 645 | cursor: grab; 646 | } 647 | 648 | .has-scroll-dragging .c-scrollbar_thumb { 649 | cursor: -webkit-grabbing; 650 | cursor: grabbing; 651 | } 652 | 653 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 654 | right: auto; 655 | bottom: 0; 656 | } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/favicon.ico -------------------------------------------------------------------------------- /src/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/1.jpg -------------------------------------------------------------------------------- /src/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/2.jpg -------------------------------------------------------------------------------- /src/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/3.jpg -------------------------------------------------------------------------------- /src/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/4.jpg -------------------------------------------------------------------------------- /src/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/5.jpg -------------------------------------------------------------------------------- /src/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BackgroundShift/d0e38dc7d04413b931b36b68ba0a78b1cb682f69/src/img/6.jpg -------------------------------------------------------------------------------- /src/img/button.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | Demo 1 36 | Demo 2 37 | Demo 3 38 |
39 |
40 |

Mia Farkas

41 |

Designer & Visual Story Teller

42 |
43 |
44 |
45 |
46 |
47 |
48 | 54 |
55 |
56 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

57 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

58 |
59 |
60 |
Latest
61 |

62 | Phœbus 63 | Hearken 64 |

65 |
66 |
67 | See all projects 68 |
69 |
70 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

71 |
72 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

73 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

74 |
75 |
76 |
77 |
78 | Astrø 79 | Butterflies 80 | Hot Stuff 81 | Mr. Chekhov 82 | Modern Man 83 | Vedic Pi 84 | Search of Soul 85 | Nidanakatha 86 | Sankhya Dub 87 | Good Heart 88 | Good Mind 89 | The Skanda Purana 90 | Mio 91 | Mèahuasca 92 | Dhammapada 93 | Eternal 94 |
95 |
96 | 106 |

Mia Farkas

107 |
2022
108 |
109 |
110 |
111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | Previous demo 35 | Article 36 | GitHub 37 |
38 |
39 | Demo 1 40 | Demo 2 41 | Demo 3 42 |
43 |
44 |

Mia Farkas

45 |

Designer & Visual Story Teller

46 |
47 |
48 |
49 |
50 |
51 |
52 | 58 |
59 |
60 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

61 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

62 |
63 |
64 |
Latest
65 |

66 | Phœbus 67 | Hearken 68 |

69 |
70 |
71 | See all projects 72 |
73 |
74 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

75 |
76 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

77 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

78 |
79 |
80 |
81 |
82 | Astrø 83 | Butterflies 84 | Hot Stuff 85 | Mr. Chekhov 86 | Modern Man 87 | Vedic Pi 88 | Search of Soul 89 | Nidanakatha 90 | Sankhya Dub 91 | Good Heart 92 | Good Mind 93 | The Skanda Purana 94 | Mio 95 | Mèahuasca 96 | Dhammapada 97 | Eternal 98 |
99 |
100 | 110 |

Mia Farkas

111 |
2022
112 |
113 |
114 |
115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Shift with CSS Blend Modes | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | Previous demo 31 | Article 32 | GitHub 33 |
34 |
35 | Demo 1 36 | Demo 2 37 | Demo 3 38 |
39 |
40 |

Mia Farkas

41 |

Designer & Visual Story Teller

42 |
43 |
44 |
45 |
46 |
47 |
48 | 54 |
55 |
56 |

Mia is a multi-disciplinary designer who creates artful web experiences with a focus on interactive blissfulness and organic motion integration.

57 |

According to this mystic interpretation, the legend of the three men in the fiery furnace appears as a magic fire ceremony by means of which the Son of God reveals himself. The Trinity is brought together with the unity, or, in other words, through coitus a child is produced.

58 |
59 |
60 |
Latest
61 |

62 | Phœbus 63 | Hearken 64 |

65 |
66 |
67 | See all projects 68 |
69 |
70 |

Of all passions, that which is least known to ourselves is indolence: it is the most ardent and malignant of them all, although its violence may be insensible, and the injuries it causes may be hidden.

71 |
72 |

This amazing growth has proceeded steadily in an ever-widening fashion despite opposition as violent as any of which we have knowledge in the past. The criticism originally directed towards the little understood and viiimuch disliked sexual conception now includes the further teachings of a psychology which by the application to it of such damning phrases as mystical, metaphysical and sacrilegious, is condemned as unscientific.

73 |

It is not a simple matter to come out boldly and state that every individual is to a large extent the determiner of his own destiny, for only by poets and philosophers has this idea been put forth—not by science; and it is a brave act to make this statement with full consciousness of all its meaning, and to stand ready to prove it by scientific reasoning and procedure.

74 |
75 |
76 |
77 |
78 | Astrø 79 | Butterflies 80 | Hot Stuff 81 | Mr. Chekhov 82 | Modern Man 83 | Vedic Pi 84 | Search of Soul 85 | Nidanakatha 86 | Sankhya Dub 87 | Good Heart 88 | Good Mind 89 | The Skanda Purana 90 | Mio 91 | Mèahuasca 92 | Dhammapada 93 | Eternal 94 |
95 |
96 | 106 |

Mia Farkas

107 |
2022
108 |
109 |
110 |
111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import { map, calcWinsize, preloadImages, deepEqual } from './utils'; 2 | import LocomotiveScroll from 'locomotive-scroll'; 3 | 4 | const MAX_SCROLL_DISTANCE = 400; 5 | const LAYER_BOUNDS = {min: 0, max: 101}; // percentage values 6 | const shiftEl = document.querySelector('.shift'); 7 | let shiftDirection = 'h'; 8 | if ( shiftEl.classList.contains('shift--vertical') ) { 9 | shiftDirection = 'v'; 10 | } 11 | else if ( shiftEl.classList.contains('shift--rotated') ) { 12 | shiftDirection = 'r'; 13 | } 14 | const layers = [...shiftEl.querySelectorAll('.shift__layer-inner')]; 15 | const triggerEl = document.querySelector('#trigger'); 16 | 17 | let currentScroll = 0; 18 | let winsize; 19 | let triggerTop; 20 | let cache = {}; 21 | let layersTranslation = {x: 0, y: 0}; 22 | 23 | const calcTriggerTop = () => triggerEl.getBoundingClientRect()['top']+currentScroll; 24 | 25 | const init = () => { 26 | winsize = calcWinsize(); 27 | triggerTop = calcTriggerTop(); 28 | }; 29 | 30 | // Preload images then remove loader (loading class) from body 31 | preloadImages('.projects__img, .footer__img, .intro__gallery-item').then(() => { 32 | document.body.classList.remove('loading'); 33 | 34 | const lscroll = new LocomotiveScroll({ 35 | el: document.querySelector('[data-scroll-container]'), 36 | smooth: true, 37 | smartphone: {smooth: true}, 38 | tablet: {smooth: true} 39 | }); 40 | 41 | init(); 42 | 43 | // Locomotive Scroll event 44 | lscroll.on('scroll', obj => { 45 | currentScroll = obj.scroll.y; 46 | layersTranslation.x = shiftDirection !== 'v' ? 0 : map(((currentScroll+winsize.height)-triggerTop), 0, MAX_SCROLL_DISTANCE, -1*LAYER_BOUNDS.max, LAYER_BOUNDS.min); 47 | layersTranslation.y = shiftDirection === 'v' ? 0 : map(((currentScroll+winsize.height)-triggerTop), 0, MAX_SCROLL_DISTANCE, shiftDirection === 'h' ? LAYER_BOUNDS.max : -1*LAYER_BOUNDS.max, LAYER_BOUNDS.min); 48 | 49 | // only update for different values 50 | if ( cache.layersTranslation && deepEqual(layersTranslation, cache.layersTranslation) ) { 51 | layers.forEach(layer => layer.style.transform = `translate3d(${layersTranslation.x}%, ${layersTranslation.y}%, 0)`); 52 | } 53 | // cache the last translation 54 | cache.layersTranslation = layersTranslation; 55 | }); 56 | 57 | window.addEventListener('resize', init); 58 | 59 | }); 60 | 61 | -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Clamps a value between an upper and lower bound 4 | const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num; 5 | 6 | // Map number x from range [a, b] to [c, d] 7 | const map = (x, a, b, c, d) => clamp((x - a) * (d - c) / (b - a) + c, Math.min(c,d), Math.max(c,d)); 8 | 9 | // Viewport size 10 | const calcWinsize = () => { 11 | return { width: window.innerWidth, height: window.innerHeight }; 12 | }; 13 | 14 | // Preload images 15 | const preloadImages = (selector = 'img') => { 16 | return new Promise((resolve) => { 17 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 18 | }); 19 | }; 20 | 21 | // from https://dmitripavlutin.com/how-to-compare-objects-in-javascript/ 22 | const isObject = (object) => object != null && typeof object === 'object'; 23 | const deepEqual = (object1, object2) => { 24 | const keys1 = Object.keys(object1); 25 | const keys2 = Object.keys(object2); 26 | if (keys1.length !== keys2.length) { 27 | return false; 28 | } 29 | for (const key of keys1) { 30 | const val1 = object1[key]; 31 | const val2 = object2[key]; 32 | const areObjects = isObject(val1) && isObject(val2); 33 | if ( areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2 ) { 34 | return false; 35 | } 36 | } 37 | return true; 38 | } 39 | 40 | export { 41 | clamp, 42 | map, 43 | calcWinsize, 44 | preloadImages, 45 | deepEqual 46 | }; --------------------------------------------------------------------------------