بناء موقع StartupGiraffe

أطلقنا الجديد StartupGiraffe الموقع منذ بضعة أشهر ، وكنا نعرف كيفية كتابة مشاركة حول كيفية عمل جزء من الواجهة لأي شخص مهتم.

كان هدفنا هو إنشاء موقع ممتع وسريع الاستجابة يعرض علامتنا التجارية. بمجرد اصدقاءنا في البرميل نيويورك وافق على القيام بتصميم الرسوم البيانية للموقع ، كنا نعرف أننا سنكون قادرين على سحب بعض الحيل الأنيقة. لقد أخبرناهم أننا نريد زرافة طويلة جدًا ، لكننا لم نشاهد جميع الاحتمالات حتى حصلنا على التصاميم: كانت هناك مضلعات ذات ألوان وزوايا وأشكال مختلفة في الخلفية ؛ في المقدمة ، كانت هناك جميع أنواع العناصر التي يمكن أن تعمل بشكل جيد في موقع المنظر ... وكان هناك ذلك الزرافة الهائلة.

كان التحدي بالنسبة لنا هو التأكد من أننا لم نذهب بعيدا جدا مع جافا سكريبت لفرض ضرائب على أداء الموقع وصرف انطباع المستخدم. في نهاية المطاف قررنا إلغاء فكرة اختلاف المنظر لصالح تأثير "الزرافة المتنامية".

يمكنك رؤية مثال للتأثير هنا ، وإذا كنت ترغب في المتابعة مع الرمز ، فيمكنك قم بتنزيل الملفات المصدر هنا .

هيكل الموقع

في المستوى الأساسي ، يحتوي الموقع على ثلاثة أقسام شقيقة مكدسة فوق بعضها البعض. تقع النسخة والمحتوى الرئيسي للموقع على الطبقة العليا ، والزرافة على الطبقة الثانية ، والخلفية متعددة الأضلاع على الطبقة الخلفية:

في هذا العرض التوضيحي ، سنقوم بحذف غلاف الخلفية لأنه لا يوجد الكثير منه.

تزايد تأثير الزرافة

في الأساس ، كان هدفنا هو إصلاح شعار "Startup Giraffe" في مكانه بينما ترتفع الزرافة ، ثم حرر الشعار إلى التدفق الطبيعي للصفحة عند نقطة معينة. لأن الزرافة يجب أن تبدأ في الارتفاع بمجرد أن يبدأ المستخدم في التمرير ، يجب أن يكون أنفها أسفل الطية بغض النظر عن ارتفاع الشاشة.

هناك بالفعل مجموعة متنوعة من الطرق للقيام بذلك (ونحن بالتأكيد منفتحون على الاقتراحات) ، ولكن تلك التي اخترناها هي الاستخدامات jQuery.waypoints كوسيلة للكشف عن أحداث التمرير والاستجابة لها.

للتأكد من أن الزرافة تنزلق خلف الشعار ، نضع الشعار في غلاف ثابت داخل قسم "المحتوى". الزرافة هي شقيقة قسم المحتوى. يتم وضع كلا القسمين على الاطلاق.

HTML

CSS

body {background-color: #000;}#content-wrapper, #giraffe-wrapper {position: absolute;top: 0px;left: 0px;width: 100%;}#first-content {position: relative;}#big-logo-wrapper {position:fixed;top: 250px;width: 100%;max-width: 1920px;}#big-logo {width:465px; height:231px;display:block; margin:0 auto;}#giraffe {position: relative;left: 100px;height: 3200px;}

جافا سكريبت

وكانت الخطوة التالية هي إعداد الزرافة والشعار. استخدمنا جافا سكريبت لتعيين الزرافة أسفل الطية. ثم قم بتعيين ارتفاع القسم الأول ليكون ارتفاع الإطار بالإضافة إلى عدد البكسلات التي نرغب في إظهارها للزراف قبل السماح للشعار بالتمرير لأعلى.

$(function() {var windowHeight = $(window).height(),giraffe = $("#giraffe"),firstHeight = windowHeight + 380,firstContent = $("#first-content");giraffe.css("top", windowHeight + "px");firstContent.css("height", firstHeight + "px")});

مع الزرافة المخبأة أسفل الطية ، يمكننا أن نرى أنها انتقل تحت شعار ثابت. بعد ذلك ، اضطررنا فقط للسماح للشعار بالتمرير بعيدًا حتى لا يبقى ثابتًا على الصفحة.

يتيح لنا ملحق نقاط الطريق استخدام وظيفة عندما ينتقل المستخدم بعد عنصر DOM معين. كما يتيح لنا الكشف عن اتجاه المستخدم للتمرير. استخدمنا هذين الحدثين "للأعلى" و "الأسفل" لإضافة أو إزالة فصل يبدل خاصية موضع الشعار بين الثابت والمطلق.

كما استخدمنا خاصية إزاحة دالة نقطة الطريق لتغيير موضع نقطة الطريق بواسطة قيمة بكسل صحيحة. نظرًا لأن فئة المطابقة (شعار التمرير) ستحاذي الشعار إلى الجزء السفلي من أصلها ، أردنا أن يكون الإزاحة ارتفاع الشعار بالإضافة إلى مسافة الشعار من أعلى الموقع مطروحًا منها إجمالي ارتفاع قسم المحتوى الأول (التي قمنا بتعيينها على تحميل الصفحة).

 var logo = $('#big-logo-wrapper');firstContent.waypoint(function( direction) {if ( direction === 'down' ) {logo.addClass("first-scroll");} else {logo.removeClass('first-scroll');}},{offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight});

إلى جانب بضعة أجراس وصفارات أخرى ، هذا إلى حد كبير. يبقى الشعار الآن ثابتًا حتى يبلغ حجم الزرافة حوالي 380 بكسل في أعلى الصفحة.

هل حصلت على الاسئلة؟ حصلت على طريقة أفضل للقيام بذلك؟ اسمحوا لنا أن نعرف في التعليقات.