كيف تعمل هذه التأثيرات
كيف تعمل هذه التأثيرات
ال input منتشر على الشاشة وأينما ضغطت في الشاشة تكون قد ضغطت عليه
وواجهته لها اللون المختار
والصورة هي خلفية لل body
وعند إظافة الكود أعلاه على ال input يتم الدمج بطريقة معينة بين لونه و خلفية ال body
يمكن الإقتصار فقط علا هذه الأكواد
HTML
<input type="color" value="#0000ff">
CSS
body {
background: url(
https://s3-us-west-2.amazon...
25%/cover;
height: 100vh;
margin: 0;
}
input {
padding: 0;
border: none;
position: absolute;
width: 100%;
height: 100%;
mix-blend-mode: hue;
cursor: pointer;
}
سوف أوضح لك طريقة عمل هذا التأثير
أولا توضع الخلفية على كامل الشاشة
ويوضح input من نوع خالط الوان
ثم توضع له فلتر hue عن طريق mix-blend-mode مثل فلترات الفوتوشوب
وتلاحظ أنه اذا ضغطت على السيارة يمكنك تغير اللون
document.getElementById("input_color").value = "#0066ff";
قام بوضع input كعنصر كامل في الصفحة ونوع الانبوت هو color وفي حال ضغط في مكان عشوائي في الصفحة فانك بدالك تضغط على input ويضهر لك قائمة الالوان
وهده هي الخاصية المسؤولة mix-blend-mode عن تغيير اللون على الصورة فهي تقوم بجعلهم مزيج يجعل لون input يؤتر على لون الصورة
الخلاصة الخاصية تقوم بمزج لون السيارة الاصلي مع لون input لتخرج بلون اخر
متال لون ان لون السايرة ازرق لون ضغطنا واخترنا اللون الاصفر فهي ستقوم بحمع اللون الاصفر مع اللون الازرق لتعطي لنا لون اخضر او ازرق داكن او اصفر داكن على حسب شدة اللون المختارة
هده هي المسببة في كل دالك
mix-blend-mode
اتمنى ان اكون قد شرحت لك او بينت لك وقد اكون مخطا
التعليقات