-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 9.64 KB
/
index.html
1
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Stack to Content Layout Transition | Codrops</title><meta name="description" content="An experimental layout transition where a stack of images animates to a gallery view, showing some more content."><meta name="keywords" content="stack, layout transition, menu, gallery, gsap, javascript"><meta name="author" content="Codrops"><link rel="icon shortcut" href="favicon.a64e97b2.ico"><link rel="stylesheet" href="https://use.typekit.net/mai4fgw.css"><link rel="stylesheet" type="text/css" href="index.d73f7ad5.css"><script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script><script src="//tympanus.net/codrops/adpacks/analytics.js"></script></head><body class="demo-1 loading"> <main> <div class="frame"> <div class="frame__title"> <h1 class="frame__title-main">Stack to Content Layout Transition</h1> <a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=63558"> <span class="oh__inner">Back to the article</span> <svg width="18px" height="18px" viewbox="0 0 24 24"><path fill-rule="evenodd" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path></svg> </a> <br> <a class="frame__title-prev" href="https://tympanus.net/Development/IntroTrailEffect/">Previous demo</a> </div> <div class="frame__logo"> <h2 class="frame__logo-title">Jonas Tanaka</h2> <span class="frame__logo-subtitle">フォトグラフィー</span> </div> </div> <div class="content"> <div class="content__item"> <h2 class="content__item-title"> <span class="oh"><span class="oh__inner">Queen of </span></span><span class="oh"><span class="oh__inner">the Sea</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Osaka, 1986</strong></p> <p class="oh"><span class="oh__inner">Hidesato felt very sorry for the Dragon King on hearing his story, and readily promised to do what he could to help him.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Hinata's</span></span><span class="oh"><span class="oh__inner">Trouble</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Kyoto, 1986</strong></p> <p class="oh"><span class="oh__inner">His power was immense, for he was the ruler of all sea creatures both great and small, and in his keeping were the Jewels of the Ebb and Flow of the Tide.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Dragon's</span></span><span class="oh"><span class="oh__inner">Journey</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Nagoya, 1986</strong></p> <p class="oh"><span class="oh__inner">Calling all his fish retainers together, he chose several of them as ambassadors to go through the sea and seek for a young Dragon Princess who would be his bride.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Prince</span></span><span class="oh"><span class="oh__inner">Yamato</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Tokyo, 1986</strong></p> <p class="oh"><span class="oh__inner">The King fell in love with her at once, and the wedding ceremony was celebrated with great splendor. </span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Kumaso</span></span><span class="oh"><span class="oh__inner">& Haru</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Sapporo, 1986</strong></p> <p class="oh"><span class="oh__inner">When the hare heard these kind words he felt very grateful to the man, and encouraged by his gentle manner the hare told him all that had befallen him.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Botan's</span></span><span class="oh"><span class="oh__inner">Dream</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Sendai, 1986</strong></p> <p class="oh"><span class="oh__inner">Okuni-nushi-no-Mikoto is worshiped by the people in some parts of Japan, as a god, and the hare has become famous as “The White Hare of Inaba”. </span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">The Gate</span></span><span class="oh"><span class="oh__inner">of Rashoi</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Kyoto, 1986</strong></p> <p class="oh"><span class="oh__inner">Nearly two thousand years ago this sword was kept at the shrines of Ite, the temples dedicated to the worship of Amaterasu, the great and beautiful Sun Goddess from whom the Japanese Emperors are said to be descended.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Faithful</span></span><span class="oh"><span class="oh__inner">Knights</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Kobe, 1986</strong></p> <p class="oh"><span class="oh__inner">At last King Keiko ordered his younger son Prince Yamato to subdue the brigands and, if possible, to rid the land of their evil lives.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Five Colors</span></span><span class="oh"><span class="oh__inner">for Jokwa</span></span></h2> <div class="content__item-description"> <p class="oh"><strong class="oh__inner">Hiroshima, 1986</strong></p> <p class="oh"><span class="oh__inner">There is a story of knightly adventure and daring which explains why the name of the sword was changed from that of Murakumo to Kasanagi, which means grass clearing.</span></p> </div> </div> <div class="content__item"> <h2 class="content__item-title"><span class="oh"><span class="oh__inner">Shikuyu's</span></span><span class="oh"><span class="oh__inner">Charm</span></span></h2> <div class="content__item-description"> <strong class="oh"><span class="oh__inner">Kumamoto, 1986</span></strong><p></p> <p class="oh"><span class="oh__inner">He at once made ready to start, and great was the stir in the precincts of the Palace as he and his trusty followers gathered together and prepared for the expedition, and polished up their armor and donned it.</span></p> </div> </div> <button class="content__back unbutton"> <svg aria-hidden="true" width="16px" height="16px" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.4939 20.5644C11.1821 20.8372 10.7083 20.8056 10.4356 20.4939L3.43557 12.4939C3.18814 12.2111 3.18814 11.7889 3.43557 11.5061L10.4356 3.50613C10.7083 3.1944 11.1822 3.16281 11.4939 3.43557C11.8056 3.70834 11.8372 4.18216 11.5644 4.49388L5.65283 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L5.65283 12.75L11.5644 19.5061C11.8372 19.8179 11.8056 20.2917 11.4939 20.5644Z"></path> </svg> <span class="oh__inner">Back</span> </button> <nav class="content__nav-wrap"> <button class="content__nav content__nav--prev unbutton"> <svg width="100" height="267" viewbox="0 0 100 267"><path d="M49.894 2.766v262.979" stroke-linecap="square"></path><path fill="none" d="M99.75 76.596C73.902 76.596 52.62 43.07 49.895 0 47.168 43.07 25.886 76.596.036 76.596"></path></svg> </button> <button class="content__nav content__nav--next unbutton"> <svg width="100" height="267" viewbox="0 0 100 267"><path d="M49.894 2.766v262.979" stroke-linecap="square"></path><path fill="none" d="M99.75 76.596C73.902 76.596 52.62 43.07 49.895 0 47.168 43.07 25.886 76.596.036 76.596"></path></svg> </button> </nav> </div> <div class="slides"></div> <div class="stack-wrap"> <div class="stack"> <div class="stack__item stack__item--empty"></div> <div class="stack__item" style="background-image:url(1.1770e3b3.jpg)"></div> <div class="stack__item" style="background-image:url(2.07ca36b5.jpg)"></div> <div class="stack__item" style="background-image:url(3.f6f48295.jpg)"></div> <div class="stack__item" style="background-image:url(4.516b9c03.jpg)"></div> <div class="stack__item" style="background-image:url(5.95d97ae8.jpg)"></div> <div class="stack__item" style="background-image:url(6.56a5d53b.jpg)"></div> <div class="stack__item" style="background-image:url(7.87dc6e8b.jpg)"></div> <div class="stack__item" style="background-image:url(8.0bda5054.jpg)"></div> <div class="stack__item" style="background-image:url(9.27ccf354.jpg)"></div> <div class="stack__item" style="background-image:url(10.f7990335.jpg)"></div> <div class="stack__item stack__item--empty"></div> </div> </div> <div class="title"> <h2 class="oh title__main"><span class="oh__inner">Photography</span></h2> <span class="oh title__sub"><span class="oh__inner">1986 — 2022</span></span> </div> </main> <script type="module" src="index.e9a2d1b4.js"></script><script src="index.b5e7c14d.js" nomodule="" defer></script> <script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script> </body></html>