قرار دادن انیمشن شروع برای ورود به سایت
پاسخ‌ها
8
درود خوبی...
از جاوا اسکریپت به کار بگیرید:
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
ببخشید بعد اون استایلی که خوودم درست کردم رو کجای این کدا باید قرار بدم
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
یعنی باید استایل های اون چیزی که درست کردم توی div loader قرار بدم؟
@pootak
استایل رو دست نزن
اون آی دی یا کلاسی که به استایل دادید در اینجا قرار بده...
<div id="loader"></div>
سلام وقت بخیر
توی onload بادی باید یک فانکشن پاس بدید که توی اون فانکشن همون لودر شما باید قرار بگیره
حتی میتونید یک اینترول قرار بدید به مدت ۴ ثانیه و سپس اون لودر از بین بره.
اگر متوجه نشدید بگید تا نمونه کد براتون بنویسم
متوجه نشدم شرمنده
پیوند رو رفتم نگاه کردم تمام ساختار لودینگ رو به دیوی که loader هست داده
یعنی این جا بیام بجای loader بیام اون اسم استایل خودم رو قرار بدم
این قطعه کد های ساختش
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://roocket.ir/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;
}
}ببخشید میشه با این کدا خودتون برام نمونش رو بسازید من یکم اخه گیج شدم