{"id":1328,"date":"2025-04-12T23:52:41","date_gmt":"2025-04-12T20:52:41","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?landing_page=etkilesimli-daireler-hero-tasarimi"},"modified":"2025-04-12T23:52:41","modified_gmt":"2025-04-12T20:52:41","slug":"etkilesimli-daireler-hero-tasarimi","status":"publish","type":"landing_page","link":"https:\/\/mudosdigital.com\/tr\/store\/etkilesimli-daireler-hero-tasarimi\/","title":{"rendered":"Etkile\u015fimli Daireler Hero Tasar\u0131m\u0131"},"content":{"rendered":"


\n
\n
\n
\n
\n Etkile\u015fimli Daireler Hero Tasar\u0131m\u0131<\/title><br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n \/* Font tan\u0131m\u0131 *\/\n body {\n font-family: 'Inter', sans-serif;\n cursor: default;\n }\n \/* Hero konteyneri ve CSS De\u011fi\u015fkenleri *\/\n .hero-container {\n position: relative;\n overflow: hidden;\n \/* Normalle\u015ftirilmi\u015f fare konumu (-1 ile 1 aras\u0131) *\/\n --mouse-x-norm: 0;\n --mouse-y-norm: 0;\n }<\/p>\n<p> \/* Etkile\u015fimli daireler *\/\n .interactive-circle {\n position: absolute;\n border-radius: 50%;\n \/* Renk kar\u0131\u015f\u0131m modu (koyu arka planda iyi \u00e7al\u0131\u015f\u0131r) *\/\n mix-blend-mode: screen; \/* veya lighten, color-dodge *\/\n \/* Ge\u00e7i\u015f efekti *\/\n transition: transform 0.2s ease-out, background 0.2s ease-out;\n will-change: transform;\n \/* Ba\u015flang\u0131\u00e7 pozisyonu (Tailwind ile ayarlanabilir veya burada) *\/\n }<\/p>\n<p> \/* Her daire i\u00e7in farkl\u0131 transform\/etki *\/\n \/* calc() ve CSS de\u011fi\u015fkenleri ile dinamik stil *\/\n .circle-1 {\n transform: translate(\n calc(var(--mouse-x-norm) * -30px),\n calc(var(--mouse-y-norm) * -25px)\n ) scale(1.1);\n }\n .circle-2 {\n transform: translate(\n calc(var(--mouse-x-norm) * 20px),\n calc(var(--mouse-y-norm) * 35px)\n ) scale(0.9);\n transition-delay: 0.05s; \/* Hafif gecikme *\/\n }\n .circle-3 {\n transform: translate(\n calc(var(--mouse-x-norm) * -15px),\n calc(var(--mouse-y-norm) * 15px)\n ) scale(1.05);\n transition-delay: 0.1s;\n }\n .circle-4 {\n transform: translate(\n calc(var(--mouse-x-norm) * 40px),\n calc(var(--mouse-y-norm) * -10px)\n ) scale(0.95);\n transition-delay: 0.02s;\n }\n .circle-5 {\n transform: translate(\n calc(var(--mouse-x-norm) * -25px),\n calc(var(--mouse-y-norm) * 25px)\n ) scale(1);\n transition-delay: 0.08s;\n }\n .circle-6 {\n transform: translate(\n calc(var(--mouse-x-norm) * 10px),\n calc(var(--mouse-y-norm) * -30px)\n ) scale(1.15);\n transition-delay: 0.04s;\n }<\/p>\n<\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-950\"> <\/p>\n<section id=\"hero-container\" class=\"hero-container relative w-full min-h-screen flex items-center justify-center text-white p-8\">\n<div class=\"absolute inset-0 z-0 opacity-60 filter blur-lg\">\n<div class=\"interactive-circle circle-1 w-64 h-64 top-[10%] left-[15%] bg-gradient-to-br from-cyan-500 to-blue-600\"><\/div>\n<div class=\"interactive-circle circle-2 w-80 h-80 top-[50%] left-[30%] bg-gradient-to-br from-pink-500 to-purple-600\"><\/div>\n<div class=\"interactive-circle circle-3 w-56 h-56 top-[25%] right-[10%] bg-gradient-to-br from-yellow-400 to-orange-500\"><\/div>\n<div class=\"interactive-circle circle-4 w-72 h-72 bottom-[5%] left-[5%] bg-gradient-to-br from-lime-400 to-emerald-500\"><\/div>\n<div class=\"interactive-circle circle-5 w-96 h-96 bottom-[15%] right-[15%] bg-gradient-to-br from-red-500 to-rose-600\"><\/div>\n<div class=\"interactive-circle circle-6 w-48 h-48 top-[60%] right-[40%] bg-gradient-to-br from-indigo-400 to-violet-500\"><\/div>\n<\/p><\/div>\n<div class=\"relative z-10 text-center max-w-3xl mx-auto\">\n<h1 class=\"text-5xl sm:text-6xl md:text-7xl font-black mb-6 leading-tight drop-shadow-lg\">\n Ak\u0131\u015fkan Geometri<br \/>\n <\/h1>\n<p class=\"text-lg md:text-xl text-gray-200 mb-10 font-light drop-shadow-sm\">\n Farenizle renkleri ve formlar\u0131 y\u00f6nlendirin, dinamik ve estetik bir deneyim ya\u015fay\u0131n.\n <\/p>\n<p> <a href=\"#akis\"\n class=\"inline-block bg-white\/10 hover:bg-white\/20 backdrop-blur-md border border-white\/20 text-white font-semibold py-3 px-10 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white\/40 focus:ring-offset-2 focus:ring-offset-gray-950\"><br \/>\n Ak\u0131\u015f\u0131 Hisset<br \/>\n <\/a>\n <\/div>\n<\/section>\n<p> <script>\n \/\/ JavaScript ile Fare Hareketine G\u00f6re CSS De\u011fi\u015fkenlerini G\u00fcncelleme\n const heroContainer = document.getElementById('hero-container');<\/p>\n<p> heroContainer.addEventListener('mousemove', (e) => {\n \/\/ Pencere boyutlar\u0131n\u0131 al\n const winWidth = window.innerWidth;\n const winHeight = window.innerHeight;<\/p>\n<p> \/\/ Fare konumunu al\n const mouseX = e.clientX;\n const mouseY = e.clientY;<\/p>\n<p> \/\/ Fare konumunu -1 ile 1 aras\u0131na normalle\u015ftir (merkez 0,0)\n const normX = (mouseX \/ winWidth) * 2 - 1;\n const normY = (mouseY \/ winHeight) * 2 - 1;<\/p>\n<p> \/\/ CSS de\u011fi\u015fkenlerini g\u00fcncelle\n heroContainer.style.setProperty('--mouse-x-norm', normX);\n heroContainer.style.setProperty('--mouse-y-norm', normY);\n });<\/p>\n<p> \/\/ Fare ayr\u0131ld\u0131\u011f\u0131nda s\u0131f\u0131rla (iste\u011fe ba\u011fl\u0131 - ortada kalmas\u0131 i\u00e7in)\n heroContainer.addEventListener('mouseleave', () => {\n heroContainer.style.setProperty('--mouse-x-norm', 0);\n heroContainer.style.setProperty('--mouse-y-norm', 0);\n });\n <\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1328","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1328"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1328"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1328"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}