الخطوة 1: قم بتحديد صفحة الويب الخاصة بك
أولا ستحتاج إلى تحديد أي صفحة ويب تريد تطارد. مرة واحدة قمت بها اختيار الخاص بك، كل ما عليك القيام به هو إسقاط هذا مقتطف الشفرة داخل ملف HTML الخاص بك.
<div class="ghost-container">
<img class=ghost src="ghost_pic.png" alt="A picture of a scary ghost!">
</div>
هذه هي الصورة المؤرقة التي ستظهر عندما شبح الخاص بك يكشف نفسه. يمكنك تحميل لدينا شبح لطيف، our cute ghost, Booful,، أو اختيار صورة خاصة بك!
الخطوة 2: إنشاء أو تعديل الأنماط CSS الخاصة بك
هو الوقت للحصول على شبح الخاصة بك في روح المؤرقة الآن. نحن ذاهبون الى تغيير العرض الأولي للشبح لإخفاء بحيث يمكن أن تخرج وتفاجئ زوار موقعك.
.ghost-container {
width: 100%;
position: absolute;
text-align: center;
visibility: hidden;
}
.ghost {
z-index: 10;
display: block;
width: 550px;
position: relative;
margin: auto;
}
الخطوة 3: إعداد ملف جافا سكريبت الخاصة بك
المقبل سنقوم بإضافة ملف جافا سكريبت من شأنها أن تجلب شبح الخاصة بك في الحياة - مع الصوت والبصر! التعليمة البرمجية التالية يضع جهاز توقيت لمدة 5 ثوان باستخدام setTimeout من شأنها أن تؤدي إلى ظهور شبح الخاصة بك وثقب الأذن الصراخ عندما يذهب الزائر إلى موقعك. تحميل لدينا صرخة ثقب الأذن أو استخدام الصوت الخاصة بك.
var ghost = document.getElementsByClassName("ghost-container")[0];
var sound = new Audio("file.wav");
//Shows ghost and plays sound after five seconds
setTimeout(function () {
sound.load();
sound.play();
ghost.style.visibility = "visible";
}, 5000);
//Hides ghost one second after appears
setTimeout(function () {
ghost.style.visibility = "hidden";
}, 6000);
الخطوة 4: الخطوات النهائية
تأكد من ربط CSS وملفات جافا سكريبت لملف HTML الخاص بك. نحن هنا تضمينها في قسم 'رئيس'
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
ليست هناك تعليقات:
إرسال تعليق