├── .gitignore ├── img ├── 1.jpg ├── 2.jpg └── Divi.jpg ├── favicon.ico ├── README.md ├── js ├── demo.js └── anime.min.js ├── index.html └── css └── base.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CollapsingLogo/HEAD/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CollapsingLogo/HEAD/img/2.jpg -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CollapsingLogo/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/Divi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/CollapsingLogo/HEAD/img/Divi.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Collapsing Logo Effect 2 | 3 | A recreation of the collapsing logo effect seen on [PracticalVR](https://experience.practicalvr.com/). 4 | 5 | ![Collapsing Logo Effect](https://tympanus.net/codrops/wp-content/uploads/2018/06/CollapsingLogoEffect_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=35022) 8 | 9 | [Demo](http://tympanus.net/Development/CollapsingLogo/) 10 | 11 | ## Credits 12 | 13 | - Images from [Unsplash.com](http://unsplash.com) 14 | - [anime.js](http://animejs.com/) by Julian Garnier 15 | 16 | ## License 17 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 18 | 19 | ## Misc 20 | 21 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 22 | 23 | 24 | [© Codrops 2018](http://www.codrops.com) 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2018, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | // From https://davidwalsh.name/javascript-debounce-function. 13 | function debounce(func, wait, immediate) { 14 | var timeout; 15 | return function() { 16 | var context = this, args = arguments; 17 | var later = function() { 18 | timeout = null; 19 | if (!immediate) func.apply(context, args); 20 | }; 21 | var callNow = immediate && !timeout; 22 | clearTimeout(timeout); 23 | timeout = setTimeout(later, wait); 24 | if (callNow) func.apply(context, args); 25 | }; 26 | }; 27 | 28 | let winsize = {width: window.innerWidth, height: window.innerHeight}; 29 | 30 | const DOM = { 31 | intro: document.querySelector('.intro'), 32 | slideshowImagesWrappers: document.querySelectorAll('.slideshow__item-img'), 33 | slideshowImages: document.querySelectorAll('.slideshow__item-img-inner') 34 | }; 35 | 36 | class Panel { 37 | constructor(el) { 38 | this.DOM = {el: el}; 39 | 40 | this.DOM.logo = DOM.intro.querySelector('.intro__logo'); 41 | this.DOM.logoImg = this.DOM.logo.querySelector('.icon--arrowup'); 42 | this.DOM.enter = DOM.intro.querySelector('.intro__enter'); 43 | 44 | this.animatableElems = Array.from(DOM.intro.querySelectorAll('.animatable')).sort(() => 0.5 - Math.random()); 45 | 46 | // set layout 47 | this.boxRect = this.DOM.el.getBoundingClientRect(); 48 | this.layout(); 49 | 50 | this.isOpen = true; 51 | this.initEvents(); 52 | } 53 | layout() { 54 | this.DOM.el.style.transform = `scaleX(${winsize.width/this.boxRect.width}) scaleY(${winsize.height/this.boxRect.height})`; 55 | document.body.classList.remove('loading'); 56 | } 57 | initEvents() { 58 | this.DOM.enter.addEventListener('click', (ev) => { 59 | ev.preventDefault(); 60 | this.close(); 61 | }); 62 | 63 | this.DOM.logo.addEventListener('click', (ev) => { 64 | ev.preventDefault(); 65 | this.open(); 66 | }); 67 | 68 | // Window resize 69 | this.onResize = () => { 70 | winsize = {width: window.innerWidth, height: window.innerHeight}; 71 | if ( this.isOpen ) { 72 | this.layout(); 73 | } 74 | }; 75 | window.addEventListener('resize', debounce(() => this.onResize(), 10)); 76 | } 77 | open() { 78 | if ( this.isOpen || this.isAnimating ) return; 79 | this.isOpen = true; 80 | this.isAnimating = true; 81 | 82 | DOM.intro.style.pointerEvents = 'auto'; 83 | 84 | anime.remove(this.DOM.logoImg); 85 | anime({ 86 | targets: this.DOM.logoImg, 87 | translateY: [{value: '-400%', duration: 200, easing: 'easeOutQuad'}, {value: ['200%', '0%'], duration: 700, easing: 'easeOutExpo'}] 88 | }); 89 | 90 | anime.remove(this.animatableElems); 91 | anime({ 92 | targets: this.animatableElems, 93 | duration: 1200, 94 | delay: (t,i) => 350 + i*30, 95 | easing: 'easeOutExpo', 96 | translateX: '0%', 97 | opacity: { 98 | value: 1, 99 | easing: 'linear', 100 | duration: 400 101 | } 102 | }); 103 | 104 | const boxRect = this.DOM.el.getBoundingClientRect(); 105 | anime.remove(this.DOM.el); 106 | anime({ 107 | targets: this.DOM.el, 108 | scaleX: {value: winsize.width/boxRect.width, duration: 700, delay: 300, easing: 'easeOutExpo'}, 109 | scaleY: {value: winsize.height/boxRect.height, duration: 300, easing: 'easeOutQuad'}, 110 | complete: () => this.isAnimating = false 111 | }); 112 | } 113 | close() { 114 | if ( !this.isOpen || this.isAnimating ) return; 115 | this.isOpen = false; 116 | this.isAnimating = true; 117 | 118 | DOM.intro.style.pointerEvents = 'none'; 119 | 120 | anime.remove(this.DOM.logoImg); 121 | anime({ 122 | targets: this.DOM.logoImg, 123 | translateY: [{value: '-400%', duration: 300, easing: 'easeOutQuad'}, {value: ['200%', '0%'], duration: 700, easing: 'easeOutExpo'}], 124 | rotate: [{value: 0, duration: 300}, {value: [90,0], duration: 1300, easing: 'easeOutElastic'}] 125 | }); 126 | 127 | anime.remove(this.animatableElems); 128 | anime({ 129 | targets: this.animatableElems, 130 | duration: 150, 131 | easing: 'easeOutQuad', 132 | translateX: '-30%', 133 | opacity: 0 134 | }); 135 | 136 | anime.remove(this.DOM.el); 137 | anime({ 138 | targets: this.DOM.el, 139 | duration: 1000, 140 | scaleX: {value: 1, duration: 300, easing: 'easeOutQuad'}, 141 | scaleY: {value: 1, duration: 700, delay: 300, easing: 'easeOutExpo'}, 142 | complete: () => this.isAnimating = false 143 | }); 144 | 145 | anime.remove(DOM.slideshowImages); 146 | anime({ 147 | targets: DOM.slideshowImages, 148 | duration: 1000, 149 | delay: (t,i) => i*60, 150 | easing: 'easeOutCubic', 151 | scale: [1.5,1] 152 | }); 153 | anime.remove(DOM.slideshowImagesWrappers); 154 | anime({ 155 | targets: DOM.slideshowImagesWrappers, 156 | duration: 1000, 157 | delay: (t,i) => i*60, 158 | easing: 'easeOutCubic', 159 | translateY: ['10%','0%'] 160 | }); 161 | } 162 | } 163 | 164 | const panel = new Panel(DOM.intro.querySelector('.intro__box')); 165 | } 166 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Collapsing Logo Effect | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 33 |
34 |
35 |
36 | 41 | 42 |

Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever. Learn more

43 |
44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 | #1 52 |
53 |

Werry & Smith

54 |

Technical portfolio design and implementation

55 |
56 |
57 |
58 |
59 |
60 |
61 | #2 62 |
63 |

Gimpson Technology

64 |

Future technology assessment and consultation

65 |
66 |
67 | 77 |
78 |
79 |
80 | 81 |
82 | 85 |
86 |

Vonnov

87 |
88 |

Collapsing Logo Effect

89 |

Inspired by practicalvr

90 |
91 |
92 | 93 | 94 |
95 | Enter 96 |
97 |
98 |

Philosophy

99 |

Banjo ethical readymade, microdosing subway tile pinterest glossier put a bird on it retro direct trade blog tumeric wayfarers mustache

100 |

Thundercats hella sartorial occupy portland DIY raclette mlkshk poke DIY chambray franzen tattooed thundercats master

101 |
102 |
103 |

About

104 |

We are a quadruple award winning hyper active super duper cryptocurrency consultation and technology assessment firm that will help you understand what's going on in the present and future of finances

105 |
106 |
9529 Vernon Court, New York, NY 10027
107 | 111 | GitHub 112 |
113 |
114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700'); 2 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | --color-text: #000; 11 | --color-bg: #fff; 12 | --color-link: #000; 13 | --color-link-hover: #000; 14 | --color-logo-bg: #a09f92; 15 | font-family: 'Inconsolata', monospace; 16 | height: 100vh; 17 | color: var(--color-text); 18 | background-color: var(--color-bg); 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | } 22 | 23 | .js .loading::before { 24 | content: ''; 25 | position: fixed; 26 | z-index: 100000; 27 | top: 0; 28 | left: 0; 29 | width: 100%; 30 | height: 100%; 31 | background: var(--color-logo-bg); 32 | } 33 | 34 | a { 35 | text-decoration: none; 36 | color: var(--color-link); 37 | outline: none; 38 | } 39 | 40 | a:hover, 41 | a:focus { 42 | color: var(--color-link-hover); 43 | outline: none; 44 | } 45 | 46 | .hidden { 47 | position: absolute; 48 | overflow: hidden; 49 | width: 0; 50 | height: 0; 51 | pointer-events: none; 52 | } 53 | 54 | /* Icons */ 55 | .icon { 56 | display: block; 57 | width: 1.5rem; 58 | height: 1.5rem; 59 | margin: 0 auto; 60 | fill: currentColor; 61 | } 62 | 63 | .icon--inline { 64 | display: inline-block; 65 | width: 0.75em; 66 | height: 0.65em; 67 | } 68 | 69 | .icon--light { 70 | color: #5cad7c; 71 | } 72 | 73 | main { 74 | position: relative; 75 | width: 100%; 76 | } 77 | 78 | .content { 79 | width: 100%; 80 | position: relative; 81 | } 82 | 83 | .no-js .content { 84 | top: 100vh; 85 | } 86 | 87 | .intro { 88 | position: fixed; 89 | top: 0; 90 | left: 0; 91 | width: 100%; 92 | height: 100%; 93 | padding: 2rem; 94 | display: flex; 95 | flex-direction: column; 96 | align-items: center; 97 | } 98 | 99 | .no-js .intro { 100 | position: absolute; 101 | } 102 | 103 | .intro__box, 104 | .intro__logo { 105 | position: absolute; 106 | top: 0; 107 | left: 0; 108 | width: 80px; 109 | height: 80px; 110 | background: var(--color-logo-bg); 111 | opacity: 1; 112 | } 113 | 114 | .intro__box { 115 | transform-origin: 0 0; 116 | z-index: 0; 117 | } 118 | 119 | .no-js .intro__box { 120 | width: 100%; 121 | height: 100vh; 122 | } 123 | 124 | .intro__logo { 125 | background: transparent; 126 | display: flex; 127 | align-items: center; 128 | color: #000; 129 | pointer-events: auto; 130 | cursor: pointer; 131 | } 132 | 133 | .icon--arrowup { 134 | width: 1.25rem; 135 | height: 1.25rem; 136 | } 137 | 138 | .intro__logo-text { 139 | font-weight: normal; 140 | position: absolute; 141 | width: 100%; 142 | top: 100%; 143 | text-align: center; 144 | margin: 0; 145 | padding: 0.25rem 0 0 0; 146 | font-size: 0.85rem; 147 | opacity: 0; 148 | } 149 | 150 | .intro__title-wrap { 151 | text-align: center; 152 | position: relative; 153 | z-index: 100; 154 | margin-top: 6rem; 155 | } 156 | 157 | .intro__title { 158 | font-size: 10vw; 159 | letter-spacing: -0.15rem; 160 | margin: 0 0 1.5rem; 161 | line-height: 0.5; 162 | text-transform: lowercase; 163 | } 164 | 165 | .intro__subtitle-wrap { 166 | text-transform: lowercase; 167 | } 168 | 169 | .intro__subtitle { 170 | margin: 0; 171 | font-size: 0.85rem; 172 | } 173 | 174 | .intro__info { 175 | margin: 0 0 1rem 0; 176 | font-size: 0.85rem; 177 | } 178 | 179 | .codrops-icon { 180 | color: #000; 181 | display: inline-block; 182 | } 183 | 184 | .codrops-icon:hover { 185 | opacity: 0.7; 186 | } 187 | 188 | .intro__enter { 189 | text-transform: lowercase; 190 | margin: 5vh 0 0 0; 191 | padding: 1rem 0 0 0; 192 | display: inline-block; 193 | cursor: pointer; 194 | color: #980a0a; 195 | } 196 | 197 | .intro__enter:hover { 198 | color: #000; 199 | } 200 | 201 | .no-js .intro__enter { 202 | display: none; 203 | } 204 | 205 | .intro__github { 206 | text-transform: lowercase; 207 | position: relative; 208 | font-size: 0.85rem; 209 | } 210 | 211 | .intro__content { 212 | position: relative; 213 | text-align: center; 214 | max-width: 300px; 215 | margin: 0 auto; 216 | } 217 | 218 | .intro__content--second { 219 | display: none; 220 | } 221 | 222 | .intro__content-title { 223 | text-transform: lowercase; 224 | font-size: 1.5rem; 225 | line-height: 0.5; 226 | font-weight: normal; 227 | display: none; 228 | margin: 0; 229 | } 230 | 231 | .intro__content-title::before { 232 | content: '\2015'; 233 | margin: 0 1rem 0; 234 | font-size: 1.25rem; 235 | } 236 | 237 | .intro__content-text { 238 | font-size: 0.85rem; 239 | } 240 | 241 | .intro__location { 242 | display: flex; 243 | align-items: center; 244 | justify-content: center; 245 | position: relative; 246 | font-size: 0.85rem; 247 | } 248 | 249 | .intro__social { 250 | display: flex; 251 | align-items: center; 252 | justify-content: center; 253 | position: relative; 254 | font-size: 0.85rem; 255 | margin: 1rem 0; 256 | } 257 | 258 | .intro__social-item { 259 | text-transform: lowercase; 260 | margin: 0 1rem; 261 | } 262 | 263 | .sidebar { 264 | display: flex; 265 | flex-direction: column; 266 | justify-content: space-between; 267 | } 268 | 269 | .menu { 270 | margin: 1rem 1rem 1rem 6rem; 271 | display: flex; 272 | } 273 | 274 | .menu__item { 275 | color: #aaa; 276 | display: block; 277 | margin: 0 1rem 0 0; 278 | } 279 | 280 | .menu__item--current { 281 | color: #000; 282 | } 283 | 284 | .slideshow { 285 | flex: 1; 286 | } 287 | 288 | .slideshow__item { 289 | position: relative; 290 | margin: 2rem 0 0 auto; 291 | border-bottom: 1px solid #f3f3f3; 292 | } 293 | 294 | .slideshow__item::after { 295 | content: '+'; 296 | position: absolute; 297 | bottom: 0; 298 | right: calc(75vh + 4rem); 299 | margin: 1rem; 300 | font-size: 2rem; 301 | line-height: 0.5; 302 | } 303 | 304 | .slideshow__item--featured { 305 | margin-top: 0; 306 | } 307 | 308 | .slideshow__item-number { 309 | position: absolute; 310 | top: 0; 311 | right: 0; 312 | font-size: 1.15rem; 313 | margin: 1rem 1rem 0 0; 314 | } 315 | 316 | .slideshow__item-title { 317 | font-size: 1.5rem; 318 | font-weight: normal; 319 | position: relative; 320 | padding: 0 0 0 4rem; 321 | margin: 0.5rem 0 0 0; 322 | } 323 | 324 | .slideshow__item-title--larger { 325 | font-size: 1.85rem; 326 | } 327 | 328 | .slideshow__item-subtitle { 329 | color: #000; 330 | max-width: 200px; 331 | margin: 0.5rem 0 0 1rem; 332 | } 333 | 334 | .slideshow__item-title::before { 335 | content: ''; 336 | position: absolute; 337 | top: 55%; 338 | left: 0; 339 | margin: 0 1rem 0; 340 | height: 1px; 341 | width: 2rem; 342 | background: #000; 343 | } 344 | 345 | .slideshow__item-img { 346 | width: 45vh; 347 | height: 45vh; 348 | max-width: 100vw; 349 | max-height: 77vh; 350 | margin: 0 0 0 auto; 351 | overflow: hidden; 352 | } 353 | 354 | .slideshow__item-img--larger { 355 | width: 75vh; 356 | height: 75vh; 357 | } 358 | 359 | .slideshow__item-img-inner { 360 | background-size: cover; 361 | background-position: 50% 50%; 362 | width: 100%; 363 | height: 100%; 364 | } 365 | 366 | .slideshow__item-titlewrap { 367 | position: absolute; 368 | bottom: 3rem; 369 | width: 100%; 370 | left: 0; 371 | padding: 1rem; 372 | } 373 | 374 | .slideshow__nav { 375 | display: none; 376 | } 377 | 378 | .slideshow__nav-item { 379 | cursor: default; 380 | background: #ddd; 381 | border: 0; 382 | height: 1.5rem; 383 | width: 1px; 384 | color: transparent; 385 | font-size: 0; 386 | padding: 0; 387 | display: block; 388 | margin-bottom: 0.5rem; 389 | position: relative; 390 | } 391 | 392 | .slideshow__nav-item:focus { 393 | outline: none; 394 | } 395 | 396 | .slideshow__nav-item--current { 397 | background: #333; 398 | } 399 | 400 | .pater { 401 | display: none; 402 | } 403 | 404 | .pater::before { 405 | content: '\2015 Sponsor'; 406 | word-spacing: -5px; 407 | margin: 0 0 0 0.15rem; 408 | color: #000; 409 | } 410 | 411 | .pater__description { 412 | font-size: 0.85rem; 413 | padding: 0.5rem 1rem 1rem 1rem; 414 | color: #aaa; 415 | margin: 0; 416 | } 417 | 418 | .pater__description strong { 419 | color: #000; 420 | font-weight: normal; 421 | } 422 | 423 | .pater__img-inner { 424 | background: url(../img/Divi.jpg) no-repeat 50% 50%; 425 | height: 25vh; 426 | width: 100%; 427 | background-size: cover; 428 | } 429 | 430 | @media screen and (min-width: 67em) { 431 | .intro { 432 | display: grid; 433 | align-items: start; 434 | grid-template-columns: repeat(4,25%); 435 | grid-template-rows: 40% 60%; 436 | } 437 | .intro__title { 438 | font-size: 5rem; 439 | } 440 | .intro__location { 441 | -webkit-writing-mode: vertical-rl; 442 | writing-mode: vertical-rl; 443 | grid-area: 2 / 4 / 2 / 4; 444 | align-self: start; 445 | justify-self: end; 446 | margin-bottom: 3rem; 447 | } 448 | .intro__content { 449 | max-width: none; 450 | text-align: right; 451 | } 452 | .intro__content--second { 453 | grid-area: 1 / 2 / 1 / 3; 454 | display: block; 455 | } 456 | .intro__content--forth { 457 | grid-area: 1 / 4 / 1 / 5; 458 | } 459 | .intro__content-title { 460 | display: block; 461 | } 462 | .intro__title-wrap { 463 | grid-area: 2 / 1 / 2 / 3; 464 | justify-self: end; 465 | align-self: stretch; 466 | text-align: right; 467 | margin: 0; 468 | display: flex; 469 | flex-direction: column; 470 | align-items: flex-end; 471 | } 472 | .intro__enter { 473 | margin: auto 0 0 0; 474 | } 475 | .intro__github { 476 | font-size: 1rem; 477 | align-self: end; 478 | justify-self: start; 479 | grid-area: 2 / 1 / 2 / 1; 480 | } 481 | .intro__social { 482 | grid-area: 2 / 4 / 2 / 4; 483 | align-self: end; 484 | justify-self: end; 485 | font-size: 1rem; 486 | margin: 0; 487 | } 488 | .intro__social-item { 489 | margin: 0 0 0 1rem; 490 | } 491 | .content { 492 | width: 100%; 493 | height: 100vh; 494 | overflow: hidden; 495 | position: relative; 496 | display: flex; 497 | } 498 | .sidebar { 499 | width: 280px; 500 | border-right: 1px solid #f3f3f3; 501 | } 502 | .menu { 503 | margin: 3rem 0.5rem 0 auto; 504 | -webkit-writing-mode: vertical-rl; 505 | writing-mode: vertical-rl; 506 | transform: rotate3d(0,0,1,180deg); 507 | display: flex; 508 | } 509 | .menu__item { 510 | margin: 1.5rem 0 0 0; 511 | } 512 | .pater { 513 | display: block; 514 | } 515 | .slideshow__item { 516 | padding: 0 4rem 0 0; 517 | } 518 | .slideshow__item-number { 519 | right: 4rem; 520 | } 521 | .slideshow__item-title { 522 | font-size: 2rem; 523 | } 524 | .slideshow__item-titlewrap { 525 | top: 5vh; 526 | width: 75vh; 527 | right: 4rem; 528 | left: auto; 529 | padding: 0; 530 | } 531 | .slideshow__item-subtitle { 532 | color: #aaa; 533 | } 534 | .slideshow__item-titlewrap--featured { 535 | top: 10vh; 536 | right: 12rem; 537 | } 538 | .slideshow__item-title--larger { 539 | font-size: 3rem; 540 | } 541 | .slideshow__nav { 542 | position: absolute; 543 | right: 0; 544 | top: 0; 545 | width: 4rem; 546 | height: 75vh; 547 | justify-content: center; 548 | flex-direction: column; 549 | align-items: center; 550 | display: flex; 551 | } 552 | } 553 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2017 Julian Garnier 3 | Released under the MIT license 4 | */ 5 | var $jscomp={scope:{}};$jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(e,r,p){if(p.get||p.set)throw new TypeError("ES3 does not support getters and setters.");e!=Array.prototype&&e!=Object.prototype&&(e[r]=p.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_"; 6 | $jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.symbolCounter_=0;$jscomp.Symbol=function(e){return $jscomp.SYMBOL_PREFIX+(e||"")+$jscomp.symbolCounter_++}; 7 | $jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var e=$jscomp.global.Symbol.iterator;e||(e=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[e]&&$jscomp.defineProperty(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(e){var r=0;return $jscomp.iteratorPrototype(function(){return rb&&(b+=1);1b?c:b<2/3?a+(c-a)*(2/3-b)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a);a=parseInt(d[1])/360;var b=parseInt(d[2])/100,f=parseInt(d[3])/100,d=d[4]||1;if(0==b)f=b=a=f;else{var n=.5>f?f*(1+b):f+b-f*b,k=2*f-n,f=c(k,n,a+1/3),b=c(k,n,a);a=c(k,n,a-1/3)}return"rgba("+ 13 | 255*f+","+255*b+","+255*a+","+d+")"}function y(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a))return a[2]}function V(a){if(-1=g.currentTime)for(var G=0;G=w||!k)g.began||(g.began=!0,f("begin")),f("run");if(q>n&&q=k&&r!==k||!k)b(k),x||e();f("update");a>=k&&(g.remaining?(t=h,"alternate"===g.direction&&(g.reversed=!g.reversed)):(g.pause(),g.completed||(g.completed=!0,f("complete"),"Promise"in window&&(p(),m=c()))),l=0)}a=void 0===a?{}:a;var h,t,l=0,p=null,m=c(),g=fa(a);g.reset=function(){var a=g.direction,c=g.loop;g.currentTime= 25 | 0;g.progress=0;g.paused=!0;g.began=!1;g.completed=!1;g.reversed="reverse"===a;g.remaining="alternate"===a&&1===c?2:c;b(0);for(a=g.children.length;a--;)g.children[a].reset()};g.tick=function(a){h=a;t||(t=h);k((l+h-t)*q.speed)};g.seek=function(a){k(d(a))};g.pause=function(){var a=v.indexOf(g);-1=c&&0<=b&&1>=b){var e=new Float32Array(11);if(c!==d||b!==f)for(var k=0;11>k;++k)e[k]=a(.1*k,c,b);return function(k){if(c===d&&b===f)return k;if(0===k)return 0;if(1===k)return 1;for(var h=0,l=1;10!==l&&e[l]<=k;++l)h+=.1;--l;var l=h+(k-e[l])/(e[l+1]-e[l])*.1,n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(.001<=n){for(h=0;4>h;++h){n=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(0===n)break;var m=a(l,c,b)-k,l=l-m/n}k=l}else if(0=== 29 | n)k=l;else{var l=h,h=h+.1,g=0;do m=l+(h-l)/2,n=a(m,c,b)-k,0++g);k=m}return a(k,d,f)}}}}(),Q=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var c="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25, 30 | .46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},b={linear:A(.25,.25,.75,.75)},f={},e;for(e in d)f.type=e,d[f.type].forEach(function(a){return function(d,f){b["ease"+a.type+c[f]]=h.fnc(d)? 31 | d:A.apply($jscomp$this,d)}}(f)),f={type:f.type};return b}(),ha={css:function(a,c,d){return a.style[c]=d},attribute:function(a,c,d){return a.setAttribute(c,d)},object:function(a,c,d){return a[c]=d},transform:function(a,c,d,b,f){b[f]||(b[f]=[]);b[f].push(c+"("+d+")")}},v=[],B=0,ia=function(){function a(){B=requestAnimationFrame(c)}function c(c){var b=v.length;if(b){for(var d=0;db&&(c.duration=d.duration);c.children.push(d)});c.seek(0);c.reset();c.autoplay&&c.restart();return c};return c};q.random=function(a,c){return Math.floor(Math.random()*(c-a+1))+a};return q}); --------------------------------------------------------------------------------