منشئ شريط مقارنة قبل/بعد

كيف يعمل

تُعرض صورة «بعد» بالحجم الكامل في الخلفية، بينما توضع صورة «قبل» فوقها داخل حاوية يتحكم في عرضها شريط انزلاق غير مرئي: وبسحب هذا الشريط تكشف تدريجيًا الصورة التي تحتها. تعمل المعاينة أعلاه مباشرةً داخل الأداة، ويعيد الكود المُنشأ المبدأ نفسه بـ HTML/CSS خالصين، دون أي اعتماد على JavaScript خارجي.

كيف أدمج الكود المُنشأ في موقعي؟

انسخ كود HTML المُنشأ واستبدل السمتين src بالمسارات الفعلية لصورك (المستضافة على خادمك) أو بنسخها الكاملة المشفّرة بصيغة base64؛ ويتولى عنصر input[type=range] الأصلي المضمَّن في الكود التفاعل دون أي مكتبة إضافية.

هل يمكنني تغيير تسميتَي «قبل» و«بعد»؟

نعم، تتيح حقول التسميات تخصيص النص المعروض على كل ركن من أركان الشريط (مثل «قبل الأشغال» / «بعد الأشغال»، أو تواريخ)، سواء في المعاينة أو في الكود المُنشأ.

تتم المعاينة وإنشاء الكود بالكامل في متصفحك: لا تُرسل صورك أبدًا إلى أي خادم.