Esnek Aral\u0131k Giri\u015fi<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <div class=\"range-container\">\n <input type=\"range\" id=\"elasticRange\" min=\"0\" max=\"100\" value=\"50\">\n <svg id=\"rangeSvg\" viewBox=\"0 0 500 100\"><\/svg>\n <\/div>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/animejs@3.2.1\/lib\/anime.min.js\"><\/script>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Yukar\u0131daki HTML yap\u0131s\u0131nda:<\/p>\n<p>* <code>range-container<\/code> div’i, aral\u0131k giri\u015fini ve SVG’yi sarmalayarak konumland\u0131rma ve stillendirme esnekli\u011fi sa\u011flar.<br \/>\n* <code><input type=\"range\" id=\"elasticRange\" min=\"0\" max=\"100\" value=\"50\"><\/code> standart HTML aral\u0131k giri\u015fimizdir. Bu eleman\u0131 g\u00f6rsel olarak gizleyecek ve yerine SVG ile olu\u015fturdu\u011fumuz aray\u00fcz\u00fc kullanaca\u011f\u0131z. Ancak de\u011ferini ve olaylar\u0131n\u0131 JavaScript ile takip edece\u011fiz.<br \/>\n* <code><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\"><\/svg><\/code> SVG \u00e7izim alan\u0131m\u0131zd\u0131r. <code>viewBox<\/code> \u00f6zelli\u011fi, SVG’nin kendi i\u00e7 koordinat sistemini tan\u0131mlar. Bu \u00f6rnekte, 0’dan 500’e geni\u015flik ve 0’dan 100’e y\u00fckseklik. Bu, SVG’nin boyutundan ba\u011f\u0131ms\u0131z olarak i\u00e7indeki elemanlar\u0131n konumunu ve boyutunu belirlememizi sa\u011flar.<br \/>\n* <code>anime.min.js<\/code> ve <code>script.js<\/code> dosyalar\u0131, projemizin animasyon ve etkile\u015fim mant\u0131\u011f\u0131n\u0131 i\u00e7erecektir.<\/p>\n<p>\u015eimdi <code>style.css<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m. Temel amac\u0131m\u0131z, varsay\u0131lan HTML aral\u0131k giri\u015fini gizlemek ve SVG konteynerini uygun \u015fekilde konumland\u0131rmakt\u0131r.<\/p>\n<pre><code class=\"language-css\">body {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n font-family: sans-serif;\n}\n\n.range-container {\n position: relative;\n width: 500px; \/<em> SVG viewBox geni\u015fli\u011fi ile uyumlu <\/em>\/\n height: 100px; \/<em> SVG viewBox y\u00fcksekli\u011fi ile uyumlu <\/em>\/\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#elasticRange {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0; \/<em> G\u00f6rsel olarak gizle <\/em>\/\n cursor: pointer;\n z-index: 10; \/<em> SVG'nin \u00fczerinde olsun ki t\u0131klama olaylar\u0131n\u0131 yakalayabilelim <\/em>\/\n}\n\n#rangeSvg {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none; \/<em> SVG elemanlar\u0131n\u0131n fare olaylar\u0131n\u0131 do\u011frudan yakalamas\u0131n\u0131 engelle, input'a b\u0131rak <\/em>\/\n overflow: visible; \/<em> Elastik efektin SVG s\u0131n\u0131rlar\u0131 d\u0131\u015f\u0131na ta\u015fmas\u0131na izin ver <\/em>\/\n}<\/code><\/pre>\n<p>Bu CSS ile <code><input type=\"range\"><\/code> eleman\u0131n\u0131 \u015feffaf hale getirerek g\u00f6rsel olarak gizledik ancak yine de t\u0131klanabilir ve s\u00fcr\u00fcklenebilir durumda b\u0131rakt\u0131k. Bu sayede taray\u0131c\u0131n\u0131n yerle\u015fik aral\u0131k giri\u015fi mant\u0131\u011f\u0131n\u0131 kullanmaya devam ederken, g\u00f6rsel temsili tamamen SVG’ye devredece\u011fiz. <code>pointer-events: none;<\/code> \u00f6zelli\u011fi SVG’nin kendisinin fare olaylar\u0131n\u0131 yakalamas\u0131n\u0131 engeller, b\u00f6ylece fare olaylar\u0131 alt\u0131ndaki HTML input eleman\u0131na ge\u00e7er.<\/p>\n<h3>SVG Yap\u0131s\u0131n\u0131 Tasarlama<\/h3>\n<p>\u015eimdi s\u0131ra, esnek aral\u0131k giri\u015fimizin g\u00f6rsel bile\u015fenlerini SVG ile olu\u015fturmaya geldi. Bu bile\u015fenler, temel izleyici (track), i\u015faret\u00e7i (thumb), mevcut de\u011feri g\u00f6steren bir metin ve elastik efekti yaratacak \u00f6zel bir yol (path) olacakt\u0131r.<\/p>\n<h4>Statik Bile\u015fenler (Track ve De\u011fer Etiketi)<\/h4>\n<p>SVG i\u00e7inde, aral\u0131k giri\u015finin ana hatt\u0131n\u0131 ve mevcut de\u011feri g\u00f6steren metin etiketini tan\u0131mlayal\u0131m. Bu elemanlar, JavaScript ile dinamik olarak g\u00fcncellenecek olsa da, ba\u015flang\u0131\u00e7 yap\u0131lar\u0131n\u0131 SVG i\u00e7inde belirlemek faydal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\">\n \n <line id=\"trackLine\" x1=\"50\" y1=\"50\" x2=\"450\" y2=\"50\" stroke=\"#ccc\" stroke-width=\"4\" stroke-linecap=\"round\" \/>\n\n \n <text id=\"valueText\" x=\"250\" y=\"30\" text-anchor=\"middle\" font-size=\"20\" fill=\"#333\">50<\/text>\n<\/svg><\/code><\/pre>\n<p>* <code><line id=\"trackLine\" ... \/><\/code>: Bu \u00e7izgi, aral\u0131k giri\u015fimizin temel hatt\u0131n\u0131 olu\u015fturur. <code>x1<\/code>, <code>y1<\/code>, <code>x2<\/code>, <code>y2<\/code> koordinatlar\u0131 \u00e7izginin ba\u015flang\u0131\u00e7 ve biti\u015f noktalar\u0131n\u0131 belirler. <code>stroke<\/code> rengini, <code>stroke-width<\/code> kal\u0131nl\u0131\u011f\u0131n\u0131 ve <code>stroke-linecap=\"round\"<\/code> ile \u00e7izgi u\u00e7lar\u0131n\u0131n yuvarlak olmas\u0131n\u0131 sa\u011flad\u0131k.<br \/>\n* <code><text id=\"valueText\" ... \/><\/code>: Bu metin eleman\u0131, se\u00e7ilen de\u011feri g\u00f6sterecektir. <code>x<\/code> ve <code>y<\/code> konumu, <code>text-anchor=\"middle\"<\/code> ile metnin yatayda ortalanmas\u0131 ve <code>font-size<\/code> gibi \u00f6zellikler tan\u0131mlanm\u0131\u015ft\u0131r. Ba\u015flang\u0131\u00e7 de\u011feri 50 olarak ayarlanm\u0131\u015ft\u0131r.<\/p>\n<h4>Dinamik Bile\u015fenler (Thumb ve Elastik Efekt)<\/h4>\n<p>\u0130\u015faret\u00e7i (thumb) ve elastik efekti sa\u011flayacak yol (path) en dinamik elemanlar\u0131m\u0131z olacak.<\/p>\n<pre><code class=\"language-html\"><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\">\n \n\n \n \n <path id=\"elasticPath\" d=\"M50 50 Q250 50 450 50\" fill=\"none\" stroke=\"#666\" stroke-width=\"8\" stroke-linecap=\"round\" \/>\n\n \n <circle id=\"thumbCircle\" cx=\"250\" cy=\"50\" r=\"15\" fill=\"#007bff\" stroke=\"#fff\" stroke-width=\"2\" \/>\n<\/svg><\/code><\/pre>\n<p>* <code><circle id=\"thumbCircle\" ... \/><\/code>: Bu daire, kullan\u0131c\u0131n\u0131n s\u00fcr\u00fckleyece\u011fi i\u015faret\u00e7idir. <code>cx<\/code> ve <code>cy<\/code> merkez koordinatlar\u0131, <code>r<\/code> yar\u0131\u00e7ap\u0131, <code>fill<\/code> rengi ve <code>stroke<\/code> kenarl\u0131k \u00f6zellikleri belirlenmi\u015ftir. Ba\u015flang\u0131\u00e7ta, <code>trackLine<\/code> ve <code>valueText<\/code> ile ayn\u0131 orta konumda (250, 50) yer alacakt\u0131r.<br \/>\n* <code><path id=\"elasticPath\" ... \/><\/code>: Bu, elastik efektin kalbidir. <code>d<\/code> (data) \u00f6zelli\u011fi, SVG yolunun \u015feklini tan\u0131mlar. Burada <code>M<\/code> (moveto) ve <code>Q<\/code> (quadratic Bezier curve) komutlar\u0131n\u0131 kullan\u0131yoruz.<br \/>\n * <code>M50 50<\/code>: Yolun ba\u015flang\u0131\u00e7 noktas\u0131 (trackLine’\u0131n ba\u015flang\u0131c\u0131).<br \/>\n * <code>Q250 50 450 50<\/code>: Bu, bir kuadratik Bezier e\u011frisi \u00e7izer. <code>250 50<\/code> kontrol noktas\u0131d\u0131r ve <code>450 50<\/code> biti\u015f noktas\u0131d\u0131r (trackLine’\u0131n biti\u015fi). Ba\u015flang\u0131\u00e7ta, kontrol noktas\u0131 d\u00fcz \u00e7izginin \u00fczerinde oldu\u011fu i\u00e7in path d\u00fcz bir \u00e7izgi gibi g\u00f6r\u00fcnecektir. \u0130\u015faret\u00e7i hareket etti\u011finde, bu kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini dinamik olarak de\u011fi\u015ftirerek bir esneme efekti yarataca\u011f\u0131z. <code>stroke<\/code> ve <code>stroke-width<\/code> ile g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirledik. <code>fill=\"none\"<\/code> ile yolun i\u00e7ini doldurmad\u0131k.<\/p>\n<p>Bu temel SVG yap\u0131s\u0131 ile, aral\u0131k giri\u015fimizin g\u00f6rsel temelini atm\u0131\u015f olduk. \u015eimdi JavaScript ile bu elemanlar\u0131 canland\u0131rma zaman\u0131.<\/p>\n<h3>JavaScript ile Etkile\u015fim ve Hesaplamalar<\/h3>\n<p><code>script.js<\/code> dosyam\u0131zda, HTML aral\u0131k giri\u015finin de\u011ferini okuyacak, bu de\u011feri SVG koordinatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrecek ve SVG elemanlar\u0131n\u0131 g\u00fcncelleyecek mant\u0131\u011f\u0131 yazaca\u011f\u0131z. Ayr\u0131ca, fare olaylar\u0131n\u0131 dinleyerek elastik efekti tetikleyece\u011fiz.<\/p>\n<h4>DOM Elementlerini Se\u00e7me ve Ba\u015flang\u0131\u00e7 De\u011ferleri<\/h4>\n<p>\u00d6ncelikle, gerekli DOM elemanlar\u0131n\u0131 se\u00e7elim ve baz\u0131 yard\u0131mc\u0131 de\u011fi\u015fkenler tan\u0131mlayal\u0131m.<\/p>\n<pre><code class=\"language-javascript\">const elasticRange = document.getElementById('elasticRange');\nconst rangeSvg = document.getElementById('rangeSvg');\nconst trackLine = document.getElementById('trackLine');\nconst elasticPath = document.getElementById('elasticPath');\nconst thumbCircle = document.getElementById('thumbCircle');\nconst valueText = document.getElementById('valueText');\n\nconst svgWidth = 500; \/\/ SVG viewBox geni\u015fli\u011fi\nconst svgHeight = 100; \/\/ SVG viewBox y\u00fcksekli\u011fi\nconst trackY = svgHeight \/ 2; \/\/ Izleyicinin ve i\u015faret\u00e7inin dikey konumu (50)\nconst trackStartX = 50; \/\/ Izleyicinin ba\u015flang\u0131\u00e7 X konumu\nconst trackEndX = 450; \/\/ Izleyicinin biti\u015f X konumu\nconst trackLength = trackEndX - trackStartX; \/\/ Izleyicinin uzunlu\u011fu\n\nlet isDragging = false; \/\/ \u0130\u015faret\u00e7inin s\u00fcr\u00fcklenip s\u00fcr\u00fcklenmedi\u011fini takip eder\nlet initialThumbX = 0; \/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda i\u015faret\u00e7inin ba\u015flang\u0131\u00e7 X konumu\nlet initialMouseX = 0; \/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda farenin ba\u015flang\u0131\u00e7 X konumu\n\n\/\/ De\u011feri SVG X koordinat\u0131na d\u00f6n\u00fc\u015ft\u00fcren yard\u0131mc\u0131 fonksiyon\nfunction mapValueToSvgX(value) {\n const min = parseFloat(elasticRange.min);\n const max = parseFloat(elasticRange.max);\n const normalizedValue = (value - min) \/ (max - min);\n return trackStartX + normalizedValue * trackLength;\n}\n\n\/\/ SVG X koordinat\u0131n\u0131 de\u011fere d\u00f6n\u00fc\u015ft\u00fcren yard\u0131mc\u0131 fonksiyon (e\u011fer do\u011frudan SVG'yi s\u00fcr\u00fcklersek)\nfunction mapSvgXToValue(svgX) {\n const min = parseFloat(elasticRange.min);\n const max = parseFloat(elasticRange.max);\n const normalizedX = (svgX - trackStartX) \/ trackLength;\n return min + normalizedX * (max - min);\n}<\/code><\/pre>\n<p>Bu k\u0131s\u0131mda, t\u00fcm SVG elemanlar\u0131na ve HTML aral\u0131k giri\u015fine referanslar al\u0131yoruz. Ayr\u0131ca, SVG’nin boyutlar\u0131n\u0131 ve izleyicinin konumunu tan\u0131mlayan sabitler belirledik. <code>mapValueToSvgX<\/code> fonksiyonu, HTML aral\u0131k giri\u015finin say\u0131sal de\u011ferini al\u0131p, bu de\u011feri SVG i\u00e7indeki uygun <code>x<\/code> koordinat\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, i\u015faret\u00e7inin ve metin etiketinin do\u011fru konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Temel Thumb Hareketini Ger\u00e7ekle\u015ftirme<\/h4>\n<p>HTML aral\u0131k giri\u015finin <code>input<\/code> olay\u0131n\u0131 dinleyerek i\u015faret\u00e7iyi ve de\u011feri g\u00fcncelleyelim.<\/p>\n<pre><code class=\"language-javascript\">function updateSvgElements(value) {\n const newX = mapValueToSvgX(value);\n\n \/\/ \u0130\u015faret\u00e7iyi g\u00fcncelle\n thumbCircle.setAttribute('cx', newX);\n\n \/\/ De\u011fer metnini g\u00fcncelle\n valueText.textContent = value;\n valueText.setAttribute('x', newX);\n\n \/\/ Elastik yolu g\u00fcncelle (\u015fimdilik d\u00fcz, daha sonra esnek hale gelecek)\n \/\/ Kontrol noktas\u0131n\u0131n X'i i\u015faret\u00e7inin X'ine e\u015fit, Y'si trackY'ye e\u015fit\n elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${newX} ${trackY} ${trackEndX} ${trackY}<\/code>);\n}\n\n\/\/ Ba\u015flang\u0131\u00e7 de\u011ferini ayarla\nupdateSvgElements(parseFloat(elasticRange.value));\n\nelasticRange.addEventListener('input', (e) => {\n updateSvgElements(parseFloat(e.target.value));\n});<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131, <code>updateSvgElements<\/code> fonksiyonunu tan\u0131mlar. Bu fonksiyon, verilen bir de\u011fere g\u00f6re i\u015faret\u00e7inin (<code>thumbCircle<\/code>) <code>cx<\/code> \u00f6zelli\u011fini, metin etiketinin (<code>valueText<\/code>) i\u00e7eri\u011fini ve <code>x<\/code> konumunu g\u00fcnceller. Ayr\u0131ca, <code>elasticPath<\/code>‘in <code>d<\/code> \u00f6zelli\u011fini de g\u00fcnceller. \u015eimdilik, <code>elasticPath<\/code>‘in kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 <code>trackY<\/code>‘de tutarak d\u00fcz bir \u00e7izgi gibi g\u00f6r\u00fcnmesini sa\u011fl\u0131yoruz.<\/p>\n<p><code>elasticRange<\/code> eleman\u0131na bir <code>input<\/code> olay\u0131 dinleyicisi ekleyerek, kullan\u0131c\u0131 aral\u0131k giri\u015fini her de\u011fi\u015ftirdi\u011finde <code>updateSvgElements<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131yoruz.<\/p>\n<h4>Elastik Efektin Mant\u0131\u011f\u0131<\/h4>\n<p>Elastik efekti yaratmak i\u00e7in, kullan\u0131c\u0131n\u0131n i\u015faret\u00e7iyi s\u00fcr\u00fcklemeye ba\u015flad\u0131\u011f\u0131 ve b\u0131rakt\u0131\u011f\u0131 anlar\u0131 yakalamam\u0131z gerekiyor. Bu olaylar s\u0131ras\u0131nda, <code>elasticPath<\/code>‘in Bezier e\u011frisi kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak de\u011fi\u015ftirece\u011fiz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Fare olaylar\u0131 i\u00e7in bayrak\nlet isThumbDragging = false;\n\n\/\/ Elastik efekt i\u00e7in Bezier kontrol noktas\u0131\nlet controlPointY = trackY;\n\n\/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda\nelasticRange.addEventListener('mousedown', (e) => {\n isThumbDragging = true;\n \/\/ Animasyon ba\u015flat (hafif\u00e7e esneme)\n anime({\n targets: elasticPath,\n d: [\n { value: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY - 10} ${trackEndX} ${trackY}<\/code> }, \/\/ Yukar\u0131 do\u011fru hafif esneme\n { value: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY + 10} ${trackEndX} ${trackY}<\/code> } \/\/ A\u015fa\u011f\u0131 do\u011fru hafif esneme\n ],\n duration: 200,\n easing: 'easeOutSine',\n direction: 'alternate',\n loop: true \/\/ S\u00fcr\u00fckleme bitene kadar hafif\u00e7e titre\u015fim\n });\n});\n\n\/\/ S\u00fcr\u00fckleme bitti\u011finde\nelasticRange.addEventListener('mouseup', () => {\n isThumbDragging = false;\n \/\/ anime.js animasyonunu durdur\n anime.remove(elasticPath);\n\n \/\/ Elastik yolu orijinal konumuna geri getir\n anime({\n targets: elasticPath,\n d: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY} ${trackEndX} ${trackY}<\/code>,\n duration: 500,\n easing: 'easeOutElastic(1, .8)' \/\/ Esnek geri sekme efekti\n });\n});\n\n\/\/ Fare hareket etti\u011finde (s\u00fcr\u00fckleme s\u0131ras\u0131nda)\ndocument.addEventListener('mousemove', (e) => {\n if (!isThumbDragging) return;\n\n \/\/ Fare Y koordinat\u0131na g\u00f6re kontrol noktas\u0131n\u0131 ayarla\n \/\/ Bu k\u0131s\u0131m, input'un kendisi s\u00fcr\u00fcklenirken fare Y'sinin do\u011frudan etkile\u015fimi i\u00e7in tasarlanm\u0131\u015ft\u0131r.\n \/\/ Ancak input'un kendisi sadece X ekseninde hareket eder.\n \/\/ Ger\u00e7ek bir elastik s\u00fcr\u00fckleme i\u00e7in, thumb'\u0131 do\u011frudan s\u00fcr\u00fcklememiz gerekir.\n \/\/ \u015eimdilik, input'un X hareketiyle hafif bir Y esnemesi yapal\u0131m.\n \n \/\/ Basit bir elastik deformasyon i\u00e7in:\n \/\/ \u0130\u015faret\u00e7inin mevcut X konumu ile track'in orta noktas\u0131 aras\u0131ndaki fark\u0131 kullanabiliriz.\n const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n const midPointX = (trackStartX + trackEndX) \/ 2;\n const distanceFromMid = currentThumbX - midPointX;\n \n \/\/ Mesafe artt\u0131k\u00e7a esneme miktar\u0131n\u0131 art\u0131r\n \/\/ Y ekseninde k\u00fc\u00e7\u00fck bir sapma yaratmak i\u00e7in\n controlPointY = trackY + (distanceFromMid \/ trackLength) * 20; \/\/ 20 piksel max sapma\n\n \/\/ Path'i g\u00fcncelle\n elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${currentThumbX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n});<\/code><\/pre>\n<p>Bu b\u00f6l\u00fcmde, <code>mousedown<\/code>, <code>mouseup<\/code> ve <code>mousemove<\/code> olaylar\u0131n\u0131 dinliyoruz.<\/p>\n<p>* <strong><code>mousedown<\/code>:<\/strong> Kullan\u0131c\u0131 aral\u0131k giri\u015fine t\u0131klad\u0131\u011f\u0131nda <code>isThumbDragging<\/code> bayra\u011f\u0131n\u0131 <code>true<\/code> yapar\u0131z. Bu noktada, <code>anime.js<\/code> kullanarak <code>elasticPath<\/code>‘e hafif bir “titre\u015fim” animasyonu ba\u015flat\u0131r\u0131z. Bu, kullan\u0131c\u0131n\u0131n etkile\u015fime ge\u00e7ti\u011fini g\u00f6rsel olarak belirtir. Kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini hafif\u00e7e yukar\u0131 ve a\u015fa\u011f\u0131 hareket ettirerek path’i esnetiriz.<br \/>\n* <strong><code>mouseup<\/code>:<\/strong> Kullan\u0131c\u0131 fareyi b\u0131rakt\u0131\u011f\u0131nda <code>isThumbDragging<\/code> bayra\u011f\u0131n\u0131 <code>false<\/code> yapar\u0131z. \u00d6nceki animasyonu durdururuz (<code>anime.remove(elasticPath)<\/code>). Ard\u0131ndan, <code>anime.js<\/code>‘nin <code>easeOutElastic<\/code> kolayla\u015ft\u0131rma fonksiyonunu kullanarak <code>elasticPath<\/code>‘i orijinal d\u00fcz konumuna (kontrol noktas\u0131n\u0131n <code>y<\/code>‘si <code>trackY<\/code>‘ye d\u00f6ner) esnek bir \u015fekilde geri getiririz. Bu, “geri sekme” efektini yarat\u0131r.<br \/>\n* <strong><code>mousemove<\/code>:<\/strong> Kullan\u0131c\u0131 s\u00fcr\u00fckleme yaparken (fare hareket ederken), <code>elasticPath<\/code>‘in kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak g\u00fcncelleriz. Burada, i\u015faret\u00e7inin <code>x<\/code> konumu ile track’in orta noktas\u0131 aras\u0131ndaki fark\u0131 kullanarak bir <code>y<\/code> sapmas\u0131 olu\u015fturuyoruz. \u0130\u015faret\u00e7i merkezden ne kadar uzakla\u015f\u0131rsa, <code>elasticPath<\/code> de o kadar fazla esner. <code>Q<\/code> komutunun ikinci parametresi (kontrol noktas\u0131n\u0131n <code>y<\/code>‘si) bu esnekli\u011fi sa\u011flar.<\/p>\n<p><strong>\u00d6nemli Not:<\/strong> Yukar\u0131daki <code>mousemove<\/code> mant\u0131\u011f\u0131, <code><input type=\"range\"><\/code> eleman\u0131n\u0131n varsay\u0131lan s\u00fcr\u00fckleme davran\u0131\u015f\u0131na dayan\u0131r. Kullan\u0131c\u0131, HTML input’u s\u00fcr\u00fckledi\u011finde <code>input<\/code> olay\u0131 tetiklenir ve <code>updateSvgElements<\/code> \u00e7a\u011fr\u0131l\u0131r. <code>mousemove<\/code> olay\u0131 ise daha \u00e7ok fare hareketine tepki vermek i\u00e7indir. E\u011fer do\u011frudan SVG i\u015faret\u00e7isini s\u00fcr\u00fckleme mant\u0131\u011f\u0131 kuracak olsayd\u0131k, <code>mousemove<\/code> i\u00e7inde i\u015faret\u00e7inin <code>cx<\/code>‘ini ve buna ba\u011fl\u0131 olarak HTML input’un de\u011ferini g\u00fcncellememiz gerekirdi. Ancak bu senaryoda, HTML input’u gizleyip onun olaylar\u0131n\u0131 kullanmak daha basit bir yakla\u015f\u0131m sunar. Bu nedenle <code>mousemove<\/code> olay\u0131nda <code>elasticPath<\/code>‘in <code>y<\/code> esnemesini, input’un mevcut de\u011ferine g\u00f6re hesaplamak daha uygun olacakt\u0131r.<\/p>\n<h3>anime.js ile Animasyonlar\u0131 Entegre Etme<\/h3>\n<p><code>anime.js<\/code> k\u00fct\u00fcphanesi, JavaScript ile karma\u015f\u0131k animasyonlar\u0131 \u00e7ok daha kolay hale getirir. \u00d6zellikle Bezier e\u011frileri gibi SVG \u00f6zelliklerinin animasyonu ve esnek “easing” fonksiyonlar\u0131 (kolayla\u015ft\u0131rma fonksiyonlar\u0131) i\u00e7in idealdir. Yukar\u0131daki kodda zaten <code>anime.js<\/code>‘yi kullanmaya ba\u015flad\u0131k, ancak daha detayl\u0131 inceleyelim.<\/p>\n<h4>Thumb ve De\u011fer Etiketi Animasyonlar\u0131<\/h4>\n<p>\u0130\u015faret\u00e7i ve de\u011fer metni hareket etti\u011finde, bu hareketleri daha ak\u0131c\u0131 hale getirebiliriz. \u00d6rne\u011fin, i\u015faret\u00e7i bir konuma atlarken yumu\u015fak bir ge\u00e7i\u015f sa\u011flamak.<\/p>\n<pre><code class=\"language-javascript\">function updateSvgElementsAnimated(value) {\n const newX = mapValueToSvgX(value);\n\n \/\/ Thumb animasyonu\n anime({\n targets: thumbCircle,\n cx: newX,\n duration: 300,\n easing: 'easeOutQuad' \/\/ Yumu\u015fak bir h\u0131zlanma ve yava\u015flama\n });\n\n \/\/ De\u011fer metni animasyonu (konum ve i\u00e7erik)\n anime({\n targets: valueText,\n x: newX,\n duration: 300,\n easing: 'easeOutQuad',\n update: function() {\n \/\/ Animasyon s\u0131ras\u0131nda metin i\u00e7eri\u011fini g\u00fcncelle\n \/\/ Bu, anime.js'nin hedefi do\u011frudan metin i\u00e7eri\u011fi olmad\u0131\u011f\u0131 i\u00e7in gereklidir\n valueText.textContent = Math.round(value); \/\/ Yuvarlanm\u0131\u015f de\u011fer g\u00f6sterimi\n }\n });\n\n \/\/ Elastik yolun kontrol noktas\u0131n\u0131 g\u00fcncelle (daha sonra esneme ile birle\u015fecek)\n \/\/ \u015eimdilik, sadece X koordinat\u0131n\u0131 g\u00fcncelleyelim.\n \/\/ Y koordinat\u0131 mousedown\/mouseup\/mousemove olaylar\u0131nda y\u00f6netilecek.\n elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${newX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n}\n\n\/\/ updateSvgElements yerine updateSvgElementsAnimated kullanaca\u011f\u0131z\nupdateSvgElementsAnimated(parseFloat(elasticRange.value));\n\nelasticRange.addEventListener('input', (e) => {\n updateSvgElementsAnimated(parseFloat(e.target.value));\n});<\/code><\/pre>\n<p>Burada, <code>updateSvgElementsAnimated<\/code> fonksiyonu, <code>anime.js<\/code> kullanarak <code>thumbCircle<\/code>‘\u0131n <code>cx<\/code> \u00f6zelli\u011fini ve <code>valueText<\/code>‘in <code>x<\/code> \u00f6zelli\u011fini animasyonlu bir \u015fekilde g\u00fcnceller. <code>easing: 'easeOutQuad'<\/code> gibi kolayla\u015ft\u0131rma fonksiyonlar\u0131, animasyonun ba\u015flang\u0131c\u0131n\u0131 ve biti\u015fini daha do\u011fal hale getirir. <code>valueText<\/code> i\u00e7in <code>update<\/code> callback’ini kullanarak, animasyon s\u0131ras\u0131nda metin i\u00e7eri\u011fini g\u00fcncel tutar\u0131z.<\/p>\n<h4>Elastik \u00c7izgi Animasyonu<\/h4>\n<p>Daha \u00f6nce <code>mousedown<\/code> ve <code>mouseup<\/code> olaylar\u0131nda kulland\u0131\u011f\u0131m\u0131z <code>anime.js<\/code> animasyonlar\u0131, elastik efektin \u00f6z\u00fcn\u00fc olu\u015fturur.<\/p>\n<p>* <strong>S\u00fcr\u00fckleme Ba\u015flang\u0131c\u0131 (Esnek Titre\u015fim):<\/strong><\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('mousedown', (e) => {\n isThumbDragging = true;\n \/\/ Mevcut thumb pozisyonunu al\n const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n \n anime({\n targets: elasticPath,\n d: [\n { value: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY - 10} ${trackEndX} ${trackY}<\/code> }, \/\/ Yukar\u0131 esneme\n { value: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY + 10} ${trackEndX} ${trackY}<\/code> } \/\/ A\u015fa\u011f\u0131 esneme\n ],\n duration: 200,\n easing: 'easeOutSine',\n direction: 'alternate',\n loop: true,\n \/\/ Animasyon ba\u015flad\u0131\u011f\u0131nda controlPointY'yi ba\u015flang\u0131\u00e7 esneme de\u011ferine ayarla\n begin: function() {\n controlPointY = trackY - 10; \/\/ Ba\u015flang\u0131\u00e7ta yukar\u0131 esneme\n }\n });\n });<\/code><\/pre>\n<p> Bu animasyon, kullan\u0131c\u0131n\u0131n t\u0131klamas\u0131yla path’in kontrol noktas\u0131n\u0131n <code>y<\/code>‘sini hafif\u00e7e yukar\u0131 ve a\u015fa\u011f\u0131 hareket ettirerek bir “canl\u0131l\u0131k” hissi verir.<\/p>\n<p>* <strong>S\u00fcr\u00fckleme Biti\u015fi (Geri Sekme):<\/strong><\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('mouseup', () => {\n isThumbDragging = false;\n anime.remove(elasticPath); \/\/ Titre\u015fim animasyonunu durdur\n\n const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n\n \/\/ Elastik yolu orijinal konumuna geri getir (esnek geri sekme)\n anime({\n targets: elasticPath,\n d: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY} ${trackEndX} ${trackY}<\/code>,\n duration: 700, \/\/ Daha uzun s\u00fcre, daha belirgin sekme\n easing: 'easeOutElastic(1, .8)', \/\/ Esnek geri sekme efekti\n complete: function() {\n controlPointY = trackY; \/\/ Animasyon bitince kontrol noktas\u0131n\u0131 merkeze al\n }\n });\n });<\/code><\/pre>\n<p> Bu, <code>anime.js<\/code>‘nin en etkileyici \u00f6zelliklerinden birini kullan\u0131r: <code>easeOutElastic<\/code>. Bu kolayla\u015ft\u0131rma fonksiyonu, bir yay\u0131n geri sekme hareketini taklit ederek, path’in d\u00fcz konumuna geri d\u00f6nerken hafif\u00e7e ileri geri sal\u0131nmas\u0131n\u0131 sa\u011flar. Bu, “elastik” hissinin temelini olu\u015fturur. <code>d<\/code> \u00f6zelli\u011fini do\u011frudan hedefleyerek, Bezier e\u011frisinin kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini animasyonlu bir \u015fekilde <code>trackY<\/code>‘ye geri d\u00f6nd\u00fcr\u00fcyoruz.<\/p>\n<p>* <strong>S\u00fcr\u00fckleme S\u0131ras\u0131nda Esneme:<\/strong><br \/>\n <code>mousemove<\/code> olay\u0131nda, <code>elasticPath<\/code>‘in <code>d<\/code> \u00f6zelli\u011fini do\u011frudan g\u00fcncelliyoruz. Bu, ger\u00e7ek zamanl\u0131 bir etkile\u015fim oldu\u011fu i\u00e7in <code>anime.js<\/code> burada do\u011frudan bir animasyon ba\u015flatmak yerine, anl\u0131k g\u00f6rsel geri bildirim sa\u011flamak i\u00e7in kullan\u0131l\u0131r. <code>controlPointY<\/code> de\u011fi\u015fkenini <code>trackY<\/code>‘den sapt\u0131rarak Bezier e\u011frisini deforme ediyoruz.<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('mousemove', (e) => {\n if (!isThumbDragging) return;\n\n const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n const midPointX = (trackStartX + trackEndX) \/ 2;\n const distanceFromMid = currentThumbX - midPointX;\n \n \/\/ Mesafe artt\u0131k\u00e7a esneme miktar\u0131n\u0131 art\u0131r.\n \/\/ \u00d6rne\u011fin, maksimum 30px sapma ve ters y\u00f6nde esneme i\u00e7in:\n \/\/ \u0130\u015faret\u00e7i ortan\u0131n solundaysa yukar\u0131, sa\u011f\u0131ndaysa a\u015fa\u011f\u0131 esner.\n controlPointY = trackY + (distanceFromMid \/ (trackLength \/ 2)) * -15; \/\/ -15 max sapma, y\u00f6n\u00fc ters \u00e7evirir\n \n elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${currentThumbX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n });<\/code><\/pre>\n<p> Burada <code>controlPointY<\/code> hesaplamas\u0131n\u0131 biraz daha geli\u015ftirerek, i\u015faret\u00e7inin orta noktadan uzakla\u015fma oran\u0131na g\u00f6re bir <code>y<\/code> sapmas\u0131 sa\u011fl\u0131yoruz. \u0130\u015faret\u00e7i sol taraftaysa <code>distanceFromMid<\/code> negatif olacak ve <code>controlPointY<\/code> <code>trackY<\/code>‘den b\u00fcy\u00fck olacak (path a\u015fa\u011f\u0131 esneyecek). Sa\u011f taraftaysa <code>distanceFromMid<\/code> pozitif olacak ve <code>controlPointY<\/code> <code>trackY<\/code>‘den k\u00fc\u00e7\u00fck olacak (path yukar\u0131 esneyecek). Bu, daha dinamik bir esneme efekti sa\u011flar.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve \u0130yile\u015ftirmeler<\/h3>\n<p>Bu temel yap\u0131 \u00fczerinde, kullan\u0131c\u0131 deneyimini ve uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in \u00e7e\u015fitli geli\u015ftirmeler yap\u0131labilir.<\/p>\n<h4>Dokunmatik Cihaz Deste\u011fi<\/h4>\n<p>Modern web, mobil cihazlar\u0131 da desteklemelidir. Fare olaylar\u0131na ek olarak, dokunmatik olaylar\u0131 (<code>touchstart<\/code>, <code>touchmove<\/code>, <code>touchend<\/code>) dinleyerek aral\u0131k giri\u015fini dokunmatik ekranlarda da kullan\u0131labilir hale getirebiliriz. Mant\u0131k, fare olaylar\u0131yla benzerdir, ancak <code>e.clientX<\/code> yerine <code>e.touches[0].clientX<\/code> gibi dokunmatik koordinatlar\u0131 kullanmak gerekir.<\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('touchstart', (e) => {\n isThumbDragging = true;\n \/\/ ... mousedown ile ayn\u0131 animasyonlar ...\n});\n\nelasticRange.addEventListener('touchend', () => {\n isThumbDragging = false;\n \/\/ ... mouseup ile ayn\u0131 animasyonlar ...\n});\n\ndocument.addEventListener('touchmove', (e) => {\n if (!isThumbDragging) return;\n \/\/ ... mousemove ile ayn\u0131 mant\u0131k, ancak e.touches[0].clientX kullan\u0131n ...\n \/\/ e.preventDefault() eklemek kayd\u0131rmay\u0131 engeller\n});<\/code><\/pre>\n<h4>Performans Optimizasyonlar\u0131<\/h4>\n<p><code>mousemove<\/code> ve <code>touchmove<\/code> gibi olaylar \u00e7ok s\u0131k tetiklenebilir. Bu olaylar i\u00e7inde yo\u011fun hesaplamalar yapmak performans\u0131 etkileyebilir.<\/p>\n<p>* <strong>Debouncing\/Throttling:<\/strong> <code>mousemove<\/code> olay dinleyicisi i\u00e7indeki pahal\u0131 i\u015flemleri, belirli bir zaman aral\u0131\u011f\u0131nda sadece bir kez veya son tetiklenmeden sonra belirli bir s\u00fcre ge\u00e7tikten sonra \u00e7al\u0131\u015ft\u0131rmak i\u00e7in debouncing veya throttling teknikleri kullan\u0131labilir. Ancak, ger\u00e7ek zamanl\u0131 g\u00f6rsel geri bildirim i\u00e7in bu her zaman uygun olmayabilir.<br \/>\n* <strong><code>requestAnimationFrame<\/code>:<\/strong> Animasyonlar\u0131 ve DOM g\u00fcncellemelerini taray\u0131c\u0131n\u0131n sonraki yeniden \u00e7izim d\u00f6ng\u00fcs\u00fcne senkronize etmek i\u00e7in <code>requestAnimationFrame<\/code> kullanmak, daha ak\u0131c\u0131 animasyonlar sa\u011flar ve taray\u0131c\u0131 y\u00fck\u00fcn\u00fc azalt\u0131r. \u00d6zellikle <code>mousemove<\/code> i\u00e7indeki SVG g\u00fcncellemeleri i\u00e7in faydal\u0131d\u0131r.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<p>Her zaman oldu\u011fu gibi, eri\u015filebilirlik \u00f6nemlidir. Gizledi\u011fimiz <code><input type=\"range\"><\/code> eleman\u0131, klavye ile gezinme ve ekran okuyucular i\u00e7in temel eri\u015filebilirlik katman\u0131n\u0131 sa\u011flar. Ancak, g\u00f6rsel olarak sundu\u011fumuz SVG aray\u00fcz\u00fcn\u00fcn de eri\u015filebilir oldu\u011fundan emin olmak i\u00e7in ek ad\u0131mlar at\u0131labilir:<\/p>\n<p>* <strong>ARIA (Accessible Rich Internet Applications) Nitelikleri:<\/strong> SVG elemanlar\u0131na <code>aria-labelledby<\/code> veya <code>aria-describedby<\/code> gibi nitelikler ekleyerek, ekran okuyuculara daha fazla bilgi sa\u011flayabiliriz.<br \/>\n* <strong>Odak Y\u00f6netimi:<\/strong> SVG elemanlar\u0131n\u0131n klavye ile odaklanabilirli\u011fini sa\u011flamak i\u00e7in <code>tabindex<\/code> niteli\u011fi kullan\u0131labilir, ancak bizim durumumuzda gizli HTML input eleman\u0131 zaten bu i\u015flevi g\u00f6r\u00fcyor.<\/p>\n<h4>Tema ve \u00d6zelle\u015ftirme<\/h4>\n<p>SVG ve CSS de\u011fi\u015fkenleri kullanarak, aral\u0131k giri\u015finin renklerini, kal\u0131nl\u0131klar\u0131n\u0131 ve di\u011fer g\u00f6rsel \u00f6zelliklerini kolayca \u00f6zelle\u015ftirilebilir hale getirebiliriz.<\/p>\n<pre><code class=\"language-css\">:root {\n --track-color: #ccc;\n --thumb-color: #007bff;\n --elastic-color: #666;\n --text-color: #333;\n}\n\n#trackLine {\n stroke: var(--track-color);\n}\n#thumbCircle {\n fill: var(--thumb-color);\n}\n#elasticPath {\n stroke: var(--elastic-color);\n}\n#valueText {\n fill: var(--text-color);\n}<\/code><\/pre>\n<p>Bu \u015fekilde, tek bir yerden t\u00fcm renkleri de\u011fi\u015ftirebiliriz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bu makalede, standart bir HTML <code><input type=\"range\"><\/code> eleman\u0131n\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015farak, SVG ve anime.js k\u00fct\u00fcphanesinin g\u00fcc\u00fcn\u00fc birle\u015ftirerek nas\u0131l g\u00f6rsel olarak zengin ve etkile\u015fimli, esnek bir aral\u0131k giri\u015fi olu\u015fturulabilece\u011fini detayl\u0131 bir \u015fekilde inceledik.<\/p>\n<p>* <strong>HTML ve CSS:<\/strong> Temel yap\u0131y\u0131 kurarak ve varsay\u0131lan aral\u0131k giri\u015fini gizleyerek, \u00f6zel g\u00f6rselle\u015ftirmemize yer a\u00e7t\u0131k.<br \/>\n* <strong>SVG:<\/strong> Izleyici, i\u015faret\u00e7i, de\u011fer metni ve \u00f6zellikle elastik efekti sa\u011flayan Bezier e\u011frisine sahip <code>path<\/code> eleman\u0131n\u0131 \u00e7izmek i\u00e7in SVG’nin esnekli\u011finden faydaland\u0131k. SVG’nin DOM taraf\u0131ndan manip\u00fcle edilebilir olmas\u0131, dinamik g\u00fcncellemeler i\u00e7in kritik \u00f6neme sahipti.<br \/>\n* <strong>JavaScript:<\/strong> HTML aral\u0131k giri\u015finin de\u011ferini SVG koordinatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek, elemanlar\u0131n konumunu ve \u015feklini dinamik olarak g\u00fcncellemek ve fare\/dokunmatik olaylar\u0131 yakalayarak etkile\u015fimleri y\u00f6netmek i\u00e7in JavaScript’i kulland\u0131k. \u00d6zellikle <code>mousemove<\/code> olay\u0131nda Bezier kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak de\u011fi\u015ftirerek esneme efektini sa\u011flad\u0131k.<br \/>\n* <strong>anime.js:<\/strong> \u0130\u015faret\u00e7inin ve de\u011fer metninin yumu\u015fak hareketleri i\u00e7in, ve en \u00f6nemlisi, kullan\u0131c\u0131n\u0131n fareyi b\u0131rakt\u0131\u011f\u0131nda <code>elasticPath<\/code>‘in <code>easeOutElastic<\/code> kolayla\u015ft\u0131rma fonksiyonu ile esnek bir \u015fekilde geri sekmesini sa\u011flamak i\u00e7in anime.js’nin g\u00fcc\u00fcnden faydaland\u0131k. Bu, kullan\u0131c\u0131ya g\u00f6rsel olarak tatmin edici bir geri bildirim sa\u011flad\u0131.<\/p>\n<p>Bu proje, sadece bir aral\u0131k giri\u015fini \u00f6zelle\u015ftirmekle kalmay\u0131p, ayn\u0131 zamanda modern web geli\u015ftirme tekniklerinin ve k\u00fct\u00fcphanelerinin bir araya gelerek nas\u0131l yenilik\u00e7i ve kullan\u0131c\u0131 dostu aray\u00fczler yaratabilece\u011fini de g\u00f6stermektedir. SVG’nin vekt\u00f6r tabanl\u0131 grafikleri, anime.js’nin ak\u0131c\u0131 animasyon yetenekleri ve JavaScript’in etkile\u015fim y\u00f6netimi, web uygulamalar\u0131na g\u00f6rsel bir \u00e7ekicilik ve \u00fcst d\u00fczey bir kullan\u0131c\u0131 deneyimi katman\u0131n g\u00fc\u00e7l\u00fc bir yolunu sunar. Bu temel \u00fczerine in\u015fa ederek, farkl\u0131 form elemanlar\u0131 i\u00e7in de benzer yarat\u0131c\u0131 etkile\u015fimler tasarlamak m\u00fcmk\u00fcnd\u00fcr.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\nAray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34168","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi Aray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-12T02:40:57+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\",\"datePublished\":\"2025-11-12T02:40:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"},\"wordCount\":2767,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\",\"name\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-12T02:40:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi","og_description":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi Aray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-12T02:40:57+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi","datePublished":"2025-11-12T02:40:57+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"},"wordCount":2767,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","name":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-12T02:40:57+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34168"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168\/revisions"}],"predecessor-version":[{"id":34169,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168\/revisions\/34169"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":34168,"date":"2025-11-12T05:40:57","date_gmt":"2025-11-12T02:40:57","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34168"},"modified":"2025-11-12T05:40:57","modified_gmt":"2025-11-12T02:40:57","slug":"svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","title":{"rendered":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi"},"content":{"rendered":"

<\/p>\n

SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi<\/h2>\n
Aray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve etkile\u015fimi daha sezgisel hale getiren unsurlar, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmezidir. Standart HTML form elemanlar\u0131 \u00e7o\u011fu zaman i\u015flevsel olsa da, g\u00f6rsel \u00e7ekicilik ve etkile\u015fim konusunda s\u0131n\u0131rl\u0131 kalabilirler. \u00d6zellikle bir aral\u0131k se\u00e7imi i\u00e7in kullan\u0131lan <\/code> eleman\u0131, varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fcyle olduk\u00e7a temel bir deneyim sunar. Ancak SVG’nin g\u00fcc\u00fc ve anime.js gibi animasyon k\u00fct\u00fcphanelerinin esnekli\u011fi bir araya getirildi\u011finde, bu basit eleman bile \u015fa\u015f\u0131rt\u0131c\u0131 derecede dinamik ve esnek bir aray\u00fcze d\u00f6n\u00fc\u015febilir. Bu makalede, SVG kullanarak \u00f6zel bir g\u00f6rsel aral\u0131k izleyici (track) ve i\u015faret\u00e7i (thumb) tasarlamay\u0131, JavaScript ile etkile\u015fimleri y\u00f6netmeyi ve anime.js ile ak\u0131c\u0131, esnek (elastik) animasyonlar ekleyerek kullan\u0131c\u0131ya benzersiz bir deneyim sunmay\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Giri\u015f: Neden Esnek Aral\u0131k Giri\u015fi?<\/h3>\nStandart bir <\/code> eleman\u0131, genellikle bir kayd\u0131rma \u00e7ubu\u011fu ve \u00fczerinde hareket eden bir d\u00fc\u011fmeden ibarettir. Bu basit yap\u0131, kullan\u0131c\u0131n\u0131n bir de\u011fer aral\u0131\u011f\u0131 i\u00e7inden se\u00e7im yapmas\u0131n\u0131 sa\u011flar. Ancak, bu eleman\u0131n g\u00f6rsel olarak \u00f6zelle\u015ftirilmesi, \u00f6zellikle taray\u0131c\u0131lar aras\u0131 tutarl\u0131l\u0131k sa\u011flamak ad\u0131na zorlay\u0131c\u0131 olabilir. Dahas\u0131, modern web uygulamalar\u0131, sadece i\u015flevselli\u011fi de\u011fil, ayn\u0131 zamanda esteti\u011fi ve etkile\u015fimi de \u00f6n planda tutar. Esnek bir aral\u0131k giri\u015fi, kullan\u0131c\u0131n\u0131n i\u015faret\u00e7iyi hareket ettirdi\u011finde veya b\u0131rakt\u0131\u011f\u0131nda g\u00f6rsel olarak tepki veren, hafif\u00e7e esneyen veya geri sekerek yerle\u015fen bir yap\u0131 sunar. Bu t\u00fcr bir geri bildirim, kullan\u0131c\u0131n\u0131n eylemlerini daha somut hale getirir ve etkile\u015fimi daha keyifli k\u0131lar.<\/p>\n
Bu makalede ele alaca\u011f\u0131m\u0131z yakla\u015f\u0131m, \u015fu temel teknolojileri bir araya getirecektir:<\/p>\n
*   HTML:<\/strong> Temel <\/code> eleman\u0131n\u0131 ve SVG konteynerini bar\u0131nd\u0131rmak i\u00e7in.
\n*   CSS:<\/strong> Temel stillendirme ve varsay\u0131lan aral\u0131k giri\u015fini gizlemek i\u00e7in.
\n*   SVG (Scalable Vector Graphics):<\/strong> \u00d6l\u00e7eklenebilir vekt\u00f6r grafikleri sayesinde, aral\u0131k izleyicisini, i\u015faret\u00e7iyi ve elastik efekti olu\u015fturan g\u00f6rsel bile\u015fenleri \u00e7izmek i\u00e7in. SVG’nin DOM (Belge Nesne Modeli) taraf\u0131ndan manip\u00fcle edilebilir olmas\u0131, dinamik grafikler olu\u015fturmam\u0131z\u0131 sa\u011flar.
\n*   JavaScript:<\/strong> Kullan\u0131c\u0131n\u0131n aral\u0131k giri\u015fiyle etkile\u015fimini (kayd\u0131rma, t\u0131klama, b\u0131rakma) yakalamak, SVG elemanlar\u0131n\u0131n konumunu ve \u015feklini dinamik olarak g\u00fcncellemek i\u00e7in.
\n*   anime.js:<\/strong> Hafif ve g\u00fc\u00e7l\u00fc bir animasyon k\u00fct\u00fcphanesi. Elastik efekti olu\u015fturan “geri sekme” animasyonlar\u0131n\u0131, i\u015faret\u00e7inin yumu\u015fak hareketini ve di\u011fer g\u00f6rsel ge\u00e7i\u015fleri kolayca uygulamak i\u00e7in kullan\u0131lacakt\u0131r.<\/p>\n
Bu teknolojilerin birle\u015fimi, sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda g\u00f6rsel olarak \u00e7arp\u0131c\u0131 ve etkile\u015fimli bir aral\u0131k giri\u015fi olu\u015fturmam\u0131za olanak tan\u0131yacak.<\/p>\n
Projenin Temelini Olu\u015fturma<\/h3>\nHerhangi bir web projesinde oldu\u011fu gibi, ilk ad\u0131m temel HTML yap\u0131s\u0131n\u0131 olu\u015fturmak ve gerekli k\u00fct\u00fcphaneleri dahil etmektir.<\/p>\n
\n\n\n    \n    \n    Esnek Aral\u0131k Giri\u015fi<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <div class=\"range-container\">\n        <input type=\"range\" id=\"elasticRange\" min=\"0\" max=\"100\" value=\"50\">\n        <svg id=\"rangeSvg\" viewBox=\"0 0 500 100\"><\/svg>\n    <\/div>\n\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/animejs@3.2.1\/lib\/anime.min.js\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Yukar\u0131daki HTML yap\u0131s\u0131nda:<\/p>\n<p>*   <code>range-container<\/code> div’i, aral\u0131k giri\u015fini ve SVG’yi sarmalayarak konumland\u0131rma ve stillendirme esnekli\u011fi sa\u011flar.<br \/>\n*   <code><input type=\"range\" id=\"elasticRange\" min=\"0\" max=\"100\" value=\"50\"><\/code> standart HTML aral\u0131k giri\u015fimizdir. Bu eleman\u0131 g\u00f6rsel olarak gizleyecek ve yerine SVG ile olu\u015fturdu\u011fumuz aray\u00fcz\u00fc kullanaca\u011f\u0131z. Ancak de\u011ferini ve olaylar\u0131n\u0131 JavaScript ile takip edece\u011fiz.<br \/>\n*   <code><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\"><\/svg><\/code> SVG \u00e7izim alan\u0131m\u0131zd\u0131r. <code>viewBox<\/code> \u00f6zelli\u011fi, SVG’nin kendi i\u00e7 koordinat sistemini tan\u0131mlar. Bu \u00f6rnekte, 0’dan 500’e geni\u015flik ve 0’dan 100’e y\u00fckseklik. Bu, SVG’nin boyutundan ba\u011f\u0131ms\u0131z olarak i\u00e7indeki elemanlar\u0131n konumunu ve boyutunu belirlememizi sa\u011flar.<br \/>\n*   <code>anime.min.js<\/code> ve <code>script.js<\/code> dosyalar\u0131, projemizin animasyon ve etkile\u015fim mant\u0131\u011f\u0131n\u0131 i\u00e7erecektir.<\/p>\n<p>\u015eimdi <code>style.css<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m. Temel amac\u0131m\u0131z, varsay\u0131lan HTML aral\u0131k giri\u015fini gizlemek ve SVG konteynerini uygun \u015fekilde konumland\u0131rmakt\u0131r.<\/p>\n<pre><code class=\"language-css\">body {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    margin: 0;\n    background-color: #f0f0f0;\n    font-family: sans-serif;\n}\n\n.range-container {\n    position: relative;\n    width: 500px; \/<em> SVG viewBox geni\u015fli\u011fi ile uyumlu <\/em>\/\n    height: 100px; \/<em> SVG viewBox y\u00fcksekli\u011fi ile uyumlu <\/em>\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#elasticRange {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    opacity: 0; \/<em> G\u00f6rsel olarak gizle <\/em>\/\n    cursor: pointer;\n    z-index: 10; \/<em> SVG'nin \u00fczerinde olsun ki t\u0131klama olaylar\u0131n\u0131 yakalayabilelim <\/em>\/\n}\n\n#rangeSvg {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    pointer-events: none; \/<em> SVG elemanlar\u0131n\u0131n fare olaylar\u0131n\u0131 do\u011frudan yakalamas\u0131n\u0131 engelle, input'a b\u0131rak <\/em>\/\n    overflow: visible; \/<em> Elastik efektin SVG s\u0131n\u0131rlar\u0131 d\u0131\u015f\u0131na ta\u015fmas\u0131na izin ver <\/em>\/\n}<\/code><\/pre>\n<p>Bu CSS ile <code><input type=\"range\"><\/code> eleman\u0131n\u0131 \u015feffaf hale getirerek g\u00f6rsel olarak gizledik ancak yine de t\u0131klanabilir ve s\u00fcr\u00fcklenebilir durumda b\u0131rakt\u0131k. Bu sayede taray\u0131c\u0131n\u0131n yerle\u015fik aral\u0131k giri\u015fi mant\u0131\u011f\u0131n\u0131 kullanmaya devam ederken, g\u00f6rsel temsili tamamen SVG’ye devredece\u011fiz. <code>pointer-events: none;<\/code> \u00f6zelli\u011fi SVG’nin kendisinin fare olaylar\u0131n\u0131 yakalamas\u0131n\u0131 engeller, b\u00f6ylece fare olaylar\u0131 alt\u0131ndaki HTML input eleman\u0131na ge\u00e7er.<\/p>\n<h3>SVG Yap\u0131s\u0131n\u0131 Tasarlama<\/h3>\n<p>\u015eimdi s\u0131ra, esnek aral\u0131k giri\u015fimizin g\u00f6rsel bile\u015fenlerini SVG ile olu\u015fturmaya geldi. Bu bile\u015fenler, temel izleyici (track), i\u015faret\u00e7i (thumb), mevcut de\u011feri g\u00f6steren bir metin ve elastik efekti yaratacak \u00f6zel bir yol (path) olacakt\u0131r.<\/p>\n<h4>Statik Bile\u015fenler (Track ve De\u011fer Etiketi)<\/h4>\n<p>SVG i\u00e7inde, aral\u0131k giri\u015finin ana hatt\u0131n\u0131 ve mevcut de\u011feri g\u00f6steren metin etiketini tan\u0131mlayal\u0131m. Bu elemanlar, JavaScript ile dinamik olarak g\u00fcncellenecek olsa da, ba\u015flang\u0131\u00e7 yap\u0131lar\u0131n\u0131 SVG i\u00e7inde belirlemek faydal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\">\n    <!-- Ana izleyici (track) -->\n    <line id=\"trackLine\" x1=\"50\" y1=\"50\" x2=\"450\" y2=\"50\" stroke=\"#ccc\" stroke-width=\"4\" stroke-linecap=\"round\" \/>\n\n    <!-- De\u011fer metni -->\n    <text id=\"valueText\" x=\"250\" y=\"30\" text-anchor=\"middle\" font-size=\"20\" fill=\"#333\">50<\/text>\n<\/svg><\/code><\/pre>\n<p>*   <code><line id=\"trackLine\" ... \/><\/code>: Bu \u00e7izgi, aral\u0131k giri\u015fimizin temel hatt\u0131n\u0131 olu\u015fturur. <code>x1<\/code>, <code>y1<\/code>, <code>x2<\/code>, <code>y2<\/code> koordinatlar\u0131 \u00e7izginin ba\u015flang\u0131\u00e7 ve biti\u015f noktalar\u0131n\u0131 belirler. <code>stroke<\/code> rengini, <code>stroke-width<\/code> kal\u0131nl\u0131\u011f\u0131n\u0131 ve <code>stroke-linecap=\"round\"<\/code> ile \u00e7izgi u\u00e7lar\u0131n\u0131n yuvarlak olmas\u0131n\u0131 sa\u011flad\u0131k.<br \/>\n*   <code><text id=\"valueText\" ... \/><\/code>: Bu metin eleman\u0131, se\u00e7ilen de\u011feri g\u00f6sterecektir. <code>x<\/code> ve <code>y<\/code> konumu, <code>text-anchor=\"middle\"<\/code> ile metnin yatayda ortalanmas\u0131 ve <code>font-size<\/code> gibi \u00f6zellikler tan\u0131mlanm\u0131\u015ft\u0131r. Ba\u015flang\u0131\u00e7 de\u011feri 50 olarak ayarlanm\u0131\u015ft\u0131r.<\/p>\n<h4>Dinamik Bile\u015fenler (Thumb ve Elastik Efekt)<\/h4>\n<p>\u0130\u015faret\u00e7i (thumb) ve elastik efekti sa\u011flayacak yol (path) en dinamik elemanlar\u0131m\u0131z olacak.<\/p>\n<pre><code class=\"language-html\"><svg id=\"rangeSvg\" viewBox=\"0 0 500 100\">\n    <!-- ... (trackLine ve valueText) ... -->\n\n    <!-- Elastik yol (path) -->\n    <!-- Ba\u015flang\u0131\u00e7ta d\u00fcz bir \u00e7izgi gibi g\u00f6r\u00fcnecek, ancak kontrol noktalar\u0131 ile esneyecek -->\n    <path id=\"elasticPath\" d=\"M50 50 Q250 50 450 50\" fill=\"none\" stroke=\"#666\" stroke-width=\"8\" stroke-linecap=\"round\" \/>\n\n    <!-- \u0130\u015faret\u00e7i (thumb) -->\n    <circle id=\"thumbCircle\" cx=\"250\" cy=\"50\" r=\"15\" fill=\"#007bff\" stroke=\"#fff\" stroke-width=\"2\" \/>\n<\/svg><\/code><\/pre>\n<p>*   <code><circle id=\"thumbCircle\" ... \/><\/code>: Bu daire, kullan\u0131c\u0131n\u0131n s\u00fcr\u00fckleyece\u011fi i\u015faret\u00e7idir. <code>cx<\/code> ve <code>cy<\/code> merkez koordinatlar\u0131, <code>r<\/code> yar\u0131\u00e7ap\u0131, <code>fill<\/code> rengi ve <code>stroke<\/code> kenarl\u0131k \u00f6zellikleri belirlenmi\u015ftir. Ba\u015flang\u0131\u00e7ta, <code>trackLine<\/code> ve <code>valueText<\/code> ile ayn\u0131 orta konumda (250, 50) yer alacakt\u0131r.<br \/>\n*   <code><path id=\"elasticPath\" ... \/><\/code>: Bu, elastik efektin kalbidir. <code>d<\/code> (data) \u00f6zelli\u011fi, SVG yolunun \u015feklini tan\u0131mlar. Burada <code>M<\/code> (moveto) ve <code>Q<\/code> (quadratic Bezier curve) komutlar\u0131n\u0131 kullan\u0131yoruz.<br \/>\n    *   <code>M50 50<\/code>: Yolun ba\u015flang\u0131\u00e7 noktas\u0131 (trackLine’\u0131n ba\u015flang\u0131c\u0131).<br \/>\n    *   <code>Q250 50 450 50<\/code>: Bu, bir kuadratik Bezier e\u011frisi \u00e7izer. <code>250 50<\/code> kontrol noktas\u0131d\u0131r ve <code>450 50<\/code> biti\u015f noktas\u0131d\u0131r (trackLine’\u0131n biti\u015fi). Ba\u015flang\u0131\u00e7ta, kontrol noktas\u0131 d\u00fcz \u00e7izginin \u00fczerinde oldu\u011fu i\u00e7in path d\u00fcz bir \u00e7izgi gibi g\u00f6r\u00fcnecektir. \u0130\u015faret\u00e7i hareket etti\u011finde, bu kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini dinamik olarak de\u011fi\u015ftirerek bir esneme efekti yarataca\u011f\u0131z. <code>stroke<\/code> ve <code>stroke-width<\/code> ile g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirledik. <code>fill=\"none\"<\/code> ile yolun i\u00e7ini doldurmad\u0131k.<\/p>\n<p>Bu temel SVG yap\u0131s\u0131 ile, aral\u0131k giri\u015fimizin g\u00f6rsel temelini atm\u0131\u015f olduk. \u015eimdi JavaScript ile bu elemanlar\u0131 canland\u0131rma zaman\u0131.<\/p>\n<h3>JavaScript ile Etkile\u015fim ve Hesaplamalar<\/h3>\n<p><code>script.js<\/code> dosyam\u0131zda, HTML aral\u0131k giri\u015finin de\u011ferini okuyacak, bu de\u011feri SVG koordinatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrecek ve SVG elemanlar\u0131n\u0131 g\u00fcncelleyecek mant\u0131\u011f\u0131 yazaca\u011f\u0131z. Ayr\u0131ca, fare olaylar\u0131n\u0131 dinleyerek elastik efekti tetikleyece\u011fiz.<\/p>\n<h4>DOM Elementlerini Se\u00e7me ve Ba\u015flang\u0131\u00e7 De\u011ferleri<\/h4>\n<p>\u00d6ncelikle, gerekli DOM elemanlar\u0131n\u0131 se\u00e7elim ve baz\u0131 yard\u0131mc\u0131 de\u011fi\u015fkenler tan\u0131mlayal\u0131m.<\/p>\n<pre><code class=\"language-javascript\">const elasticRange = document.getElementById('elasticRange');\nconst rangeSvg = document.getElementById('rangeSvg');\nconst trackLine = document.getElementById('trackLine');\nconst elasticPath = document.getElementById('elasticPath');\nconst thumbCircle = document.getElementById('thumbCircle');\nconst valueText = document.getElementById('valueText');\n\nconst svgWidth = 500; \/\/ SVG viewBox geni\u015fli\u011fi\nconst svgHeight = 100; \/\/ SVG viewBox y\u00fcksekli\u011fi\nconst trackY = svgHeight \/ 2; \/\/ Izleyicinin ve i\u015faret\u00e7inin dikey konumu (50)\nconst trackStartX = 50; \/\/ Izleyicinin ba\u015flang\u0131\u00e7 X konumu\nconst trackEndX = 450; \/\/ Izleyicinin biti\u015f X konumu\nconst trackLength = trackEndX - trackStartX; \/\/ Izleyicinin uzunlu\u011fu\n\nlet isDragging = false; \/\/ \u0130\u015faret\u00e7inin s\u00fcr\u00fcklenip s\u00fcr\u00fcklenmedi\u011fini takip eder\nlet initialThumbX = 0; \/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda i\u015faret\u00e7inin ba\u015flang\u0131\u00e7 X konumu\nlet initialMouseX = 0; \/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda farenin ba\u015flang\u0131\u00e7 X konumu\n\n\/\/ De\u011feri SVG X koordinat\u0131na d\u00f6n\u00fc\u015ft\u00fcren yard\u0131mc\u0131 fonksiyon\nfunction mapValueToSvgX(value) {\n    const min = parseFloat(elasticRange.min);\n    const max = parseFloat(elasticRange.max);\n    const normalizedValue = (value - min) \/ (max - min);\n    return trackStartX + normalizedValue * trackLength;\n}\n\n\/\/ SVG X koordinat\u0131n\u0131 de\u011fere d\u00f6n\u00fc\u015ft\u00fcren yard\u0131mc\u0131 fonksiyon (e\u011fer do\u011frudan SVG'yi s\u00fcr\u00fcklersek)\nfunction mapSvgXToValue(svgX) {\n    const min = parseFloat(elasticRange.min);\n    const max = parseFloat(elasticRange.max);\n    const normalizedX = (svgX - trackStartX) \/ trackLength;\n    return min + normalizedX * (max - min);\n}<\/code><\/pre>\n<p>Bu k\u0131s\u0131mda, t\u00fcm SVG elemanlar\u0131na ve HTML aral\u0131k giri\u015fine referanslar al\u0131yoruz. Ayr\u0131ca, SVG’nin boyutlar\u0131n\u0131 ve izleyicinin konumunu tan\u0131mlayan sabitler belirledik. <code>mapValueToSvgX<\/code> fonksiyonu, HTML aral\u0131k giri\u015finin say\u0131sal de\u011ferini al\u0131p, bu de\u011feri SVG i\u00e7indeki uygun <code>x<\/code> koordinat\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, i\u015faret\u00e7inin ve metin etiketinin do\u011fru konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Temel Thumb Hareketini Ger\u00e7ekle\u015ftirme<\/h4>\n<p>HTML aral\u0131k giri\u015finin <code>input<\/code> olay\u0131n\u0131 dinleyerek i\u015faret\u00e7iyi ve de\u011feri g\u00fcncelleyelim.<\/p>\n<pre><code class=\"language-javascript\">function updateSvgElements(value) {\n    const newX = mapValueToSvgX(value);\n\n    \/\/ \u0130\u015faret\u00e7iyi g\u00fcncelle\n    thumbCircle.setAttribute('cx', newX);\n\n    \/\/ De\u011fer metnini g\u00fcncelle\n    valueText.textContent = value;\n    valueText.setAttribute('x', newX);\n\n    \/\/ Elastik yolu g\u00fcncelle (\u015fimdilik d\u00fcz, daha sonra esnek hale gelecek)\n    \/\/ Kontrol noktas\u0131n\u0131n X'i i\u015faret\u00e7inin X'ine e\u015fit, Y'si trackY'ye e\u015fit\n    elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${newX} ${trackY} ${trackEndX} ${trackY}<\/code>);\n}\n\n\/\/ Ba\u015flang\u0131\u00e7 de\u011ferini ayarla\nupdateSvgElements(parseFloat(elasticRange.value));\n\nelasticRange.addEventListener('input', (e) => {\n    updateSvgElements(parseFloat(e.target.value));\n});<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131, <code>updateSvgElements<\/code> fonksiyonunu tan\u0131mlar. Bu fonksiyon, verilen bir de\u011fere g\u00f6re i\u015faret\u00e7inin (<code>thumbCircle<\/code>) <code>cx<\/code> \u00f6zelli\u011fini, metin etiketinin (<code>valueText<\/code>) i\u00e7eri\u011fini ve <code>x<\/code> konumunu g\u00fcnceller. Ayr\u0131ca, <code>elasticPath<\/code>‘in <code>d<\/code> \u00f6zelli\u011fini de g\u00fcnceller. \u015eimdilik, <code>elasticPath<\/code>‘in kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 <code>trackY<\/code>‘de tutarak d\u00fcz bir \u00e7izgi gibi g\u00f6r\u00fcnmesini sa\u011fl\u0131yoruz.<\/p>\n<p><code>elasticRange<\/code> eleman\u0131na bir <code>input<\/code> olay\u0131 dinleyicisi ekleyerek, kullan\u0131c\u0131 aral\u0131k giri\u015fini her de\u011fi\u015ftirdi\u011finde <code>updateSvgElements<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131yoruz.<\/p>\n<h4>Elastik Efektin Mant\u0131\u011f\u0131<\/h4>\n<p>Elastik efekti yaratmak i\u00e7in, kullan\u0131c\u0131n\u0131n i\u015faret\u00e7iyi s\u00fcr\u00fcklemeye ba\u015flad\u0131\u011f\u0131 ve b\u0131rakt\u0131\u011f\u0131 anlar\u0131 yakalamam\u0131z gerekiyor. Bu olaylar s\u0131ras\u0131nda, <code>elasticPath<\/code>‘in Bezier e\u011frisi kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak de\u011fi\u015ftirece\u011fiz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Fare olaylar\u0131 i\u00e7in bayrak\nlet isThumbDragging = false;\n\n\/\/ Elastik efekt i\u00e7in Bezier kontrol noktas\u0131\nlet controlPointY = trackY;\n\n\/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda\nelasticRange.addEventListener('mousedown', (e) => {\n    isThumbDragging = true;\n    \/\/ Animasyon ba\u015flat (hafif\u00e7e esneme)\n    anime({\n        targets: elasticPath,\n        d: [\n            { value: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY - 10} ${trackEndX} ${trackY}<\/code> }, \/\/ Yukar\u0131 do\u011fru hafif esneme\n            { value: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY + 10} ${trackEndX} ${trackY}<\/code> }  \/\/ A\u015fa\u011f\u0131 do\u011fru hafif esneme\n        ],\n        duration: 200,\n        easing: 'easeOutSine',\n        direction: 'alternate',\n        loop: true \/\/ S\u00fcr\u00fckleme bitene kadar hafif\u00e7e titre\u015fim\n    });\n});\n\n\/\/ S\u00fcr\u00fckleme bitti\u011finde\nelasticRange.addEventListener('mouseup', () => {\n    isThumbDragging = false;\n    \/\/ anime.js animasyonunu durdur\n    anime.remove(elasticPath);\n\n    \/\/ Elastik yolu orijinal konumuna geri getir\n    anime({\n        targets: elasticPath,\n        d: <code>M${trackStartX} ${trackY} Q${mapValueToSvgX(parseFloat(elasticRange.value))} ${trackY} ${trackEndX} ${trackY}<\/code>,\n        duration: 500,\n        easing: 'easeOutElastic(1, .8)' \/\/ Esnek geri sekme efekti\n    });\n});\n\n\/\/ Fare hareket etti\u011finde (s\u00fcr\u00fckleme s\u0131ras\u0131nda)\ndocument.addEventListener('mousemove', (e) => {\n    if (!isThumbDragging) return;\n\n    \/\/ Fare Y koordinat\u0131na g\u00f6re kontrol noktas\u0131n\u0131 ayarla\n    \/\/ Bu k\u0131s\u0131m, input'un kendisi s\u00fcr\u00fcklenirken fare Y'sinin do\u011frudan etkile\u015fimi i\u00e7in tasarlanm\u0131\u015ft\u0131r.\n    \/\/ Ancak input'un kendisi sadece X ekseninde hareket eder.\n    \/\/ Ger\u00e7ek bir elastik s\u00fcr\u00fckleme i\u00e7in, thumb'\u0131 do\u011frudan s\u00fcr\u00fcklememiz gerekir.\n    \/\/ \u015eimdilik, input'un X hareketiyle hafif bir Y esnemesi yapal\u0131m.\n    \n    \/\/ Basit bir elastik deformasyon i\u00e7in:\n    \/\/ \u0130\u015faret\u00e7inin mevcut X konumu ile track'in orta noktas\u0131 aras\u0131ndaki fark\u0131 kullanabiliriz.\n    const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n    const midPointX = (trackStartX + trackEndX) \/ 2;\n    const distanceFromMid = currentThumbX - midPointX;\n    \n    \/\/ Mesafe artt\u0131k\u00e7a esneme miktar\u0131n\u0131 art\u0131r\n    \/\/ Y ekseninde k\u00fc\u00e7\u00fck bir sapma yaratmak i\u00e7in\n    controlPointY = trackY + (distanceFromMid \/ trackLength) * 20; \/\/ 20 piksel max sapma\n\n    \/\/ Path'i g\u00fcncelle\n    elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${currentThumbX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n});<\/code><\/pre>\n<p>Bu b\u00f6l\u00fcmde, <code>mousedown<\/code>, <code>mouseup<\/code> ve <code>mousemove<\/code> olaylar\u0131n\u0131 dinliyoruz.<\/p>\n<p>*   <strong><code>mousedown<\/code>:<\/strong> Kullan\u0131c\u0131 aral\u0131k giri\u015fine t\u0131klad\u0131\u011f\u0131nda <code>isThumbDragging<\/code> bayra\u011f\u0131n\u0131 <code>true<\/code> yapar\u0131z. Bu noktada, <code>anime.js<\/code> kullanarak <code>elasticPath<\/code>‘e hafif bir “titre\u015fim” animasyonu ba\u015flat\u0131r\u0131z. Bu, kullan\u0131c\u0131n\u0131n etkile\u015fime ge\u00e7ti\u011fini g\u00f6rsel olarak belirtir. Kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini hafif\u00e7e yukar\u0131 ve a\u015fa\u011f\u0131 hareket ettirerek path’i esnetiriz.<br \/>\n*   <strong><code>mouseup<\/code>:<\/strong> Kullan\u0131c\u0131 fareyi b\u0131rakt\u0131\u011f\u0131nda <code>isThumbDragging<\/code> bayra\u011f\u0131n\u0131 <code>false<\/code> yapar\u0131z. \u00d6nceki animasyonu durdururuz (<code>anime.remove(elasticPath)<\/code>). Ard\u0131ndan, <code>anime.js<\/code>‘nin <code>easeOutElastic<\/code> kolayla\u015ft\u0131rma fonksiyonunu kullanarak <code>elasticPath<\/code>‘i orijinal d\u00fcz konumuna (kontrol noktas\u0131n\u0131n <code>y<\/code>‘si <code>trackY<\/code>‘ye d\u00f6ner) esnek bir \u015fekilde geri getiririz. Bu, “geri sekme” efektini yarat\u0131r.<br \/>\n*   <strong><code>mousemove<\/code>:<\/strong> Kullan\u0131c\u0131 s\u00fcr\u00fckleme yaparken (fare hareket ederken), <code>elasticPath<\/code>‘in kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak g\u00fcncelleriz. Burada, i\u015faret\u00e7inin <code>x<\/code> konumu ile track’in orta noktas\u0131 aras\u0131ndaki fark\u0131 kullanarak bir <code>y<\/code> sapmas\u0131 olu\u015fturuyoruz. \u0130\u015faret\u00e7i merkezden ne kadar uzakla\u015f\u0131rsa, <code>elasticPath<\/code> de o kadar fazla esner. <code>Q<\/code> komutunun ikinci parametresi (kontrol noktas\u0131n\u0131n <code>y<\/code>‘si) bu esnekli\u011fi sa\u011flar.<\/p>\n<p><strong>\u00d6nemli Not:<\/strong> Yukar\u0131daki <code>mousemove<\/code> mant\u0131\u011f\u0131, <code><input type=\"range\"><\/code> eleman\u0131n\u0131n varsay\u0131lan s\u00fcr\u00fckleme davran\u0131\u015f\u0131na dayan\u0131r. Kullan\u0131c\u0131, HTML input’u s\u00fcr\u00fckledi\u011finde <code>input<\/code> olay\u0131 tetiklenir ve <code>updateSvgElements<\/code> \u00e7a\u011fr\u0131l\u0131r. <code>mousemove<\/code> olay\u0131 ise daha \u00e7ok fare hareketine tepki vermek i\u00e7indir. E\u011fer do\u011frudan SVG i\u015faret\u00e7isini s\u00fcr\u00fckleme mant\u0131\u011f\u0131 kuracak olsayd\u0131k, <code>mousemove<\/code> i\u00e7inde i\u015faret\u00e7inin <code>cx<\/code>‘ini ve buna ba\u011fl\u0131 olarak HTML input’un de\u011ferini g\u00fcncellememiz gerekirdi. Ancak bu senaryoda, HTML input’u gizleyip onun olaylar\u0131n\u0131 kullanmak daha basit bir yakla\u015f\u0131m sunar. Bu nedenle <code>mousemove<\/code> olay\u0131nda <code>elasticPath<\/code>‘in <code>y<\/code> esnemesini, input’un mevcut de\u011ferine g\u00f6re hesaplamak daha uygun olacakt\u0131r.<\/p>\n<h3>anime.js ile Animasyonlar\u0131 Entegre Etme<\/h3>\n<p><code>anime.js<\/code> k\u00fct\u00fcphanesi, JavaScript ile karma\u015f\u0131k animasyonlar\u0131 \u00e7ok daha kolay hale getirir. \u00d6zellikle Bezier e\u011frileri gibi SVG \u00f6zelliklerinin animasyonu ve esnek “easing” fonksiyonlar\u0131 (kolayla\u015ft\u0131rma fonksiyonlar\u0131) i\u00e7in idealdir. Yukar\u0131daki kodda zaten <code>anime.js<\/code>‘yi kullanmaya ba\u015flad\u0131k, ancak daha detayl\u0131 inceleyelim.<\/p>\n<h4>Thumb ve De\u011fer Etiketi Animasyonlar\u0131<\/h4>\n<p>\u0130\u015faret\u00e7i ve de\u011fer metni hareket etti\u011finde, bu hareketleri daha ak\u0131c\u0131 hale getirebiliriz. \u00d6rne\u011fin, i\u015faret\u00e7i bir konuma atlarken yumu\u015fak bir ge\u00e7i\u015f sa\u011flamak.<\/p>\n<pre><code class=\"language-javascript\">function updateSvgElementsAnimated(value) {\n    const newX = mapValueToSvgX(value);\n\n    \/\/ Thumb animasyonu\n    anime({\n        targets: thumbCircle,\n        cx: newX,\n        duration: 300,\n        easing: 'easeOutQuad' \/\/ Yumu\u015fak bir h\u0131zlanma ve yava\u015flama\n    });\n\n    \/\/ De\u011fer metni animasyonu (konum ve i\u00e7erik)\n    anime({\n        targets: valueText,\n        x: newX,\n        duration: 300,\n        easing: 'easeOutQuad',\n        update: function() {\n            \/\/ Animasyon s\u0131ras\u0131nda metin i\u00e7eri\u011fini g\u00fcncelle\n            \/\/ Bu, anime.js'nin hedefi do\u011frudan metin i\u00e7eri\u011fi olmad\u0131\u011f\u0131 i\u00e7in gereklidir\n            valueText.textContent = Math.round(value); \/\/ Yuvarlanm\u0131\u015f de\u011fer g\u00f6sterimi\n        }\n    });\n\n    \/\/ Elastik yolun kontrol noktas\u0131n\u0131 g\u00fcncelle (daha sonra esneme ile birle\u015fecek)\n    \/\/ \u015eimdilik, sadece X koordinat\u0131n\u0131 g\u00fcncelleyelim.\n    \/\/ Y koordinat\u0131 mousedown\/mouseup\/mousemove olaylar\u0131nda y\u00f6netilecek.\n    elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${newX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n}\n\n\/\/ updateSvgElements yerine updateSvgElementsAnimated kullanaca\u011f\u0131z\nupdateSvgElementsAnimated(parseFloat(elasticRange.value));\n\nelasticRange.addEventListener('input', (e) => {\n    updateSvgElementsAnimated(parseFloat(e.target.value));\n});<\/code><\/pre>\n<p>Burada, <code>updateSvgElementsAnimated<\/code> fonksiyonu, <code>anime.js<\/code> kullanarak <code>thumbCircle<\/code>‘\u0131n <code>cx<\/code> \u00f6zelli\u011fini ve <code>valueText<\/code>‘in <code>x<\/code> \u00f6zelli\u011fini animasyonlu bir \u015fekilde g\u00fcnceller. <code>easing: 'easeOutQuad'<\/code> gibi kolayla\u015ft\u0131rma fonksiyonlar\u0131, animasyonun ba\u015flang\u0131c\u0131n\u0131 ve biti\u015fini daha do\u011fal hale getirir. <code>valueText<\/code> i\u00e7in <code>update<\/code> callback’ini kullanarak, animasyon s\u0131ras\u0131nda metin i\u00e7eri\u011fini g\u00fcncel tutar\u0131z.<\/p>\n<h4>Elastik \u00c7izgi Animasyonu<\/h4>\n<p>Daha \u00f6nce <code>mousedown<\/code> ve <code>mouseup<\/code> olaylar\u0131nda kulland\u0131\u011f\u0131m\u0131z <code>anime.js<\/code> animasyonlar\u0131, elastik efektin \u00f6z\u00fcn\u00fc olu\u015fturur.<\/p>\n<p>*   <strong>S\u00fcr\u00fckleme Ba\u015flang\u0131c\u0131 (Esnek Titre\u015fim):<\/strong><\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('mousedown', (e) => {\n        isThumbDragging = true;\n        \/\/ Mevcut thumb pozisyonunu al\n        const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n        \n        anime({\n            targets: elasticPath,\n            d: [\n                { value: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY - 10} ${trackEndX} ${trackY}<\/code> }, \/\/ Yukar\u0131 esneme\n                { value: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY + 10} ${trackEndX} ${trackY}<\/code> }  \/\/ A\u015fa\u011f\u0131 esneme\n            ],\n            duration: 200,\n            easing: 'easeOutSine',\n            direction: 'alternate',\n            loop: true,\n            \/\/ Animasyon ba\u015flad\u0131\u011f\u0131nda controlPointY'yi ba\u015flang\u0131\u00e7 esneme de\u011ferine ayarla\n            begin: function() {\n                 controlPointY = trackY - 10; \/\/ Ba\u015flang\u0131\u00e7ta yukar\u0131 esneme\n            }\n        });\n    });<\/code><\/pre>\n<p>    Bu animasyon, kullan\u0131c\u0131n\u0131n t\u0131klamas\u0131yla path’in kontrol noktas\u0131n\u0131n <code>y<\/code>‘sini hafif\u00e7e yukar\u0131 ve a\u015fa\u011f\u0131 hareket ettirerek bir “canl\u0131l\u0131k” hissi verir.<\/p>\n<p>*   <strong>S\u00fcr\u00fckleme Biti\u015fi (Geri Sekme):<\/strong><\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('mouseup', () => {\n        isThumbDragging = false;\n        anime.remove(elasticPath); \/\/ Titre\u015fim animasyonunu durdur\n\n        const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n\n        \/\/ Elastik yolu orijinal konumuna geri getir (esnek geri sekme)\n        anime({\n            targets: elasticPath,\n            d: <code>M${trackStartX} ${trackY} Q${currentThumbX} ${trackY} ${trackEndX} ${trackY}<\/code>,\n            duration: 700, \/\/ Daha uzun s\u00fcre, daha belirgin sekme\n            easing: 'easeOutElastic(1, .8)', \/\/ Esnek geri sekme efekti\n            complete: function() {\n                controlPointY = trackY; \/\/ Animasyon bitince kontrol noktas\u0131n\u0131 merkeze al\n            }\n        });\n    });<\/code><\/pre>\n<p>    Bu, <code>anime.js<\/code>‘nin en etkileyici \u00f6zelliklerinden birini kullan\u0131r: <code>easeOutElastic<\/code>. Bu kolayla\u015ft\u0131rma fonksiyonu, bir yay\u0131n geri sekme hareketini taklit ederek, path’in d\u00fcz konumuna geri d\u00f6nerken hafif\u00e7e ileri geri sal\u0131nmas\u0131n\u0131 sa\u011flar. Bu, “elastik” hissinin temelini olu\u015fturur. <code>d<\/code> \u00f6zelli\u011fini do\u011frudan hedefleyerek, Bezier e\u011frisinin kontrol noktas\u0131n\u0131n <code>y<\/code> de\u011ferini animasyonlu bir \u015fekilde <code>trackY<\/code>‘ye geri d\u00f6nd\u00fcr\u00fcyoruz.<\/p>\n<p>*   <strong>S\u00fcr\u00fckleme S\u0131ras\u0131nda Esneme:<\/strong><br \/>\n    <code>mousemove<\/code> olay\u0131nda, <code>elasticPath<\/code>‘in <code>d<\/code> \u00f6zelli\u011fini do\u011frudan g\u00fcncelliyoruz. Bu, ger\u00e7ek zamanl\u0131 bir etkile\u015fim oldu\u011fu i\u00e7in <code>anime.js<\/code> burada do\u011frudan bir animasyon ba\u015flatmak yerine, anl\u0131k g\u00f6rsel geri bildirim sa\u011flamak i\u00e7in kullan\u0131l\u0131r. <code>controlPointY<\/code> de\u011fi\u015fkenini <code>trackY<\/code>‘den sapt\u0131rarak Bezier e\u011frisini deforme ediyoruz.<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('mousemove', (e) => {\n        if (!isThumbDragging) return;\n\n        const currentThumbX = mapValueToSvgX(parseFloat(elasticRange.value));\n        const midPointX = (trackStartX + trackEndX) \/ 2;\n        const distanceFromMid = currentThumbX - midPointX;\n        \n        \/\/ Mesafe artt\u0131k\u00e7a esneme miktar\u0131n\u0131 art\u0131r.\n        \/\/ \u00d6rne\u011fin, maksimum 30px sapma ve ters y\u00f6nde esneme i\u00e7in:\n        \/\/ \u0130\u015faret\u00e7i ortan\u0131n solundaysa yukar\u0131, sa\u011f\u0131ndaysa a\u015fa\u011f\u0131 esner.\n        controlPointY = trackY + (distanceFromMid \/ (trackLength \/ 2)) * -15; \/\/ -15 max sapma, y\u00f6n\u00fc ters \u00e7evirir\n        \n        elasticPath.setAttribute('d', <code>M${trackStartX} ${trackY} Q${currentThumbX} ${controlPointY} ${trackEndX} ${trackY}<\/code>);\n    });<\/code><\/pre>\n<p>    Burada <code>controlPointY<\/code> hesaplamas\u0131n\u0131 biraz daha geli\u015ftirerek, i\u015faret\u00e7inin orta noktadan uzakla\u015fma oran\u0131na g\u00f6re bir <code>y<\/code> sapmas\u0131 sa\u011fl\u0131yoruz. \u0130\u015faret\u00e7i sol taraftaysa <code>distanceFromMid<\/code> negatif olacak ve <code>controlPointY<\/code> <code>trackY<\/code>‘den b\u00fcy\u00fck olacak (path a\u015fa\u011f\u0131 esneyecek). Sa\u011f taraftaysa <code>distanceFromMid<\/code> pozitif olacak ve <code>controlPointY<\/code> <code>trackY<\/code>‘den k\u00fc\u00e7\u00fck olacak (path yukar\u0131 esneyecek). Bu, daha dinamik bir esneme efekti sa\u011flar.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve \u0130yile\u015ftirmeler<\/h3>\n<p>Bu temel yap\u0131 \u00fczerinde, kullan\u0131c\u0131 deneyimini ve uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in \u00e7e\u015fitli geli\u015ftirmeler yap\u0131labilir.<\/p>\n<h4>Dokunmatik Cihaz Deste\u011fi<\/h4>\n<p>Modern web, mobil cihazlar\u0131 da desteklemelidir. Fare olaylar\u0131na ek olarak, dokunmatik olaylar\u0131 (<code>touchstart<\/code>, <code>touchmove<\/code>, <code>touchend<\/code>) dinleyerek aral\u0131k giri\u015fini dokunmatik ekranlarda da kullan\u0131labilir hale getirebiliriz. Mant\u0131k, fare olaylar\u0131yla benzerdir, ancak <code>e.clientX<\/code> yerine <code>e.touches[0].clientX<\/code> gibi dokunmatik koordinatlar\u0131 kullanmak gerekir.<\/p>\n<pre><code class=\"language-javascript\">elasticRange.addEventListener('touchstart', (e) => {\n    isThumbDragging = true;\n    \/\/ ... mousedown ile ayn\u0131 animasyonlar ...\n});\n\nelasticRange.addEventListener('touchend', () => {\n    isThumbDragging = false;\n    \/\/ ... mouseup ile ayn\u0131 animasyonlar ...\n});\n\ndocument.addEventListener('touchmove', (e) => {\n    if (!isThumbDragging) return;\n    \/\/ ... mousemove ile ayn\u0131 mant\u0131k, ancak e.touches[0].clientX kullan\u0131n ...\n    \/\/ e.preventDefault() eklemek kayd\u0131rmay\u0131 engeller\n});<\/code><\/pre>\n<h4>Performans Optimizasyonlar\u0131<\/h4>\n<p><code>mousemove<\/code> ve <code>touchmove<\/code> gibi olaylar \u00e7ok s\u0131k tetiklenebilir. Bu olaylar i\u00e7inde yo\u011fun hesaplamalar yapmak performans\u0131 etkileyebilir.<\/p>\n<p>*   <strong>Debouncing\/Throttling:<\/strong> <code>mousemove<\/code> olay dinleyicisi i\u00e7indeki pahal\u0131 i\u015flemleri, belirli bir zaman aral\u0131\u011f\u0131nda sadece bir kez veya son tetiklenmeden sonra belirli bir s\u00fcre ge\u00e7tikten sonra \u00e7al\u0131\u015ft\u0131rmak i\u00e7in debouncing veya throttling teknikleri kullan\u0131labilir. Ancak, ger\u00e7ek zamanl\u0131 g\u00f6rsel geri bildirim i\u00e7in bu her zaman uygun olmayabilir.<br \/>\n*   <strong><code>requestAnimationFrame<\/code>:<\/strong> Animasyonlar\u0131 ve DOM g\u00fcncellemelerini taray\u0131c\u0131n\u0131n sonraki yeniden \u00e7izim d\u00f6ng\u00fcs\u00fcne senkronize etmek i\u00e7in <code>requestAnimationFrame<\/code> kullanmak, daha ak\u0131c\u0131 animasyonlar sa\u011flar ve taray\u0131c\u0131 y\u00fck\u00fcn\u00fc azalt\u0131r. \u00d6zellikle <code>mousemove<\/code> i\u00e7indeki SVG g\u00fcncellemeleri i\u00e7in faydal\u0131d\u0131r.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility)<\/h4>\n<p>Her zaman oldu\u011fu gibi, eri\u015filebilirlik \u00f6nemlidir. Gizledi\u011fimiz <code><input type=\"range\"><\/code> eleman\u0131, klavye ile gezinme ve ekran okuyucular i\u00e7in temel eri\u015filebilirlik katman\u0131n\u0131 sa\u011flar. Ancak, g\u00f6rsel olarak sundu\u011fumuz SVG aray\u00fcz\u00fcn\u00fcn de eri\u015filebilir oldu\u011fundan emin olmak i\u00e7in ek ad\u0131mlar at\u0131labilir:<\/p>\n<p>*   <strong>ARIA (Accessible Rich Internet Applications) Nitelikleri:<\/strong> SVG elemanlar\u0131na <code>aria-labelledby<\/code> veya <code>aria-describedby<\/code> gibi nitelikler ekleyerek, ekran okuyuculara daha fazla bilgi sa\u011flayabiliriz.<br \/>\n*   <strong>Odak Y\u00f6netimi:<\/strong> SVG elemanlar\u0131n\u0131n klavye ile odaklanabilirli\u011fini sa\u011flamak i\u00e7in <code>tabindex<\/code> niteli\u011fi kullan\u0131labilir, ancak bizim durumumuzda gizli HTML input eleman\u0131 zaten bu i\u015flevi g\u00f6r\u00fcyor.<\/p>\n<h4>Tema ve \u00d6zelle\u015ftirme<\/h4>\n<p>SVG ve CSS de\u011fi\u015fkenleri kullanarak, aral\u0131k giri\u015finin renklerini, kal\u0131nl\u0131klar\u0131n\u0131 ve di\u011fer g\u00f6rsel \u00f6zelliklerini kolayca \u00f6zelle\u015ftirilebilir hale getirebiliriz.<\/p>\n<pre><code class=\"language-css\">:root {\n    --track-color: #ccc;\n    --thumb-color: #007bff;\n    --elastic-color: #666;\n    --text-color: #333;\n}\n\n#trackLine {\n    stroke: var(--track-color);\n}\n#thumbCircle {\n    fill: var(--thumb-color);\n}\n#elasticPath {\n    stroke: var(--elastic-color);\n}\n#valueText {\n    fill: var(--text-color);\n}<\/code><\/pre>\n<p>Bu \u015fekilde, tek bir yerden t\u00fcm renkleri de\u011fi\u015ftirebiliriz.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bu makalede, standart bir HTML <code><input type=\"range\"><\/code> eleman\u0131n\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015farak, SVG ve anime.js k\u00fct\u00fcphanesinin g\u00fcc\u00fcn\u00fc birle\u015ftirerek nas\u0131l g\u00f6rsel olarak zengin ve etkile\u015fimli, esnek bir aral\u0131k giri\u015fi olu\u015fturulabilece\u011fini detayl\u0131 bir \u015fekilde inceledik.<\/p>\n<p>*   <strong>HTML ve CSS:<\/strong> Temel yap\u0131y\u0131 kurarak ve varsay\u0131lan aral\u0131k giri\u015fini gizleyerek, \u00f6zel g\u00f6rselle\u015ftirmemize yer a\u00e7t\u0131k.<br \/>\n*   <strong>SVG:<\/strong> Izleyici, i\u015faret\u00e7i, de\u011fer metni ve \u00f6zellikle elastik efekti sa\u011flayan Bezier e\u011frisine sahip <code>path<\/code> eleman\u0131n\u0131 \u00e7izmek i\u00e7in SVG’nin esnekli\u011finden faydaland\u0131k. SVG’nin DOM taraf\u0131ndan manip\u00fcle edilebilir olmas\u0131, dinamik g\u00fcncellemeler i\u00e7in kritik \u00f6neme sahipti.<br \/>\n*   <strong>JavaScript:<\/strong> HTML aral\u0131k giri\u015finin de\u011ferini SVG koordinatlar\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek, elemanlar\u0131n konumunu ve \u015feklini dinamik olarak g\u00fcncellemek ve fare\/dokunmatik olaylar\u0131 yakalayarak etkile\u015fimleri y\u00f6netmek i\u00e7in JavaScript’i kulland\u0131k. \u00d6zellikle <code>mousemove<\/code> olay\u0131nda Bezier kontrol noktas\u0131n\u0131n <code>y<\/code> koordinat\u0131n\u0131 dinamik olarak de\u011fi\u015ftirerek esneme efektini sa\u011flad\u0131k.<br \/>\n*   <strong>anime.js:<\/strong> \u0130\u015faret\u00e7inin ve de\u011fer metninin yumu\u015fak hareketleri i\u00e7in, ve en \u00f6nemlisi, kullan\u0131c\u0131n\u0131n fareyi b\u0131rakt\u0131\u011f\u0131nda <code>elasticPath<\/code>‘in <code>easeOutElastic<\/code> kolayla\u015ft\u0131rma fonksiyonu ile esnek bir \u015fekilde geri sekmesini sa\u011flamak i\u00e7in anime.js’nin g\u00fcc\u00fcnden faydaland\u0131k. Bu, kullan\u0131c\u0131ya g\u00f6rsel olarak tatmin edici bir geri bildirim sa\u011flad\u0131.<\/p>\n<p>Bu proje, sadece bir aral\u0131k giri\u015fini \u00f6zelle\u015ftirmekle kalmay\u0131p, ayn\u0131 zamanda modern web geli\u015ftirme tekniklerinin ve k\u00fct\u00fcphanelerinin bir araya gelerek nas\u0131l yenilik\u00e7i ve kullan\u0131c\u0131 dostu aray\u00fczler yaratabilece\u011fini de g\u00f6stermektedir. SVG’nin vekt\u00f6r tabanl\u0131 grafikleri, anime.js’nin ak\u0131c\u0131 animasyon yetenekleri ve JavaScript’in etkile\u015fim y\u00f6netimi, web uygulamalar\u0131na g\u00f6rsel bir \u00e7ekicilik ve \u00fcst d\u00fczey bir kullan\u0131c\u0131 deneyimi katman\u0131n g\u00fc\u00e7l\u00fc bir yolunu sunar. Bu temel \u00fczerine in\u015fa ederek, farkl\u0131 form elemanlar\u0131 i\u00e7in de benzer yarat\u0131c\u0131 etkile\u015fimler tasarlamak m\u00fcmk\u00fcnd\u00fcr.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\nAray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34168","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi Aray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-12T02:40:57+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\",\"datePublished\":\"2025-11-12T02:40:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"},\"wordCount\":2767,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\",\"name\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-12T02:40:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi","og_description":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi Aray\u00fcz tasar\u0131m\u0131nda kullan\u0131c\u0131 deneyimini (UX) zenginle\u015ftiren ve e","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-12T02:40:57+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"20 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi","datePublished":"2025-11-12T02:40:57+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"},"wordCount":2767,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/","name":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-12T02:40:57+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-ve-anime-js-ile-esnek-bir-aralik-girisi-range-input-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG ve anime.js ile Esnek Bir Aral\u0131k Giri\u015fi (Range Input) Olu\u015fturma Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34168"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168\/revisions"}],"predecessor-version":[{"id":34169,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34168\/revisions\/34169"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}