قرار دادن انیمشن شروع برای ورود به سایت
سلام خسته نباشید خدمت اساتید من یک همچین چیزی طراحی کردم
میخواستم بپرسم چطور همچین چیزی رو طوری قرار بدم که کاربر وقتی به سایت من ورود میکنه اول این گزینه که به عنوان مثال عنوانش
loading هست رو نمایش بدم برای حداقل 4ثانیه و بعد سایتم بالا بیاد
دقیقا باید چکار کنم
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
درود خوبی...
از جاوا اسکریپت به کار بگیرید:
HTML:
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>جاوا اسکریپت :
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}پیوند زیر:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
@pootak
استایل رو دست نزن
اون آی دی یا کلاسی که به استایل دادید در اینجا قرار بده...
<div id="loader"></div>
سلام وقت بخیر
توی onload بادی باید یک فانکشن پاس بدید که توی اون فانکشن همون لودر شما باید قرار بگیره
حتی میتونید یک اینترول قرار بدید به مدت ۴ ثانیه و سپس اون لودر از بین بره.
اگر متوجه نشدید بگید تا نمونه کد براتون بنویسم
پیوند رو رفتم نگاه کردم تمام ساختار لودینگ رو به دیوی که loader هست داده
یعنی این جا بیام بجای loader بیام اون اسم استایل خودم رو قرار بدم
این قطعه کد های ساختش
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spiner</title>
</head>
<body>
<div class="center">
<div class="text">
loading
</div>
<div class="ring"></div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing:0;
background-color: #333;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ring{
width: 300px;
height: 300px;
border-radius: 50%;
background: transparent;
animation: spiner 2s linear infinite;
}
.text{
width: 300px;
height: 300px;
line-height: 300px;
color: #fff;
border-radius: 50%;
position: absolute;
text-align: center;
top: 0;
left: 0;
font-size:2rem;
letter-spacing: 5px;
box-shadow: 0 0 5px rgba(255,255,255,.2);
background: transparent;
}
@keyframes spiner{
0%{
transform: rotate(0deg);
box-shadow: 1px 5px 2px #ff00ee;
}
50%{
transform: rotate(180deg);
box-shadow: 1px 5px 2px #18a401;
}
100%{
transform: rotate(360deg);
box-shadow: 1px 5px 2px #033e8e;
}
}ببخشید میشه با این کدا خودتون برام نمونش رو بسازید من یکم اخه گیج شدم