غالبًا ما نفكر في صور الخلفية على أنها نسيج أو شيء يوفر تباينًا لمحتوى مقروء - وبعبارة أخرى ، ليس المحتوى حقًا. إذا كان المحتوى ، فمن المحتمل أن تصل إلى ملف <img>
على أي حال ، إمكانية الوصول وما إلى ذلك.
ولكن هناك أوقات يكون فيها ملف ان يرتفع المركز or مقياس من صورة الخلفية يمكن وضعها في مكان ما بين قطبي المحتوى والزخرفة. السياق هو الملك ، أليس كذلك؟ إذا قمنا بتغيير موضع صورة الخلفية ، فقد تنقل المزيد من السياق أو التجربة.
كيف ذلك؟ لنلقِ نظرة على بعض الأمثلة التي رأيتها تطفو.
عندما نبدأ ، سأحذر من وجود خط رفيع في هذه العروض التوضيحية بين الصور المستخدمة للزينة والصور المستخدمة كمحتوى. لهذا الاختلاف آثار تتعلق بإمكانية الوصول حيث لا يتم الإعلان عن الخلفيات لقارئي الشاشة. إذا كانت صورتك هي حقا صورة، ثم ربما تنظر في <img>
علامة مع السليم alt
نص. وبينما نتحدث عن إمكانية الوصول ، من الجيد القيام بذلك ضع في اعتبارك تفضيلات حركة المستخدم كذلك.
أرني المزيد!
لدى Chris Coyier هذا العرض التوضيحي الصغير الأنيق من عدة سنوات ماضية.
يعد العرض التوضيحي عمليًا للغاية من نواح كثيرة لأنه نهج أنيق لعرض الإعلانات في المحتوى. لديك فكرة المبيعات وصورة جذابة لتكملها.
أراهن أن القيد الكبير لمعظم الإعلانات هو العقارات المحدودة. لا أعرف ما إذا كنت قد اضطررت إلى إسقاط إعلان على إحدى الصفحات ، لكنني عادةً ما أطلب من المعلن صورة تتوافق مع أبعاد البكسل الدقيقة ، لذا فإن الأصل يناسب المساحة.
لكن عرض كريس يخفف من حدة مشكلة الفضاء. قم بالمرور فوق الصورة ومشاهدتها وهي تتحرك وتتوسع. يحصل المستخدم بالفعل الأكثر من ذلك سياق المنتج مما لو كانت الصورة في موضعها الأصلي. هذا فوز ، أليس كذلك؟ يحصل المعلن على صورة لافتة للنظر دون المساس بالسياق. وفي الوقت نفسه ، يحصل المستخدم على قيمة إضافية قليلة من الأجزاء التي تم الكشف عنها حديثًا من الصورة.
إذا ألقيت نظرة خاطفة على ترميز العرض التوضيحي ، فستلاحظ أنه إلى حد كبير ما تتوقعه. هذه نسخة مختصرة:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
ربما يمكننا المجادلة حول الدلالات قليلاً ، لكن هذا ليس هو الهدف. لدينا حاوية مع رابط <div>
لصورة الخلفية وآخر <div>
لعقد المحتوى.
فيما يتعلق بالتصميم ، فإن القطع المهمة هنا:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
ليس سيئا ، أليس كذلك؟ نعطي الحاوية بعض الأبعاد ونضع عليها صورة خلفية لا تتكرر ويتم وضعها عند الحافة السفلية اليسرى.
الحيلة الحقيقية هي مع JavaScript. سنستخدم ذلك للحصول على موضع الماوس وإزاحة الحاوية ، ثم نحول هذه القيمة إلى مقياس مناسب لتعيين background-position
. أولاً ، دعنا نستمع إلى حركات الماوس على .container
جزء:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
من هنا ، يمكننا استخدام الحاوية offsetX
و offsetY
ملكيات. لكننا لن نستخدم هذه القيم مباشرة ، لأن قيمة الإحداثي X أصغر مما نحتاج إليه ، والإحداثي Y أكبر. سيتعين علينا أن نلعب قليلاً لإيجاد ثابت يمكننا استخدامه كمضاعف.
إنها لمسة وإحساس بعض الشيء ، لكنني وجدت ذلك 1.32
و 0.455
تعمل بشكل مثالي لإحداثيات X و Y على التوالي. نضرب الإزاحات في تلك القيم ، ونلحق أ px
على النتيجة ، ثم قم بتطبيقها على ملف background-position
القيم.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
أخيرًا ، يمكننا أيضًا إعادة تعيين أوضاع الخلفية إلى الأصل إذا ترك المستخدم حاوية الصورة.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
نظرًا لأننا نستخدم CSS-Tricks ، فسأعرض أنه كان بإمكاننا عمل نسخة أرخص بكثير من هذا مع انتقال بسيط في Vanilla CSS:
ارسم صورة أكبر
لا شك في أنك ذهبت إلى بعض متاجر الملابس عبر الإنترنت أو أي شيء آخر وواجهت ميزة ol 'zoom-on-hover.
كان هذا النمط موجودًا لما يشعر به إلى الأبد (شارك ديلان وين براون نهجه ظهر في 2016) ، ولكن هذا مجرد وصية (أتمنى) على فائدتها. يحصل المستخدم على مزيد من السياق أثناء التكبير والحصول على فكرة أفضل عن خياطة السترة أو ما لديك.
هناك قطعتان لهذا: حاوية و مسبح. الحاوية هي الشيء الوحيد الذي نحتاجه في الترميز ، حيث سنقوم بحقن عنصر المكبر أثناء تفاعل المستخدم. لذا ، انظر إلى HTML الخاص بنا!
<div class="container"></div>
في CSS ، سننشئ width
و height
متغيرات لتخزين أبعاد العدسة المكبرة نفسها. ثم سنقدم ذلك .container
بعض الشكل وأ background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
هناك بعض الأشياء التي نعرفها بالفعل عن المكبر قبل أن نراها ، ويمكننا تحديد هذه الأنماط مقدمًا ، وتحديدًا المتغيرات المحددة مسبقًا لـ .maginifier
الصورة width
و height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
إنه مربع صغير ذو وضع مطلق يستخدم امتداد نفسه ملف صورة الخلفية كملف .container
. لاحظ أن دالة calc تُستخدم فقط هنا لتحويل قيمة أقل من وحدة في المتغير إلى وحدات بكسل. لا تتردد في ترتيب ذلك كيفما تراه مناسبًا بقدر ما هو القضاء على التكرار في التعليمات البرمجية الخاصة بك.
الآن ، دعنا ننتقل إلى JavaScript الذي يجمع كل هذا معًا. نحتاج أولاً إلى الوصول إلى متغير CSS المحدد مسبقًا. سنستخدم هذا في أماكن متعددة لاحقًا. ثم نحتاج إلى وضع الماوس داخل الحاوية لأن هذه هي القيمة التي سنستخدمها لموضع خلفية المكبر.
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
ما نحتاجه هو في الأساس ملف mousemove
مستمع الحدث على .container
. بعد ذلك ، سوف نستخدم ملف event.pageX
or event.pageY
خاصية الحصول على إحداثيات X أو Y للماوس. ولكن للحصول على دقيق الموضع النسبي للماوس على عنصر ما ، نحتاج إلى طرح موضع العنصر الأصل من موضع الماوس الذي نحصل عليه من JavaScript أعلاه. طريقة "بسيطة" للقيام بذلك هي استخدام getBoundingClientRect()
، والتي تعرض حجم عنصر وموضعه بالنسبة إلى إطار العرض.
لاحظ كيف آخذ التمرير في الاعتبار. إذا كان هناك تجاوز ، اطرح النافذة pageX
و pageY
ستضمن التعويضات تشغيل التأثير كما هو متوقع.
سنقوم أولاً بإنشاء المكبر div. بعد ذلك ، سننشئ ملف mousemove
وظيفة وإضافتها إلى حاوية الصورة. في هذه الوظيفة ، سنمنح المكبر سمة فئة. سنحسب أيضًا موضع الماوس ونعطي المكبر القيم اليسرى والعليا التي حسبناها مسبقًا.
دعنا نمضي قدمًا ونبني magnifier
عندما نسمع أ mousemove
الحدث على .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
نحتاج الآن إلى التأكد من أنه يحتوي على اسم فئة يمكننا توسيع نطاقه إلى CSS:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
مثال الفيديو الذي عرضته سابقًا يضع المكبر خارج الحاوية. سنبقي هذا بسيطًا ونغلفه أعلى الحاوية بدلاً من ذلك أثناء تحرك الماوس. سوف نستخدم if
عبارات لتعيين موضع المكبر فقط إذا كانت قيمتي X و Y كذلك أكبر or متساو إلى الصفر ، و أقل من عرض الحاوية أو ارتفاعها. يجب أن يبقيها في الحدود. فقط تأكد من طرح عرض وارتفاع المكبر من قيم X و Y.
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
أخيرًا وليس آخرًا ... نحتاج للتلاعب بصورة خلفية المكبر قليلاً. بيت القصيد هو أن المستخدم يحصل على عرض أكبر لصورة الخلفية بناءً على مكان حدوث التمرير. لذا ، دعنا نحدد المكبر الذي يمكننا استخدامه لتوسيع نطاق الأشياء. ثم سنحدد متغيرات لعرض صورة الخلفية وارتفاعها بحيث يكون لدينا شيء نؤسس عليه هذا المقياس ، ونضع كل هذه القيم على .magnifier
أنماط:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
لنأخذ إحداثيات X و Y لصورة المكبر ونطبقها على .magnifier
عنصر background-position
. كما كان من قبل مع موضع المكبر ، نحتاج إلى طرح عرض المكبر وارتفاعه من قيم X و Y باستخدام متغيرات CSS.
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
تادا!
اجعلها سينمائية
هل رايت ال تأثير كين بيرنز؟ إنه شيء كلاسيكي وخالد حيث تكون الصورة أكبر من الحاوية الموجودة بها ، ثم يتم الشرائح والمقاييس بشكل بطيء مثل سبيكة. يبدو أن كل فيلم وثائقي في العالم يستخدمه لالتقاط الصور الثابتة. إذا كان لديك جهاز Apple TV ، فمن المؤكد أنك شاهدته على شاشة التوقف.
هناك وفرة of أمثلة أكثر في CodePen إذا كنت تريد الحصول على فكرة أفضل.
سترى أن هناك عددًا من الطرق للتعامل مع هذا الأمر. يستخدم البعض جافا سكريبت. البعض الآخر 100٪ CSS. أنا متأكد من أن أساليب JavaScript جيدة لبعض حالات الاستخدام ، ولكن إذا كان الهدف هو ببساطة قياس الصورة بمهارة ، فإن CSS مناسبة تمامًا.
يمكننا أن نجعل الأشياء أكثر إثارة قليلاً باستخدام خلفيات متعددة بدلاً من واحدة. أو ، الأفضل من ذلك ، إذا قمنا بتوسيع القواعد لاستخدام العناصر بدلاً من صور الخلفية ، فيمكننا تطبيق نفس الرسوم المتحركة على جميع الخلفيات واستخدام شرطة animation-delay
لترهيب التأثير.
الكثير من الطرق للقيام بذلك ، بالطبع! يمكن بالتأكيد تحسينه باستخدام متغيرات Sass و / أو CSS. هيك ، ربما يمكنك أن تسحبه بمفرده <div>
إذا كان الأمر كذلك ، شاركه في التعليقات!
المكافأة: اجعلها غامرة
لا أعرف ما إذا كان أي شيء أكثر برودة من سارة دراسنر قلم "Happy Halloween"... وهذا من عام 2016! إنه مثال رائع على طبقات الخلفيات وتحريكها بسرعات مختلفة لخلق تجربة سينمائية تقريبًا. جيد يا إلهي هذا رائع!
GSAP هو المحرك الرئيسي هناك ، لكني أتخيل أنه يمكننا عمل نسخة مختصرة تقوم ببساطة بترجمة كل طبقة خلفية من اليسار إلى اليمين بسرعات مختلفة. ليس رائعًا ، بالطبع ، ولكن بالتأكيد التجربة الأساسية. يجب التأكد من أن بداية ونهاية كل صورة خلفية متسقة بحيث تتكرر بسلاسة عند تكرار الرسوم المتحركة.
هذا كل شيء في الوقت الراهن! أنيق جدًا لدرجة أنه يمكننا استخدام الخلفيات لأكثر من مجرد نسيج وتباين. أنا متأكد تمامًا من وجود الكثير من التفاعلات الذكية الأخرى التي يمكننا تطبيقها على الخلفيات. تماني عفيف فعل ذلك بالضبط مع مجموعة من تأثيرات التمرير الأنيقة للروابط. في ماذا تفكر؟ شاركها معي في التعليقات!
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- من نحن
- فوق
- مطلق
- إطلاقا
- الوصول
- إمكانية الوصول
- حسابي
- في الواقع
- Ad
- قدما
- الكل
- سابقا
- و
- الرسوم المتحركة
- أعلن
- آخر
- تفاح
- التقديم
- نهج
- اقتراب
- مناسب
- حول
- الأصول
- الى الخلف
- خلفية
- خلفية الصورة
- خلفيات
- سيئة
- قاعدة
- على أساس
- خط الأساس
- في الأساس
- لان
- قبل
- أفضل
- ما بين
- كبير
- أكبر
- قطعة
- الحدود
- نساعدك في بناء
- باقة
- حساب
- محسوب
- الحالات
- بالتأكيد
- تغيير
- أرخص
- فئة
- كلاسيكي
- ملابس
- الكود
- مساومة
- نظر
- ثابتة
- ثابت
- وعاء
- محتوى
- سياق الكلام
- تباين
- تحول
- رائع
- رابطة
- استطاع
- الدورة
- بهيكل
- خلق
- CSS
- اندفاع
- تعريف
- ديموس
- فعل
- فرق
- مختلف
- الأبعاد
- مباشرة
- عرض
- وثيقة
- وثائقي
- لا
- لا
- الشك
- سائق
- قطرة
- أثناء
- كل
- في وقت سابق
- حافة
- تأثير
- الآثار
- عناصر
- القضاء
- ضمان
- عزبة
- حتى
- الحدث/الفعالية
- EVER
- كل
- بالضبط
- مثال
- أمثلة
- الخروج
- وسع
- توقع
- متوقع
- الخبره في مجال الغطس
- احتفل على
- لافتة للنظر
- الميزات
- قليل
- قم بتقديم
- افلام
- نهاية
- الاسم الأول
- تناسب
- يطفو على السطح
- إلى الأبد
- وجدت
- مجانًا
- تبدأ من
- وظيفة
- دولار فقط واحصل على خصم XNUMX% على جميع
- منح
- زجاج
- Go
- هدف
- يذهب
- خير
- عظيم
- ارتفاع
- هنا
- عقد
- أمل
- تحوم
- كيفية
- لكن
- HTML
- HTTPS
- سوف
- فكرة
- صورة
- صور
- آثار
- أهمية
- in
- في أخرى
- بدلًا من ذلك
- تفاعل
- التفاعلات
- قضية
- IT
- نفسها
- جافا سكريبت
- احتفظ
- ملك
- علم
- أكبر
- طبقة
- طبقات
- تحديد
- محدود
- خط
- القليل
- بحث
- الرئيسية
- جعل
- في غضون
- يجتمع
- ربما
- مانع
- الأكثر من ذلك
- أكثر
- اقتراح
- خطوة
- الحركات
- التحركات
- يتحرك
- متعدد
- خلفيات متعددة
- الاسم
- حاجة
- التالي
- عدد
- عرض
- عوض
- ONE
- online
- الأمثل
- أصلي
- أخرى
- أخرى
- في الخارج
- نمط
- قطعة
- رمية
- بكسل
- المكان
- وجهات
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- بلايستشن
- البوينت
- ان يرتفع المركز
- وضع
- مواقف
- إيجابي
- عملية
- جميل
- منع
- سابقا
- المحتمل
- المنتج
- لائق
- HAS
- الملكية
- ويوفر
- تسحب
- الوصول
- القراء
- حقيقي
- العقارات
- كرر
- نتيجة
- عائدات
- أظهرت
- جذر
- القواعد
- يجري
- الأملاح
- نفسه
- ساس
- حجم
- النطاقات
- نطاق
- شاشة
- قارئات الشاشة
- التمرير
- بسلاسة
- يبدو
- دلالات
- طقم
- عدة
- الشكل
- مشاركة
- شاركت
- ينبغي
- الاشارات
- ببساطة
- عزباء
- المقاس
- الشرائح
- بطيء
- الأصغر
- So
- الصلبة
- بعض
- شيء
- في مكان ما
- الفضاء
- على وجه التحديد
- بسرعة
- تابل
- مربع
- بداية
- بدأت
- البيانات
- متجر
- نمط
- مناسب
- فائق
- TAG
- أخذ
- مع الأخذ
- الحديث
- عهد
- •
- العالم
- شيء
- الأشياء
- خالد
- مرات
- إلى
- سويا
- نغمة
- تيشرت
- انتقال
- صحيح
- منعطف أو دور
- tv
- عادة
- وحدة
- تستخدم
- مستخدم
- قيمنا
- القيم
- الإصدار
- فيديو
- المزيد
- شاهد
- طرق
- ابحث عن
- التي
- في حين
- كامل
- ويكيبيديا
- سوف
- في غضون
- بدون
- كلمات
- للعمل
- العالم
- سوف
- X
- سنوات
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- زفيرنت
- صفر
- زوم