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

مع اقتراب العام الجديد، يظهر أمران على أغلب المواقع الإلكترونية: “تساقط الثلوج” وصفحة التخفيضات والتخفيضات. كلاهما يتم بكل بساطة. الثلج - استخدام مكونات jQuery الإضافية، والخصومات والمبيعات من خلال تصوير عدد أكبر مشطوب بخط أحمر سميك فوق علامة السعر، والذي من المفترض أنه يتوافق مع السعر القديم.

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

نبدأ بتثبيت "تساقط الثلوج" عن طريق إنشاء مجلد جديد، اسمه الطبيعي ثلج، ثم نقوم بتنزيل الأرشيف وفك ضغطه في هذا المجلد. سيكون لدينا نصين jquery-1.8.3.min.js و jquery.snow.js فيه.

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

$(مستند).جاهز(وظيفة())(
$.fn.snow();
});

لكي يظهر الثلج في صفحة الموقع فقط أضف داخل الوسم
.

يحتوي هذا البرنامج المساعد على أربعة إعدادات فقط. وهي موجودة في بداية ملف jquery.snow.js ويمكن تغييرها في أي محرر أو في برنامج "المفكرة":
الحد الأدنى للحجم: 10 // الحد الأدنى لحجم ندفة الثلج
maxSize: 20 // الحد الأقصى لحجم ندفة الثلج
newOn: 500، // تكرار ظهور رقاقات الثلج بالمللي ثانية، أي كثافة الثلج
فليك كولور: "#bbbbbb" // لون رقاقات الثلج

لاحظ أيضًا قيمة z-index:10 للثلج، والتي تم تعيينها في الأسطر الأولى من الملف jquery.snow.js. فهو يضبط موضع رقاقات الثلج أعلى أشرطة التمرير (عروض الشرائح) والقوائم المنسدلة، إذا كانت صفحتك تحتوي عليها.

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

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

وأخيرًا، أضف السطر الموجود داخل العلامة (يفضل أن يكون في بداية الصفحة)
.

إذا لم يكن لديك ثلج، فتأكد من إدخال العنوان الكامل لصور ندفة الثلج بشكل صحيح في السطر التالي من ملف snow.js:
فار img=" "; .

يتم تحديد ضبط كثافة الثلج في نفس الملف بواسطة وسيطة رقمية في السطر
setTimeout("snow("+id+");,100 ); // تردد رقاقات الثلج،
وسرعة حركة رقاقات الثلج في الخط
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // سرعة حركة رقاقات الثلج

أيضًا، كما هو الحال في الخيار الأول، انتبه إلى قيمة z-index:10 بحيث يتداخل الثلج مع أشرطة التمرير والقوائم المنسدلة وما إلى ذلك الموجودة على الصفحة.

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

ليس هناك الكثير مما يمكن قوله هنا، فمن الأفضل مشاهدة عرض توضيحي لهذا الثلج المتساقط. بالإضافة إلى ذلك، هناك خلفية جميلة جدًا ونقش "سنة جديدة سعيدة" مكتوب بخط "Lobster" الجميل من Google. يمكنك بسهولة تحويل هذا الملف إلى بطاقة تهنئة عبر الإنترنت.

يربط مثل هذا: بين العلامات وأدخل الكود التالي:

الصق كود CSS في ملف CSS الخاص بك (عادةً style.css):

#canvas (الحدود: 1 بكسل أسود خالص؛ الموضع: مطلق؛ مؤشر z: 10000؛) #flake (اللون: #fff؛ الموضع: مطلق؛ حجم الخط: 25 بكسل؛ الأعلى: -50 بكسل؛)

لنقم بإنشاء ملف snow.js وإدراج كود جافا سكريبت التالي هناك:

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20؛ var endPositionTop = documentHeight - 40؛ var endPositionLeft = startPositionLeft - 100 + Math.random() * 200؛ var DurationFall = documentHeight * 10 + Math.random() * 5000؛ $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, اليسار: endPositionLeft، العتامة: 0.2)، DurationFall، "linear"، function() ( $(this).remove()); ), 500); فار سنو = (); فار سنوفليكس = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. style .color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex .style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( ClearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 500); ); //ثلج.عاصفة(); فار الضباب = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.ClosePath(); ctx.fill(); ); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x);y = 300 + 300* -Math.cos(x); x += 2;fog.draw(ctx, x, y); ), 100); ); //fog.start();

نقوم بتضمين ملف js في:

حسنًا، يبقى الشيء الأكثر أهمية - أدخل كود HTML الخاص بتساقط الثلوج في أي مكان في:

❄

إذا فعلت كل شيء بشكل صحيح، فسوف يبدأ الثلج في الانخفاض على موقعك.

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

تأكد من تضمين مكتبة jQuery (ليس ضروريًا إذا كانت لديك هذه المكتبة مضمنة بالفعل). يربط مثل هذا: بين العلامات وأدخل الكود التالي:

على غرار توصيل مكتبة jQuery، نقوم بتوصيل الخط الخاص بنقش "سنة جديدة سعيدة":

بطبيعة الحال، إذا لم تكن بحاجة إلى هذا النقش والخط، فلا يتعين عليك تضمينه، ولكن بعد ذلك في CSS، قم بإزالة "font-family: "Lobster"، cursive;" من سمة H1، أو استبدلها مع الخط الخاص بك

الخيار أ: الصق كود CSS في ملف CSS الخاص بك. إليك الكود:

Img.bg ( /* تعيين القواعد لملء الخلفية */ min-height: 100%; min-width: 1024px; /* إعداد القياس المتناسب */ width: 100%; height: auto; /* إعداد الموضع */ الموضع: ثابت؛ الأعلى: 0؛ اليسار: 0؛ ) h1 (عائلة الخط: "Lobster"، مخطوطة؛ اللون: #FFF؛ حجم الخط: 90 بكسل؛ محاذاة النص: المركز؛ ارتفاع الخط: 95 بكسل؛ الخط- الوزن: عادي؛ الهامش العلوي: 300 بكسل؛ ظل النص: 5 بكسل 5 بكسل 5 بكسل #000؛) شاشة الوسائط و(الحد الأقصى للعرض: 1024 بكسل) ( /* خاص بهذه الصورة تحديدًا */ img.bg ( اليسار: 50% ; الهامش الأيسر: -512px; /* 50% */ ) ) html, body ( عائلة الخط: Helvetica, Arial, sans-serif; حجم الخط: 12px; ارتفاع الخط: 16px; الحشو: 0; الهامش: 0; اللون: #333; ) .bar (لون الخلفية: #111; اللون: #f0f0f0; ظل الصندوق: 0px 0px 2px #333; ارتفاع الخط: 25px; الحشو: 0px 20px; العتامة: 0.7; ) . الشريط: تحويم ( العتامة: 1؛ ) .شريط أ (اللون: #DDD؛ ) .شريط أ: تحويم (اللون: #FFFFFF؛) أ (اللون: #FFFFFF؛ زخرفة النص: لا شيء؛ ) أ: تحويم (لون : #CCC; ) #canvas (الحدود: 1 بكسل أسود خالص؛ الموضع: مطلق؛ مؤشر z: 10000؛ ) #flake (اللون: #fff؛ الموضع: مطلق؛ حجم الخط: 25 بكسل؛ الأعلى: -50 بكسل؛) #page (الموضع: نسبي؛)

الخيار ب. يمكنك أيضًا إنشاء ملف منفصل، على سبيل المثال snow.css ولصق نفس الكود هناك، على الرغم من أنه سيلزم تضمينه في الرأس كما يلي:

الخيار أ. للقيام بذلك، نحتاج إلى إدراج كود جافا سكريبت التالي في أسفل الموقع (قبل الإغلاق):

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var DurationFall= documentHeight * 10 + Math.random() * 5000؛ $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, اليسار: endPositionLeft، العتامة: 0.2)، DurationFall، "linear"، function() ( $(this).remove()); ), 500); فار سنو = (); فار سنوفليكس = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. style .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex .style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( ClearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500); ); //ثلج.عاصفة(); فار الضباب = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.ClosePath(); ctx.fill(); ); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x);y = 300 + 300* -Math.cos(x); x += 2; fog.draw(ctx, x, y); ), 100); ); //fog.start();

الخيار ب. تمامًا كما هو الحال مع كود CSS، يمكن وضع جافا سكريبت في ملف منفصل ويسمى أيضًا snow.js ويتم تضمينه في الرأس:

قم بتحميل الصورة bg.jpg من الأرشيف إلى جذر موقعك

حسنًا، الشيء الأكثر أهمية هو إدخال كود html الخاص بالثلج المتساقط:

سنة جديدة سعيدة! ❄

تم ربط نص تساقط الثلوج بنجاح. تأكد من مشاهدته أثناء العمل. أتمنى لك كل خير!

لم يتبق سوى القليل من الوقت قبل حلول فصل الشتاء، وبدأ عدد كبير من مشرفي المواقع في تهيئة الأجواء المناسبة على مواقعهم. في هذه المناسبة، نقدم مجموعتنا المختارة من تأثيرات الثلج لموقعك على الويب.

سنبدأ اختيارنا بتأثير ثلجي جميل جدًا، والذي تتم إضافته إلى الموقع باستخدام مكون إضافي يسمى "jSnow".

توضيح:

موافق - جميل!

لتثبيت هذا التأثير على موقع الويب الخاص بك، قم بما يلي.

1. قم بتنزيل أرشيف jsnow.zip في نهاية المقالة. قم بفك ضغط المحتويات وتحميلها إلى موقع الويب الخاص بك عبر FTP أو أي طريقة أخرى مناسبة لك.

لسوء الحظ، لا يعمل البرنامج النصي مع الإصدارات الجديدة من jQuery، لذلك نحن راضون عما لدينا.

3. قبلاستخدم علامة الإغلاق لتضمين البرامج النصية:

$(document).ready(function() ( $("body").jSnow(( vSize: 100, // حجم مساحة رقائق الثلج: 30, // عدد رقائق الثلج: ["#fff"], // اللون flakeMinSize : 10, // الحد الأدنى لحجم ندفة الثلج ندفة الثلج MaxSize: 20, // الحد الأقصى لحجم ندفة الثلج المتساقطةSpeedMin: 1, // الحد الأدنى لسرعة تساقط ندفة الثلجSpeedMax: 2, // الحد الأقصى لسرعة ندفة الثلجCode:["." ] // نوع ندفة الثلج )); ) );

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

البرنامج النصي، كما تفهم، عالمي، وبدلا من الثلج المستدير، يمكنك إضافة نجوم، على سبيل المثال، مثل هذا:

FlakeCode:["*"] // مظهر ندفة الثلج

أو حفنة من الثلوج والنجوم المستديرة:

FlakeCode:["."، "*"] // مظهر ندفة الثلج

وكذلك أي رمز آخر (وحتى علامة الدولار - $).

يعد البرنامج النصي رائعًا لتزيين الجزء العلوي من الموقع دون تداخل المحتوى الرئيسي.

لماذا الذكية، تسأل؟ لأنه في هذا البرنامج النصي (على عكس البرامج الأخرى التي تمت مناقشتها في هذه المقالة) يوجد تأثير إضافي لصد رقاقات الثلج. أي أنه عند تحريك مؤشر الماوس على موقعك، تندفع رقاقات الثلج في الاتجاه المعاكس منه. كلما ابتعد المؤشر عن منتصف الشاشة، زادت سرعة تحرك رقاقات الثلج.

توضيح:

لتثبيت هذا التأثير على موقعك، لا يلزم وجود مكتبات إضافية. كل ما عليك فعله هو:

1. قم بتنزيل أرشيف snowstorm.zip في نهاية المقال. قم بفك ضغط المحتوى وتحميله إلى موقعك بطريقة تناسبك.

window.onload = function() ( snowStorm.snowColor = "#fff"; // لون رقاقات الثلج snowStorm.flakesMaxActive = 100; // الحد الأقصى لعدد رقاقات الثلج المرئية snowStorm.followMouse = true; // صحيح - قم بمطاردة المؤشر، خطأ - لا يوجد snowStorm.snowCharacter = "."; // نوع ندفة الثلج );

إذا لزم الأمر، قم بإجراء تغييرات على الرسوم المتحركة للبرنامج النصي.

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

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

توضيح:

يستغرق تثبيت هذا التأثير وقتًا أطول قليلاً من غيره.

1. إذا لم يكن موقعك يحتوي على مكتبة jQuery، فقم بإدراجها في قسم HEAD:

3. قم بتعيين فئة "darkBg" للعلامة الافتتاحية:

4. قبلقم بتضمين البرامج النصية مع علامة الإغلاق:

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // عدد رقاقات الثلج )); ));

5. وفي المرحلة النهائية، قم بتعيين فئة لتلك العناصر التي يجب أن تتشكل عليها الانجرافات الثلجية:

كلاس = "كولكتونمي"

إذا كنت لا ترغب في تشكيل الانجرافات الثلجية على الموقع، فقم بإزالة السطر من البرنامج النصي:

المجموعة: ".collectonme"،

هذا إجراء إلزامي، وإلا فلن يسقط الثلج على موقعك.

نص ممتاز، وهذا هو بالضبط ما استخدمناه على موقعنا من قبل.

هنا، كما تفهم، لن نلجأ إلى استخدام جميع أنواع البرامج النصية، ولكننا سنكتفي باستخدام CSS خالصًا.

توضيح:

السحرية، أليس كذلك؟

من أجل تثبيت هذا التأثير لنفسك، اتبع ثلاث خطوات بسيطة.

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

2. في ملف النمط الخاص بك، أدخل (ويفضل أن يكون في الأسفل):

حاوية الثلج ( العرض: 100%; الارتفاع: 100%; الموضع: مطلق; الأعلى: 0; اليسار:0; الفهرس z: -1; ) #snow ( العرض: 100%; الارتفاع: 100%; صورة الخلفية: url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: ثلج 20s خطي لا نهائي؛ -moz-animation: ثلج 20 ثانية خطي لا نهائي؛ -ms-animation: ثلج 20 ثانية خطي لا نهائي؛ الرسوم المتحركة: ثلج 20 ثانية خطي لا نهائي؛ ) @keyframes snow ( 0% ( موقف الخلفية: 0px 0px, 0px 0px, 0px 0px; ) 100% ( موقف الخلفية: 0px 0px, 0px 0px, 0px 0px; ) 100% : 500 بكسل 1000 بكسل, 400 بكسل 400 بكسل, 300 بكسل 300 بكسل; ) ) @-moz-keyframes snow ( 0% ( موضع الخلفية: 0px 0px, 0px 0px, 0px 0px; ) 100% ( موضع الخلفية: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes snow ( 0% ( موضع الخلفية: 0px 0px, 0px 0px, 0px 0px; ) 100% ( موضع الخلفية: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- الإطارات المفتاحية ثلج ( 0% ( موضع الخلفية: 0px 0px, 0px 0px, 0px 0px; ) 100% ( موضع الخلفية: 500px 1000px, 400px 400px, 300px 300px; ))

ثم احفظ جميع التغييرات.

فيما يلي مجموعة جيدة من تأثيرات الثلج التي ستسعد زوار موقعك على الويب بلا شك.