ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-22, Wednesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

Next.js වෙබ් ඇප්ලිකේෂන්වල පිරිසිදු මයික්‍රො-අන්තර්ක්‍රියා 3 ක්

Next.js වෙබ් ඇප්ලිකේෂන්වල පිරිසිදු මයික්‍රො-අන්තර්ක්‍රියා 3 ක්

අපි අද වන විට වෙබ් ඇප්ලිකේෂන් නිර්මාණය කරන විට, කේතය සාර්ථකව ධාවනය වීම පමණක් නොව, ඒක භාවිතා කරන අයගේ අත්දැකීමත් ඉතා වැදගත් බව සැලකිල්ලට ගත යුතුයි. Ninth Node සමාගම React‑අධාරිත ප්‍රජාතන්ත්‍රික මෙවලම් සඳහා පිරිසිදු UI අංග 3ක් ඉදිරිපත් කරයි, ඒවා Next.js ව්‍යාපෘතිවල සරලව යොදා ගත හැක.

1. ඩයිනමික් හෝවර් ග්ලෝ (Glassmorphism + Radial Gradient) – සාමාන්‍ය CSS :hover ප්‍රභාවය වෙනුවට, මවුස් කර්සරය අනුගමනය කරන රේඩියල් ග්‍රැඩියන්ට් එකක් කාඩ් පුවරුවේ පසුබිමට යෙදේ. මෙය GPU‑වේගයෙන් ක්‍රියා කර, පරිශීලකයාට පෙනෙන විශේෂ “ග්ලෝ” ආලෝකයක් සපයයි. කේත උදාහරණය තුළ useRef, useEffect වැනි React hook භාවිතයෙන් මෙම ප්‍රභාවය ක්‍රියාත්මක කරයි.

2. ස්ටැගර්ඩ් ඇන්ට්‍රන්ස් ඇනිමේෂන් – පිටුවේ නව කොටසකට ස්ක්‍රෝල් කළ විට සියලු අන්තර්ගතය එකවර පෙනෙන්නේ නැත. Framer Motion භාවිතයෙන් සන්ධිතික (stagger) ක්‍රමයෙන් ළුහුබැඳි අංග වරින් වරින් පෙනෙයි. මෙයින් පේජ් එකේ රිද්මය නිරන්තරව පවත්වා, පරිශීලකයාගේ අවධානය රැඳවයි.

3. එඩිටෝරියල් ටයිප්ග්‍රැෆි ස්කේලින් – ශීර්ෂක සඳහා ස්ථිර පික්සෙල් ප්‍රමාණයක් භාවිතා කිරීමේ පළාතට වඩා, CSS clamp() ක්‍රමය භාවිතයෙන් මොබයිල් සිට ඩෙස්ක්ටොප් දක්වා සෞම්‍යව ප්‍රමාණය වෙනස් වේ. මෙය “fluid typography” ලෙස හැඳින්වෙයි, ඒත් ඒක පිළිවෙලින් පරිශීලකගේ උපාංගයට අනුකූල වේ.

මෙම තුනේ අංග එකතු කිරීමෙන් ඔබේ වෙබ් අඩවිය “සුපිරි” බවක් පමණක් නොව, පරිශීලක පරිවර්තනය (conversion) වැඩි කිරීමේ හැකියාවද ලැබේ. Ninth Node වැනි විශේෂඥ සමාගම් මෙම අංග එක් කර, සරල මිලකට ප්‍රමිතීන් ගැලපෙන ලැන්ඩින් පිටු නිර්මාණය කරයි.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ තාක්ෂණික පරිසරය තවත් වර්ධනය වෙමින් පවතී. මෙම මයික්‍රො-අන්තර්ක්‍රියා අංගයන් යොදා ගැනීමෙන්:

  • සිසුන්ට නවතම UI/UX ප්‍රවණතා ඉගෙන ගැනීමට අවස්ථාව ලැබේ.
  • දේශීය සංවර්ධකයන්ට ග්ලෝබල් තලයේ පිරිසිදු වෙබ් යෙදුම් නිර්මාණය කිරීමේ හැකියාව වැඩිවේ.
  • ව්‍යාපාරික වෙබ් අඩවිවල පාරිභෝගික පරිවර්තනය වැඩිවීමෙන් ආදායම ඉහළ යයි.

අදම ඔබේ Next.js ව්‍යාපෘතියට මේ අංග එකතු කර, පරිශීලකයන්ට අමතක නොවෙන අත්දැකීමක් ලබා දෙන්න.

💡 ඔබේ Next.js ව්‍යාපෘතියට මේ අංග එක් කර බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#Next.js #MicroInteractions #WebDesign #React #Frontend