سلام. ما یک مینی پروژه داریم که در واقع نمایشی از ساختار یک اتم است که شامل هسته و الکترونهای در حال گردش به دور آن است. در این پروژه، سه مدار (مدارهای بیضوی) وجود دارد که هر یک دارای یک الکترون هستند. هستهی اتم شامل پروتون و نوترون است که در مرکز قرار دارند.
توضیح مختصر:
هسته (Nucleus): هسته اتم در مرکز صفحه قرار دارد و شامل پروتون و نوترون است. پروتونها به رنگ قرمز و نوترونها به رنگ سبز نمایش داده شدهاند.
مدارها (Orbits): سه مدار بیضوی در اطراف هسته وجود دارند که هر کدام از این مدارها یک الکترون را در خود جای دادهاند. این مدارها به طور متداخل طراحی شدهاند تا به خوبی حرکت الکترونها را نمایش دهند.
الکترونها (Electrons): الکترونها در نقاط خاصی از مدارهای بیضوی قرار گرفتهاند و قابلیت جابهجایی دارند. کاربر میتواند با کلیک و کشیدن الکترونها، آنها را در طول مدار خود به حرکت درآورد.
نحوه کارکرد:
ساختار صفحه: با استفاده از HTML و CSS، ساختار اتم شامل هسته، مدارها و الکترونها ایجاد شده است.
جابجایی الکترونها: با استفاده از JavaScript، امکان کلیک و کشیدن الکترونها به وجود آمده است. الکترونها به گونهای برنامهریزی شدهاند که تنها در مسیر مدارهای بیضوی خود حرکت کنند.
عملکرد کلی: وقتی کاربر روی الکترون کلیک میکند، مکان فعلی آن الکترون شناسایی شده و با حرکت ماوس، الکترون به صورت پیوسته در مدار خود حرکت میکند تا زمانی که کاربر دکمه ماوس را رها کند.
این پروژه یک نمایش تعاملی ساده از یک اتم است که به خوبی اصول اولیه ساختار اتمی و حرکت الکترونها را نشان میدهد.
لینک codepen جهت مشاهده دمو:
https://codepen.io/Herr-Pouya/pen/LYKmJmm
اما همانطور که میبینید مشکل داره و باید از لحاظ ظاهر و چرخش الکترون ها دور مدار خودش اصلاح بشه.
یعنی فقط css و js نیاز داره…
دوستانی که دمو رو دیدن و میتونند این مشکل رو حل کنند، پیام بدن… با تشکر
جهت انجام پروژه لطفا با پشتیبانی تلگرام در تماس باشید:
ای دی تلگرام: omid_ahmadyani@