Ümit Tunç
1 line
7.6 KiB
PHP
1 line
7.6 KiB
PHP
</script></div></header><div id="content" class=""><section id="flip" data-animate="flip" class="sec reorganise"><div data-flip="toggle" class="flip-btn-w"><button class="btn flip-switch-btn current"><div>List</div></button><button class="btn flip-switch-btn"><div>Grid</div></button></div><div class="layer"></div><div class="comp"><ul data-flip="item" role="list" class="flip-list-w list w-list-unstyled"><li><div class="flip-item"><div class="item-num">01</div><h3 class="font-c size-md _w-ch">Hover States</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120df9971b76e21f8f7c84_watch.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ded8c04e7653f096b22_watch-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-2"><div class="item-num">02</div><h3 class="font-c size-md _w-ch">ResizinG Elements</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1abd39b1b06a80e01_can.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1d6f535075c963b92_can-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-3"><div class="item-num">03</div><h3 class="font-c size-md _w-ch">Timeline Control</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120f6ca7fe3207b1fc9b6c_chair.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec0e482fc7aaa80dfff_chair-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-4"><div class="item-num">04</div><h3 class="font-c size-md _w-ch">Shuffling positions</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1f3c2a581cf55e3a7_socks.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1e289d92b32665f96_socks-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-5"><div class="item-num">05</div><h3 class="font-c size-md _w-ch">Sequenced Motion</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120f682785240f2c98a343_headphones.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec0d96d6954095e252a_headphones-shadows.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li><li><div class="flip-item is-6"><div class="item-num">06</div><h3 class="font-c size-md _w-ch">FLEXIBLE LAYOUTS</h3><div class="abs-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120fa8f48810a5b328c7a4_tomato.avif" loading="eager" alt="" class="dual-img-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68120ec1fdd37f3577bdedb8_tomato-shadow.avif" loading="eager" alt="" class="dual-img-shadow"></div></div></div></li></ul></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Make Show and Tell Flexible</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Create seamless transitions between two visual states smoothly, not instantly. It removes the visual chaos when layouts shift, making things feel smooth, considered, and intentional.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c8e5f450bdf4878517_flip-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div></section><section id="scrolltrigger" data-animate="videogrow" class="sec scrolltrigger-sec"><div class="sticky-w"><div class="comp video"><div data-videogrow="title" class="font-c size-screen overflow-cut" aria-label="Scrolltrigger"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">c</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">o</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div></div></div><div class="layer"><div data-videogrow="video" class="sky-scroller" style="translate: none; rotate: none; scale: none; transform: scale(0.9, 0.9); clip-path: inset(0%);"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif" loading="lazy" sizes="(max-width: 1198px) 100vw, 1198px" srcset="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky-p-500.avif 500w, https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif 1198w" alt="" class="img-sky" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);"></div></div></div><div class="layer flex-b z-3"><div class="code-block w-embed w-script"><script> |