citrus/resources/views/templates/neler-yapariz/sections/text.blade.php

</script></div></section><section id="text" class="sec"><ul role="list" class="comp text-exp w-list-unstyled"><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="chars" data-duration="1.2" class="text-effect-w" aria-label="Split Chars" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">C</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">h</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">a</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">s</div></div></div></div><div class="text-example-tx-w"><div>Character Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".2" data-animate="text" data-type="words" data-duration="1.2" class="text-effect-w" aria-label="Split By Words" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Split</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">By</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Words</div></div></div></div><div class="text-example-tx-w"><div>Word Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="scramble" data-duration="1.2" class="text-effect-w"><div class="text-effect-tx">niiyhgir</div></div></div><div class="text-example-tx-w"><div>Scramble Text Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="alpha" data-duration="1.2" class="text-effect-w" aria-label="Split Alpha"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">S</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">i</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">A</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">h</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">a</div></div></div></div><div class="text-example-tx-w"><div>Alpha Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="side" data-duration="1.2" class="text-effect-w" aria-label="From the Side"><div class="text-effect-tx" aria-label="From the Side"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">F</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">r</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">m</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">t</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">h</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">S</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">i</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">d</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div></div></div></div><div class="text-example-tx-w"><div>SIide Char Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="updown" data-duration="1.2" class="text-effect-w" aria-label="Up and Down"><div class="text-effect-tx" aria-label="Up and Down"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">U</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">p</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">a</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">n</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">d</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">D</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">w</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">n</div></div></div></div></div><div class="text-example-tx-w"><div>Up and down Reveal</div></div></li></ul><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">Split, animate, reveal</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">Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c873ab161c8499accd_text-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="marquee" data-animate="marquee" class="sec"><div class="comp scroller"><div data-marquee="line" class="scroller-line first" style="translate: none; rotate: none; scale: none; transform: translate(925.75px, 76.8px) rotate(-4.00022deg);"><div class="scroller-text">SCROLLTRIGGER</div><div class="marquee-img"><div class="dual-img"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68121015d96d6954095ef777_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 class="scroller-text"> MARQUEE</div></div><div data-marquee="line" class="scroller-line second" style="translate: none; rotate: none; scale: none; transform: translate(-925.75px, -115.2px) rotate(6.0001deg);"><div class="scroller-text"> MARQUEE</div><div class="marquee-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 class="scroller-text">SCROLLTRIGGER</div></div></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">Marquees forever</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">Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7bd787427ed9cbaa8_marquee-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><div class="code-block w-embed w-script"><script>