واحدة من التقنيات "الأكثر سخونة" على شبكة الإنترنت اليوم هي التمرير المنظر. لقد ذهبنا جميعًا إلى تلك المواقع التي تقوم فيها بتدوير عجلة التمرير على الماوس الخاص بك ويتحرك المحتوى الموجود على الصفحة لأعلى أو لأسفل أو عبر الصفحة أثناء تدوير عجلة الماوس.
بالنسبة لأولئك الجدد لتصميم الويب والتصميم الجرافيكي ، يمكن أن تكون هذه التقنية صعبة للغاية بسبب كمية CSS المطلوبة.
إذا كان ذلك يصف لك ، فهناك عدد من التطبيقات التي قد تروق فقط لفنانين الرسوم البيانية. وهي تستخدم في الأساس منهجًا مألوفًا لتخطيط الصفحات لصفحات الويب ، مما يعني أنه لا يوجد الكثير من الترميز ، إن وجد. أحد التطبيقات التي صعدت إلى مكان بارز هو Adobe Muse.
إن العمل الذي يقوم به محترفو الرسومات باستخدام موسى مدهش للغاية ويمكنك أن ترى عينة من ما يمكنك القيام به عن طريق زيارة Muse موقع اليوم . على الرغم من أن محترفي الويب يميلون إلى اعتبار موسى كنوع من "لعبة التصفية" ، إلا أنه يستخدم من قبل المصممين لإنشاء نماذج متنقلة ونماذج ويب سيتم تسليمها في النهاية إلى المطورين على فريقهم.
إحدى التقنيات التي يسهل إنجازها بشكل لا يصدق مع موسى هي التمرير المنظر ، وإذا كنت ترغب في رؤية النسخة الكاملة من التمرين. عندما تقوم بتدوير بكرة تمرير الماوس ، يبدو أن النص يتحرك لأعلى أو لأسفل الصفحة وتتغير الصور.
هيا بنا نبدأ.
01 من 07قم بإنشاء صفحة ويب
عندما تقوم بتشغيل موسى انقر فوق موقع جديد حلقة الوصل. هذا سيفتح خصائص الموقع الجديد. سيتم تصميم هذا المشروع لتطبيق سطح المكتب ويمكنك تحديده في التخطيط الأولي القائمة المنسدلة. يمكنك أيضًا تعيين القيم الخاصة بعدد الأعمدة ، وعرض الميزاب ، والهوامش ، والحشو. في هذه الحالة ، لم نكن نشعر بالقلق الشديد من هذا ونقرت ببساطة حسنا.
تنسيق الصفحة
عندما تقوم بتعيين خصائص الموقع والنقر حسنا تم نقلك إلى ما يسمى خطة رأي. هناك الصفحة الرئيسية الصفحة في الجزء العلوي و صفحة رئيسية في أسفل النافذة. نحن بحاجة فقط صفحة واحدة. للوصول إلى Design View ، قمنا بالنقر المزدوج على الصفحة الرئيسية التي فتحت الواجهة.
على اليسار توجد بعض الأدوات الأساسية وعلى اليمين مجموعة متنوعة من اللوحات المستخدمة لمعالجة المحتوى على الصفحة. على طول الجزء العلوي توجد الخصائص ، والتي يمكن تطبيقها على الصفحة ، أو أي شيء محدد في الصفحة. في هذه الحالة ، أردنا الحصول على خلفية سوداء. لإنجاز هذا ، ننقر على ملء المستعرض رقاقة اللون واختار اللون الأسود من Color Picker.
03 من 07أضف النص إلى الصفحة
الخطوة التالية هي إضافة بعض النص إلى الصفحة. اخترنا أداة النص ولفت مربع النص. أدخلنا كلمة "مرحبا" ، وفي خصائص تعيين النص إلى ارييل ، 120 بكسل ابيض. مركز الانحياز.
ثم قمنا بالانتقال إلى أداة Selection tool ، ثم النقر فوق Textbox وتعيين موقف Y إلى 168 بكسل من الأعلى. مع تحديد مربع النص ، فتحنا محاذاة اللوحة ومحاذاة مربع النص إلى المركز.
أخيرًا ، مع تحديد مربع النص ، قمنا بالضغط على الخيار / البديل و تحول مفاتيح وجعل أربع نسخ من مربع النص. لقد غيرنا النص والموضع Y من كل نسخة إلى:
- إلى 871
- الرسومات ، ١٦٢١
- برنامج ، 2371
ستلاحظ ، عند تعيين موقع كل مربع نص ، تغيير حجم الصفحة لاستيعاب موقع النص.
04 من 07إضافة مواضع الصور
الخطوة التالية هي وضع الصور بين كتل النص.
الخطوة الأولى هي اختيار اداة المستطيل ثم ارسم مربعًا يمتد من جانب واحد من الصفحة إلى الآخر. مع اختيار المستطيل ، قمنا بتعيين ارتفاع إلى 250 بكسل و موقف Y إلى 425 بكسل. تتمثل الخطة في جعلها دائمًا تمتد أو تتقلص لعرض الصفحة ليتناسب مع إطار عرض متصفح المستخدم. لإنجاز هذا ، قمنا بالنقر فوق عرض 100 ٪ زر في خصائص. ما يفعله هذا هو إلغاء رمادي لقيمة X وللتأكد من أن الصورة دائمًا ما تكون 100٪ من عرض إطار العرض في المتصفح.
05 من 07إضافة صور إلى العناصر النائبة للصورة
مع اختيار المستطيل قمنا بالنقر فوق ملء الرابط - وليس شريحة اللون - ونقرت على أناالحبر ماجى لإضافة صورة إلى المستطيل. في ال مناسب المنطقة ، اخترنا مقياس للتناسب ونقرت على مقبض الوسط في ال موضع لضمان تحديد الصورة من مركز الصورة.
بعد ذلك ، استخدمنا الخيار / مفتاح Alt التحول السحب تقنية لإنشاء نسخة من الصورة بين أول كتل نصّين ، فتحت لوحة التعبئة وتبادلت الصورة لآخر. فعلنا ذلك للصورتين المتبقيتين كذلك.
مع وجود الصور في المكان ، حان الوقت لإضافة الحركة.
06 من 07أضف Parallax Scrolling
هناك عدد من الطرق لإضافة التمرير المنظر في Adobe Muse. سنوضح لك طريقة بسيطة للقيام بذلك.
عند فتح لوحة التعبئة ، انقر فوق علامة التبويب التمرير وعندما تفتح ، انقر فوق مربع اختيار الحركة.
سترى القيم ل مبدئي و الحركة النهائية. يحدد ذلك مدى سرعة انتقال الصورة بالنسبة إلى عجلة التمرير. على سبيل المثال ، ستحرك قيمة 1.5 الصورة 1.5 مرة أسرع من العجلة. استخدمنا قيمة 0 لقفل الصور في مكانها.
ال سهام أفقية وعمودية تحديد اتجاه الحركة.إذا كانت القيم تساوي 0 ، فلن تتزحزح الصور بصرف النظر عن السهم الذي تنقر عليه.
القيمة المتوسطة – موقف رئيسي - يبين النقطة التي تبدأ فيها الصور بالتحرك. يبدأ السطر فوق الصورة ، لهذه الصورة ، 325 بكسل من أعلى الصفحة. عندما يصل التمرير إلى القيمة التي تبدأ الصورة في التحرك. يمكنك تغيير هذه القيمة إما عن طريق تغييرها في مربع الحوار أو عن طريق النقر فوق النقطة الموجودة أعلى السطر إما لأعلى أو لأسفل.
كرر هذا للصور الأخرى على الصفحة.
07 من 07اختبار المتصفح
عند هذه النقطة ، لقد انتهينا. أول شيء فعلناه ، لأسباب واضحة ، كان الاختيار ملف> حفظ الموقع. لاختبار المتصفح ، اخترنا ببساطة ملف> معاينة الصفحة في المتصفح. هذا فتح المتصفح الافتراضي لجهاز الكمبيوتر الخاص بنا ، وعندما فتح الصفحة ، بدأنا في التمرير.
