diff --git a/public/assets/img/gsap/iot.png b/public/assets/img/gsap/iot.png new file mode 100644 index 0000000..a99a2eb Binary files /dev/null and b/public/assets/img/gsap/iot.png differ diff --git a/public/assets/img/gsap/parallax-web-site.png b/public/assets/img/gsap/parallax-web-site.png new file mode 100644 index 0000000..82a4d7b Binary files /dev/null and b/public/assets/img/gsap/parallax-web-site.png differ diff --git a/public/assets/img/gsap/semantik-web.png b/public/assets/img/gsap/semantik-web.png new file mode 100644 index 0000000..195faa3 Binary files /dev/null and b/public/assets/img/gsap/semantik-web.png differ diff --git a/public/assets/img/gsap/yapay-zeka.png b/public/assets/img/gsap/yapay-zeka.png new file mode 100644 index 0000000..b24e61c Binary files /dev/null and b/public/assets/img/gsap/yapay-zeka.png differ diff --git a/resources/views/templates/neler-yapariz.blade.php b/resources/views/templates/neler-yapariz.blade.php index ee867a2..10da1a8 100644 --- a/resources/views/templates/neler-yapariz.blade.php +++ b/resources/views/templates/neler-yapariz.blade.php @@ -19,9 +19,7 @@
@include('templates.neler-yapariz.sections.hero') -
@include('templates.neler-yapariz.sections.flip') - @include('templates.neler-yapariz.sections.scrolltrigger') @include('templates.neler-yapariz.sections.slider') @include('templates.neler-yapariz.sections.inertia') @include('templates.neler-yapariz.sections.text') diff --git a/resources/views/templates/neler-yapariz/css/main.css b/resources/views/templates/neler-yapariz/css/main.css index d1fe4ea..d0f746b 100644 --- a/resources/views/templates/neler-yapariz/css/main.css +++ b/resources/views/templates/neler-yapariz/css/main.css @@ -2947,6 +2947,9 @@ body { ._w-ch { max-width: 41ch } +.explainer-comp { + display: none !important; +} .sub-nav-bg { background-color: var(--secondary); diff --git a/resources/views/templates/neler-yapariz/js/section-selector.js b/resources/views/templates/neler-yapariz/js/section-selector.js index 065f24b..adce80a 100644 --- a/resources/views/templates/neler-yapariz/js/section-selector.js +++ b/resources/views/templates/neler-yapariz/js/section-selector.js @@ -23,6 +23,30 @@ const createObserver = (section, cb) => { const sections = [...document.querySelectorAll("section")]; + // Navigation height'ini hesapla (logo height'i ve üst/alt boşluklar için) + const navWrapper = document.querySelector("[data-module='nav']"); + const navElement = navWrapper?.querySelector(".nav"); + const logoElement = navWrapper?.querySelector(".logo-banner-w"); + const getNavHeight = () => { + if (navWrapper && navElement) { + // Navigation element'inin toplam height'ini al (padding dahil) + const navHeight = navElement.offsetHeight; + + // Logo element'inin üstündeki boşluğu hesapla + if (logoElement) { + const logoRect = logoElement.getBoundingClientRect(); + const navRect = navElement.getBoundingClientRect(); + const topSpace = logoRect.top - navRect.top; + + // Logo height'i + üstündeki boşluk + altındaki boşluk + return navHeight + topSpace; + } + + return navHeight; + } + return 0; + }; + sections.forEach((section, index) => { createObserver(section, () => { items[currentIndex].classList.remove("current"); @@ -46,7 +70,15 @@ let flipAnimation = null items.forEach((item, index) => { item.addEventListener("click", () => { - lenis.scrollTo("#" + items[index].dataset.to); + const targetSection = document.getElementById(items[index].dataset.to); + if (targetSection) { + const navHeight = getNavHeight(); + lenis.scrollTo(targetSection, { + offset: -navHeight + }); + } else { + lenis.scrollTo("#" + items[index].dataset.to); + } }); item.addEventListener("mouseenter", () => { diff --git a/resources/views/templates/neler-yapariz/navigation.blade.php b/resources/views/templates/neler-yapariz/navigation.blade.php index 599e9bc..686a8ad 100644 --- a/resources/views/templates/neler-yapariz/navigation.blade.php +++ b/resources/views/templates/neler-yapariz/navigation.blade.php @@ -5,16 +5,16 @@
-
+
  • -
    Flip
    +
    {{t("Faaliyetlerimiz")}}
  • Scroll Trigger
  • -
    Slider
    +
    {{t("Yaptıklarımız")}}
  • diff --git a/resources/views/templates/neler-yapariz/sections/flip.blade.php b/resources/views/templates/neler-yapariz/sections/flip.blade.php index 3636cdd..1383d2a 100644 --- a/resources/views/templates/neler-yapariz/sections/flip.blade.php +++ b/resources/views/templates/neler-yapariz/sections/flip.blade.php @@ -1 +1,124 @@ -
  • 01

    Hover States

  • 02

    ResizinG Elements

  • 03

    Timeline Control

  • 04

    Shuffling positions

  • 05

    Sequenced Motion

  • 06

    FLEXIBLE LAYOUTS

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.

Copy this on Desktop
+ +
+ +
diff --git a/resources/views/templates/neler-yapariz/sections/slider.blade.php b/resources/views/templates/neler-yapariz/sections/slider.blade.php index ed5de4d..dbe53bf 100644 --- a/resources/views/templates/neler-yapariz/sections/slider.blade.php +++ b/resources/views/templates/neler-yapariz/sections/slider.blade.php @@ -1 +1,278 @@ -

Start animations when elements enter the viewport, scrub through timelines, pin elements in place, or snap to key points as users scroll.

Copy this on Desktop
  • Precise

    ACTIONS

    GSAP turns clicks into vivid stories with precise motion, making every interaction feel intentional and alive.
  • Focus

    ATTENTION

    GSAP sharpens focus with smooth animations, drawing attention to your message for a lasting, memorable impact.
  • Expressive

    Motion

    GSAP infuses elements with expressive motion, transforming static pages into emotional, engaging journeys.
  • Powerful

    IMPACT

    GSAP delivers animations with powerful impact, ensuring your story resonates clearly and leaves a mark.
  • Seamless

    FLOW

    GSAP crafts seamless flow in motion, syncing with users to create natural, captivating interactions.

Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.

Copy this on Desktop

Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.

Copy this on Desktop