truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3ad69677d84ea0d6cf7c0b76061c880567405018
citrus/resources/views/templates/neler-yapariz/sections/slider.blade.php
T

278 lines
19 KiB
PHP
Raw Blame History

<section id="slider" class="sec">
<div data-animate="slider" class="comp slider-w">
<div class="slider-ctrls-w">
<div data-slider="progress" class="slider-progress-w">
<div class="progress-bar" style="width: 25%;"></div>
</div>
</div>
<ul data-slider="slides" role="list" class="slides w-list-unstyled"
style="touch-action: pan-y; cursor: grab; user-select: none;">
<li class="slide-outer"
style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);">
<div class="slide" style="touch-action: pan-y;">
<div class="slide-col flex-ve" style="touch-action: pan-y;">
<div style="touch-action: pan-y;">Precise</div>
<div class="slide-text-block" style="touch-action: pan-y;">
<h3 class="font-c size-md" style="touch-action: pan-y;">ACTIONS</h3>
<div style="touch-action: pan-y;">GSAP turns clicks into vivid stories with precise motion,
making every interaction feel intentional and alive.</div>
</div>
</div>
<div class="slide-col" style="touch-action: pan-y;">
<div class="slide-img" style="touch-action: pan-y;">
<div class="dual-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210bec12b45a849356ced_face-3.avif"
loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif"
loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;">
</div>
</div>
</div>
</div>
</li>
<li class="slide-outer current"
style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);">
<div class="slide" style="touch-action: pan-y;">
<div class="slide-col flex-ve" style="touch-action: pan-y;">
<div style="touch-action: pan-y;">Focus</div>
<div class="slide-text-block" style="touch-action: pan-y;">
<h3 class="font-c size-md" style="touch-action: pan-y;">ATTENTION</h3>
<div style="touch-action: pan-y;">GSAP sharpens focus with smooth animations, drawing
attention to your message for a lasting, memorable impact.</div>
</div>
</div>
<div class="slide-col" style="touch-action: pan-y;">
<div class="slide-img" style="touch-action: pan-y;">
<div class="dual-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210befd586a86f7da095a_face-2.avif"
loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif"
loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;">
</div>
</div>
</div>
</div>
</li>
<li class="slide-outer"
style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);">
<div class="slide" style="touch-action: pan-y;">
<div class="slide-col flex-ve" style="touch-action: pan-y;">
<div style="touch-action: pan-y;">Expressive</div>
<div class="slide-text-block" style="touch-action: pan-y;">
<h3 class="font-c size-md" style="touch-action: pan-y;">Motion</h3>
<div style="touch-action: pan-y;">GSAP infuses elements with expressive motion, transforming
static pages into emotional, engaging journeys.</div>
</div>
</div>
<div class="slide-col" style="touch-action: pan-y;">
<div class="slide-img" style="touch-action: pan-y;">
<div class="dual-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be0b24dede691834f1_face-1.avif"
loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif"
loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;">
</div>
</div>
</div>
</div>
</li>
<li class="slide-outer"
style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);">
<div class="slide" style="touch-action: pan-y;">
<div class="slide-col flex-ve" style="touch-action: pan-y;">
<div style="touch-action: pan-y;">Powerful</div>
<div class="slide-text-block" style="touch-action: pan-y;">
<h3 class="font-c size-md" style="touch-action: pan-y;">IMPACT</h3>
<div style="touch-action: pan-y;">GSAP delivers animations with powerful impact, ensuring
your story resonates clearly and leaves a mark.</div>
</div>
</div>
<div class="slide-col" style="touch-action: pan-y;">
<div class="slide-img" style="touch-action: pan-y;">
<div class="dual-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be710d60755f407cac_face-4.avif"
loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif"
loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;">
</div>
</div>
</div>
</div>
</li>
<li class="slide-outer"
style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);">
<div class="slide" style="touch-action: pan-y;">
<div class="slide-col flex-ve" style="touch-action: pan-y;">
<div style="touch-action: pan-y;">Seamless</div>
<div class="slide-text-block" style="touch-action: pan-y;">
<h3 class="font-c size-md" style="touch-action: pan-y;">FLOW</h3>
<div style="touch-action: pan-y;">GSAP crafts seamless flow in motion, syncing with users to
create natural, captivating interactions.</div>
</div>
</div>
<div class="slide-col" style="touch-action: pan-y;">
<div class="slide-img" style="touch-action: pan-y;">
<div class="dual-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be320f33da1bb17f66_face-5.avif"
loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif"
loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;">
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="slider-ctrls-w">
<button data-slider="prev" class="btn arrow">
<div data-wf--u-arrow-button--variant="flip" class="arrow-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none"
class="svg arrow w-variant-352da3df-a236-ccac-dbb8-8845a582a471">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z"
fill="currentColor"></path>
</svg>
</div>
</button>
<ul data-slider="dots" role="list" class="dots-w w-list-unstyled">
<li><button class="btn slider-dot"></button></li>
<li><button class="btn slider-dot current"></button></li>
<li><button class="btn slider-dot"></button></li>
<li><button class="btn slider-dot"></button></li>
<li><button class="btn slider-dot"></button></li>
</ul>
<button data-slider="next" class="btn arrow">
<div data-wf--u-arrow-button--variant="base" class="arrow-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none"
class="svg arrow">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z"
fill="currentColor"></path>
</svg>
</div>
</button>
</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">Endless by design</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">Ideal for smooth marquees, auto playing sliders, and loops that just
keep rolling.</p>
</div>
</div>
</div>
<div class="explainer-copy-btn-w">
<button data-module="copybtn"
data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c885ad5b6f59e2efe1_slider-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"
style="translate: none; rotate: none; scale: none; transform: rotate(360deg);">
<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="inertia" data-animate="inertia" class="sec inertia"
style="transform-style: preserve-3d; perspective: 5000px; touch-action: pan-y; cursor: grab; user-select: none;">
<div data-inertia="item" class="comp inertia" style="transform-style: preserve-3d; touch-action: pan-y;">
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(127.949px, 0px, -809.47px) rotateY(-218.664deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be6408118620403e9a0_run1.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-74.5137px, 0px, -840.321px) rotateY(-158.664deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be61c6cd36ab183dfcb_run2.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-202.463px, 0px, -680.408px) rotateY(-98.664deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be69e11d4352fe75f35_run3.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-127.949px, 0px, -489.645px) rotateY(-38.664deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be611882842b65d0cde_run4.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(74.5137px, 0px, -458.794px) rotateY(21.336deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be65c4395c2a01bca17_run5.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div class="inertia-slide"
style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(202.463px, 0px, -618.706px) rotateY(81.336deg); transform-origin: 50% 50%;">
<img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be64f5f29ef20ed7ccc_run6.avif"
loading="lazy" alt="" class="img-full" style="touch-action: pan-y;">
</div>
<div
style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; cursor: grab; translate: none; rotate: none; scale: none; touch-action: pan-y;">
</div>
</div>
<div class="explainer-w" style="touch-action: pan-y;">
<div data-module="explainer" data-css="explainer" class="explainer-comp" style="touch-action: pan-y;">
<label class="div" style="touch-action: pan-y;">
<input type="checkbox" class="input" style="touch-action: pan-y;">
<span class="span" style="touch-action: pan-y;">
<div class="explainer-he" style="touch-action: pan-y;">Feel the inertia</div>
<div class="plus-icon-w" style="touch-action: pan-y;">
<div class="plus-line rotate" style="touch-action: pan-y;"></div>
<div class="plus-line" style="touch-action: pan-y;"></div>
</div>
</span>
</label>
<div data-css="" class="explainer-expandable-w" style="touch-action: pan-y;">
<div class="explainer-overflow" style="touch-action: pan-y;">
<div class="explainer-content-w" style="touch-action: pan-y;">
<p class="explainer-par" style="touch-action: pan-y;">Continue movement from a given speed, slow
naturally to a stop. Perfect for adding physicality and flow to your interface.</p>
</div>
</div>
</div>
<div class="explainer-copy-btn-w" style="touch-action: pan-y;">
<button data-module="copybtn"
data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7ef67f371639c0386_inertia-final.json.txt"
class="btn copy" style="touch-action: pan-y;">
<div class="btn-cent-w" style="touch-action: pan-y;">
<div class="text-block" style="touch-action: pan-y;">Copy this</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none"
class="svg copy-icon" style="touch-action: pan-y;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z"
fill="currentColor" style="touch-action: pan-y;"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"
style="touch-action: pan-y;"></path>
</svg>
</div>
</button>
</div>
<div class="mobile-explainer-prompt" style="touch-action: pan-y;">Copy this on Desktop</div>
</div>
</div>
<div class="code-block w-embed w-script" style="touch-action: pan-y;">
<script style="touch-action: pan-y;">
Reference in New Issue View Git Blame Copy Permalink