$ curl -s https://alturki.sa | wc -c
خلف الكواليس
هذا الموقع ملف HTML واحد، وملف تنسيق واحد، وسكربت صغير. لا إطار عمل، ولا خطوة بناء، ولا صور في المقدمة: البرج مرسوم يدويًا بـ SVG، وتمريرك هو ما يحرّك كل إطار.
- حجم أول تحميل (مضغوطًا)
- 162 KB
- جافاسكربت
- 13 KB
- نتيجة Lighthouse على الجوال
- 98–100
- أطر العمل
- 0
// app.js: the scroll position becomes one number, p (0 to 1)
const r = track.getBoundingClientRect();
const p = -r.top / (r.height - innerHeight);
for (const a of track.getAnimations({ subtree: true }))
a.currentTime = p * 1000;
/* index.html: every moving part is a paused one-second
CSS animation, so frame = scroll position */
.sc {
animation-duration: 1s;
animation-play-state: paused;
}
- رسمت برج الساعة بنحو 130 شكلًا بصيغة SVG وضعتها يدويًا اعتمادًا على صور حقيقية: الهلال دائرتان وقناع، وشبكات النوافذ بلاطات نمط بمقاس 12×22.
- كل جهة تبدأ بشعارها وهو يبني نفسه (أعمدة الجامعة ترتفع، وأبراج الشركة تعلو، وسداسي البنك يرسم نفسه)، ثم يُفسح المجال لبطاقتها. كلها خطوط زمنية للتمرير في CSS، بلا سكربت.
- التنبيهات الجوية الرسمية تأتي من نشرة CAP للمركز الوطني للأرصاد، يقرؤها العامل وتظهر حين يشمل التنبيه مكة.
- في المتصفحات التي تدعمها، يعمل كل إطار على CSS scroll-driven animations (animation-timeline: view())، فلا يعمل أي سكربت أثناء التمرير. أما في Safari فالسكربت أعلاه هو من يحرّك البرج: فمنذ إصدار 26.4 صار Safari ينقل هذه الرسوم إلى scrolling thread منفصل، وقد يجمّدها التمرير السريع هناك.
- يحلّ الليل بطبقة واحدة بملء الشاشة بخاصية mix-blend-mode: multiply، وحواف الأضواء خط منقّط بـ stroke-dasharray.
- في النهاية يتقرّب الرسم كله 17 ضعفًا داخل وجه الساعة حتى يصير القرص خلفية الصفحة.
- الأيقونات البكسلية مستطيلات <rect> على شبكة 16×16 مع shape-rendering: crispEdges.
- جوّالا «تحدي الحروف» يعرضان تسجيلات شاشة حقيقية للبوابة، صوّرتها بمقاس iPhone 16 (393 × 852) عبر headless Chrome مع نقطة عند كل لمسة، وموّهت أسماء اللاعبين الآخرين، ولا تُحمَّل إلا حين تختار «مهتم بالتصميم والألعاب».
- مقطع «نبذة عني» مونتاج مدته 8 ثوانٍ رُسم إطارًا إطارًا بلغة Python من صورة الدفعة (بعد تمويه كل الوجوه)، بمظهر كاميرا رقمية قديمة بدقة 384 × 240 يكبّره المتصفح بوضوح البكسل (image-rendering: pixelated)، ولا يُحمَّل إلا حين تصل إليه.
- الخطوط مستضافة على الموقع نفسه ومقتطَعة. أما نقوش البرج، «الله أكبر» والشهادتان، فمرسومة بالتتبّع من صور الساعة الحقيقية التي التقطها King Eliot (ويكيميديا كومنز، CC BY-SA 4.0).
- الساعة والسماء حيّتان: العقارب تعرض وقت مكة، وشروق اليوم وغروبه في مكة (21.42° شمالًا، 39.83° شرقًا) يضبطان الضوء، والغيوم والمطر والغبار والحرارة تأتي من بيانات طقس حيّة (Open-Meteo) يجلبها ويخزّنها عشر دقائق عاملُ Cloudflare الخاص بهذا الموقع على /api/weather. والتمرير يقدّم الوقت ثماني ساعات.
- التنقّل بين الصفحات تقليبُ صفحة، بواسطة View Transitions بين المستندات.
- يُقدَّم كملفات ثابتة من شبكة Cloudflare. ويلتزم الموقع بزر الإيقاف وإعداد «تقليل الحركة» في كل صفحاته.
تريد رؤية سورس الموقع نفسه؟ اعرض المصدر بـ Ctrl+U (أو ⌘⌥U).