Kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve uygulaman\u0131za mevsimsel bir dokunu\u015f katmak ister misiniz? K\u0131\u015f aylar\u0131nda veya \u00f6zel g\u00fcnlerde uygulaman\u0131za ekleyece\u011finiz basit bir kar efekti, kullan\u0131c\u0131lar\u0131n\u0131zda ho\u015f bir s\u00fcrpriz etkisi yaratabilir. Bu teknik makalede, modern JavaScript framework’lerinin karma\u015f\u0131kl\u0131\u011f\u0131na girmeden, Stimulus.js’in sadeli\u011fi ve g\u00fcc\u00fcyle uygulaman\u0131za nas\u0131l dinamik bir kar efekti ekleyebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Uygulaman\u0131za g\u00f6rsel efektler eklemek, sadece estetik bir tercih olman\u0131n \u00f6tesinde, kullan\u0131c\u0131 etkile\u015fimini ve marka alg\u0131s\u0131n\u0131 g\u00fc\u00e7lendiren \u00f6nemli bir stratejidir. Kar efekti gibi mevsimsel dokunu\u015flar, \u00f6zellikle belirli d\u00f6nemlerde uygulaman\u0131z\u0131n ruhunu yans\u0131tarak kullan\u0131c\u0131lar\u0131n\u0131zla daha derin bir ba\u011f kurman\u0131za yard\u0131mc\u0131 olabilir.<\/p>\n
G\u00f6rsel olarak \u00e7ekici ve dinamik bir aray\u00fcz, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda daha fazla zaman ge\u00e7irmesini sa\u011flar. Kar efekti, monoton bir aray\u00fcze ne\u015fe ve canl\u0131l\u0131k katarak kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla etkile\u015fimini art\u0131rabilir. Bu t\u00fcr k\u00fc\u00e7\u00fck detaylar, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 “sevimli” veya “\u00f6zenli” bulmas\u0131na yol a\u00e7ar.<\/p>\n
\u00d6zellikle k\u0131\u015f tatilleri d\u00f6neminde, uygulaman\u0131zda kar efekti kullanmak, mevsimin ruhunu yakalayarak kullan\u0131c\u0131lar\u0131n\u0131za s\u0131cak bir kar\u015f\u0131lama sunar. Bu, e-ticaret siteleri i\u00e7in sat\u0131\u015flar\u0131 art\u0131rabilir, sosyal medya uygulamalar\u0131 i\u00e7in etkile\u015fimi g\u00fc\u00e7lendirebilir veya sadece bir blog sitesi i\u00e7in ho\u015f bir atmosfer yaratabilir. Mevsimsel temalar, g\u00fcncel olaylarla uyum sa\u011flayarak uygulaman\u0131z\u0131n “ya\u015fayan” bir yap\u0131ya sahip oldu\u011funu g\u00f6sterir.<\/p>\n
Uygulaman\u0131za g\u00f6sterdi\u011finiz \u00f6zen ve detaylara verdi\u011finiz \u00f6nem, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n markan\u0131za olan ba\u011fl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Kullan\u0131c\u0131lar, kendilerini \u00f6zel hissettiren ve beklentilerinin \u00f6tesine ge\u00e7en deneyimler sunan markalar\u0131 tercih etme e\u011filimindedir. Basit ama etkili bir kar efekti, markan\u0131z\u0131n kullan\u0131c\u0131 deneyimine ne kadar de\u011fer verdi\u011fini g\u00f6steren k\u00fc\u00e7\u00fck ama g\u00fc\u00e7l\u00fc bir mesaj olabilir.<\/p>\n
Stimulus, HTML’inize davran\u0131\u015f eklemek i\u00e7in tasarlanm\u0131\u015f hafif bir JavaScript framework’\u00fcd\u00fcr. Modern web uygulamalar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015f\u0131lan karma\u015f\u0131k JavaScript k\u00fct\u00fcphanelerinin aksine, Stimulus mevcut HTML’inizi g\u00fc\u00e7lendirmeye odaklan\u0131r ve “HTML’iniz zaten oradad\u0131r” felsefesini benimser.<\/p>\n
Stimulus, \u00fc\u00e7 temel kavram \u00fczerine kuruludur: Controllers (Kontrolc\u00fcler)<\/strong>, Targets (Hedefler)<\/strong> ve Actions (Eylemler)<\/strong>. Kontrolc\u00fcler, belirli bir HTML b\u00f6l\u00fcm\u00fcn\u00fc y\u00f6neten JavaScript s\u0131n\u0131flar\u0131d\u0131r. Hedefler, kontrolc\u00fcn\u00fcn i\u00e7inde eri\u015fmek istedi\u011finiz HTML elementleridir. Eylemler ise, kullan\u0131c\u0131 etkile\u015fimlerine (t\u0131klama, fare \u00fczerinde gezme vb.) yan\u0131t veren metotlard\u0131r. Bu basit yap\u0131, Stimulus’u \u00f6\u011frenmesi ve kullanmas\u0131 son derece kolay hale getirir.<\/p>\n Stimulus, minimal boyutlu ve h\u0131zl\u0131 bir k\u00fct\u00fcphanedir. Bu sayede, uygulaman\u0131z\u0131n y\u00fcklenme s\u00fcresini veya \u00e7al\u0131\u015fma performans\u0131n\u0131 olumsuz etkilemez. Kar efekti gibi g\u00f6rsel a\u00e7\u0131dan yo\u011fun olabilecek bir \u00f6zellik eklerken, performans\u0131n korunmas\u0131 kritik \u00f6neme sahiptir. Stimulus’un hafif yap\u0131s\u0131, bu t\u00fcr dinamik efektleri uygulaman\u0131za sorunsuz bir \u015fekilde entegre etmenizi sa\u011flar.<\/p>\n Stimulus, mevcut bir projeye eklemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. \u00c7o\u011fu modern web projesi (\u00f6zellikle Rails projeleri), Stimulus’u varsay\u0131lan olarak destekler veya kolayca entegre edilebilir bir yap\u0131ya sahiptir. Bu, uygulaman\u0131z\u0131n mevcut mimarisini de\u011fi\u015ftirmeden, h\u0131zl\u0131ca kar efekti gibi yeni \u00f6zellikler ekleyebilece\u011finiz anlam\u0131na gelir.<\/p>\n Kar efektini uygulamak i\u00e7in \u00f6ncelikle basit bir HTML yap\u0131s\u0131na ve bu yap\u0131ya can verecek temel CSS stillerine ihtiyac\u0131m\u0131z var. Amac\u0131m\u0131z, her bir kar tanesini temsil eden k\u00fc\u00e7\u00fck HTML elementleri olu\u015fturmak ve bunlar\u0131 CSS ile hareketlendirmektir.<\/p>\n T\u00fcm kar tanelerinin i\u00e7inde yer alaca\u011f\u0131 bir kapsay\u0131c\u0131 elemente ihtiyac\u0131m\u0131z var. Bu kapsay\u0131c\u0131, kar efektinin uygulaman\u0131z\u0131n hangi b\u00f6l\u00fcm\u00fcnde g\u00f6r\u00fcnece\u011fini kontrol etmemizi sa\u011flayacak ve Stimulus kontrolc\u00fcm\u00fcz i\u00e7in ana hedef olacakt\u0131r.<\/p>\n <\/code> Her bir kar tanesinin nas\u0131l g\u00f6r\u00fcnece\u011fini ve nerede duraca\u011f\u0131n\u0131 belirlemek i\u00e7in temel CSS stilleri tan\u0131mlayaca\u011f\u0131z. Kar taneleri genellikle k\u00fc\u00e7\u00fck, beyaz ve yuvarlak veya kare \u015fekilli olurlar.<\/p>\n <\/code> Kar tanelerinin yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru d\u00fc\u015fmesini sa\u011flamak i\u00e7in CSS <\/code> Stimulus kontrolc\u00fcm\u00fcz, kar tanelerini dinamik olarak olu\u015fturacak, konumland\u0131racak ve animasyonlar\u0131n\u0131 y\u00f6netecek JavaScript mant\u0131\u011f\u0131n\u0131 i\u00e7erecektir.<\/p>\n \u00d6ncelikle <\/code><\/p>\n Bu fonksiyon, her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda yeni bir Stimulus kontrolc\u00fcs\u00fcn\u00fc olu\u015fturduktan sonra, onu HTML'e ba\u011flamak olduk\u00e7a basittir.<\/p>\n Kar efektinin g\u00f6r\u00fcnmesini istedi\u011finiz ana kapsay\u0131c\u0131ya Performans ve Hafiflik<\/h4>\n
Mevcut Projelere Kolay Entegrasyon<\/h4>\n
Kar Efekti \u0130\u00e7in Temel HTML Yap\u0131s\u0131 ve CSS Haz\u0131rl\u0131\u011f\u0131<\/h3>\n
Kar Tanesi Elementleri \u0130\u00e7in Kapsay\u0131c\u0131<\/h4>\n
\nBurada data-controller=\"snow\"<\/code> ile Stimulus kontrolc\u00fcm\u00fcz\u00fc ba\u011fl\u0131yoruz. data-snow-max-flakes-value<\/code> ve data-snow-speed-value<\/code> gibi data-<\/code> nitelikleri, kontrolc\u00fcm\u00fcze dinamik parametreler ge\u00e7irmemizi sa\u011flar.<\/p>\nKar Taneleri \u0130\u00e7in Temel CSS Stilleri<\/h4>\n
.snow-container {\n position: fixed; \/* Ekran\u0131n tamam\u0131n\u0131 kaplamas\u0131 i\u00e7in *\/\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none; \/* Kar taneleri t\u0131klanabilir olmamal\u0131 *\/\n overflow: hidden; \/* Kar tanelerinin d\u0131\u015far\u0131 ta\u015fmas\u0131n\u0131 engelle *\/\n z-index: 9999; \/* Di\u011fer elementlerin \u00fczerinde g\u00f6r\u00fcnmesi i\u00e7in *\/\n}\n\n.snowflake {\n position: absolute;\n background: #fff;\n border-radius: 50%; \/* Yuvarlak kar taneleri i\u00e7in *\/\n opacity: 0.8;\n animation-name: fall;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n pointer-events: none;\n filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); \/* Hafif parlama efekti *\/\n}<\/pre>\n
\nposition: fixed<\/code> ve pointer-events: none<\/code> gibi \u00f6zellikler, kar efektinin uygulaman\u0131n di\u011fer elementleriyle \u00e7ak\u0131\u015fmadan sorunsuz bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\nAnimasyon \u0130\u00e7in CSS Keyframes<\/h4>\n
@keyframes<\/code> kural\u0131n\u0131 kullanaca\u011f\u0131z. Bu, her bir kar tanesinin kendi animasyon d\u00f6ng\u00fcs\u00fcne sahip olmas\u0131n\u0131 sa\u011flayacak ve Stimulus'un sadece elementleri olu\u015fturup konumland\u0131rmas\u0131 yeterli olacakt\u0131r.<\/p>\n@keyframes fall {\n 0% {\n transform: translateY(-100%) translateX(0);\n opacity: 0;\n }\n 5% {\n opacity: 0.8;\n }\n 95% {\n opacity: 0.8;\n }\n 100% {\n transform: translateY(100vh) translateX(var(--end-x, 0)); \/* 100vh ekran y\u00fcksekli\u011fi *\/\n opacity: 0;\n }\n}<\/pre>\n
\n--end-x<\/code> gibi CSS de\u011fi\u015fkenleri kullanarak her kar tanesi i\u00e7in hafif yatay hareket varyasyonlar\u0131 ekleyebiliriz, bu da efekti daha do\u011fal g\u00f6sterir. 100vh<\/code> de\u011feri, kar tanesinin ekran\u0131n en \u00fcst\u00fcnden en alt\u0131na d\u00fc\u015fmesini sa\u011flar.<\/p>\nStimulus Controller Olu\u015fturma: Kar Efekti Mant\u0131\u011f\u0131<\/h3>\n
Controller Dosyas\u0131n\u0131n Yap\u0131s\u0131<\/h4>\n
snow_controller.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n\/\/ app\/javascript\/controllers\/snow_controller.js\nimport { Controller } from \"@hotwired\/stimulus\";\n\nexport default class extends Controller {\n static values = {\n maxFlakes: { type: Number, default: 50 },\n speed: { type: Number, default: 1 }, \/\/ H\u0131z \u00e7arpan\u0131\n };\n\n connect() {\n this.flakes = [];\n this.createSnowContainer();\n this.startSnowfall();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n disconnect() {\n this.stopSnowfall();\n this.snowContainer.remove();\n window.removeEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n createSnowContainer() {\n this.snowContainer = document.createElement(\"div\");\n this.snowContainer.classList.add(\"snow-container\");\n this.element.appendChild(this.snowContainer);\n }\n\n startSnowfall() {\n this.interval = setInterval(() => {\n if (this.flakes.length < this.maxFlakesValue) {\n this.createSnowflake();\n }\n this.cleanUpFlakes();\n }, 200); \/\/ Her 200ms'de bir yeni kar tanesi olu\u015fturmaya \u00e7al\u0131\u015f\n }\n\n stopSnowfall() {\n clearInterval(this.interval);\n }\n\n createSnowflake() {\n const snowflake = document.createElement(\"div\");\n snowflake.classList.add(\"snowflake\");\n\n const size = Math.random() * 5 + 5; \/\/ 5px ile 10px aras\u0131 boyut\n snowflake.style.width = ${size}px<\/code>;\n snowflake.style.height = ${size}px<\/code>;\n\n const startX = Math.random() * window.innerWidth;\n snowflake.style.left = ${startX}px<\/code>;\n\n const duration = (Math.random() * 10 + 5) \/ this.speedValue; \/\/ 5-15 saniye aras\u0131 d\u00fc\u015f\u00fc\u015f s\u00fcresi, h\u0131z \u00e7arpan\u0131yla ayarla\n snowflake.style.animationDuration = ${duration}s<\/code>;\n snowflake.style.animationDelay = -${Math.random() * duration}s<\/code>; \/\/ Rastgele ba\u015flang\u0131\u00e7 gecikmesi\n\n \/\/ Hafif yatay hareket i\u00e7in CSS de\u011fi\u015fkeni\n const endXOffset = (Math.random() - 0.5) * 200; \/\/ -100px ile 100px aras\u0131 yatay kayma\n snowflake.style.setProperty('--end-x', ${endXOffset}px<\/code>);\n\n this.snowContainer.appendChild(snowflake);\n this.flakes.push(snowflake);\n }\n\n cleanUpFlakes() {\n this.flakes = this.flakes.filter(flake => {\n const rect = flake.getBoundingClientRect();\n if (rect.top > window.innerHeight) {\n flake.remove();\n return false;\n }\n return true;\n });\n }\n\n handleResize() {\n \/\/ Ekran boyutu de\u011fi\u015fti\u011finde kar tanelerini yeniden konumland\u0131rmak veya temizlemek gerekebilir.\n \/\/ Basit bir \u00e7\u00f6z\u00fcm olarak, t\u00fcm kar tanelerini temizleyip yeniden ba\u015flatabiliriz.\n this.stopSnowfall();\n this.flakes.forEach(flake => flake.remove());\n this.flakes = [];\n this.startSnowfall();\n }\n}<\/pre>\nKar Tanesi Olu\u015fturma Fonksiyonu (
createSnowflake<\/code>)<\/h4>\ndiv<\/code> elementi olu\u015fturacak, ona snowflake<\/code> s\u0131n\u0131f\u0131n\u0131 atayacak ve rastgele boyut, ba\u015flang\u0131\u00e7 konumu ve animasyon s\u00fcresi belirleyecektir. Bu rastgelelik, kar efektinin daha do\u011fal g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\nKar Tanesi Animasyonunu Y\u00f6netme (
startSnowfall<\/code>, cleanUpFlakes<\/code>)<\/h4>\nstartSnowfall<\/code> metodu, setInterval<\/code> kullanarak d\u00fczenli aral\u0131klarla yeni kar taneleri olu\u015fturur ve eski, ekran d\u0131\u015f\u0131na \u00e7\u0131kan kar tanelerini temizler. cleanUpFlakes<\/code> ise, g\u00f6r\u00fcn\u00fcr alandan \u00e7\u0131kan kar tanelerini DOM'dan kald\u0131rarak performans\u0131 korur ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler.<\/p>\nDinamik Kar Yo\u011funlu\u011fu ve H\u0131z\u0131<\/h4>\n
static values<\/code> \u00f6zelli\u011fi sayesinde maxFlakes<\/code> ve speed<\/code> gibi parametreleri HTML \u00fczerinden kontrol edebiliriz. Bu, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde veya farkl\u0131 mevsimlerde kar efektinin yo\u011funlu\u011funu ve h\u0131z\u0131n\u0131 kolayca ayarlamam\u0131z\u0131 sa\u011flar.<\/p>\nStimulus Controller'\u0131 HTML'e Entegre Etme<\/h3>\n
data-controller<\/code> ve data-target<\/code> Kullan\u0131m\u0131<\/h4>\ndata-controller=\"snow\"<\/code> niteli\u011fini eklemeniz yeterlidir. Kontrolc\u00fcm\u00fcz, bu elementin i\u00e7indeki snow-container<\/code> div'ini otomatik olarak olu\u015fturacakt\u0131r.<\/p>\n\n\n\n \n \n