type effect project
سلام من یدونه از این افکتای تایپ درست کردم و میخوام یه صفحه همکاری در فروش توی سایت فروشگاهی خودم درست کنم که با استفاده از این افکت میخوام ظاهر جذاب تری به تبلیغات بدم که کاربر فکر کنه این سایت خیلی خفنه و مثلا مدیر سایت داره این پیامو برای کاربر مینویسه، کارکرد این افکت اینه که توی before که مال اسپن هست یه متن گذاشتم و گفتم که حق نداری بشکنی و حق سر ریز شدن هم نداری، که وقتی عرض کم میشه اون خطی که کنارش هست چشمک بزنه و حالت تایپ به خودش بگیره، مشکل اینجاست که من اومدم توی انیمیشن change-content گفتم وقتی عرض اون before به 0 رسید تو بیا متن رو عوض کن، اما این متن قبل از اینکه عرض صفر بشه متن عوض میشه من تنظیم کردم که برای هر متن 33.3 درصد صبر کن و بعد متن بعدی رو نمایش بده ولی متن اول خیلی زود تر شروع میشه ولی متن های بعدی درست کار می کنن، مشکل بعدیم اینه که توی انیمیشن wait توی 10%,90% عرض رو نمی تونم auto بزنم و مجبورم 100% بزنم این باعث میشه تا اگه متن داخل before 30 کاراکتر باشه عرض before به اندازه کاراکتر های درون خود span که مثلا 50 کاراکتر هست بشه و کارو خراب می کنه، ببخشید که استایلا اینلاینن، اینو تستی نوشتم که بعدا به فایل css و html اصلی اضافه کنم
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
font-family: serif;
}
html{
direction: rtl;
background: #111;
}
.scanner span {
color: transparent;
font-size: 1.4rem;
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-drag: none;
}
.scanner span::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
border-left: 3px solid #fff;
overflow: hidden;
color: #fff;
animation: cheshmak-zan 2s linear infinite, change-content 30s 0s linear infinite, Wait 10s linear infinite;
}
@keyframes cheshmak-zan {
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
border-right-color: transparent;
}
11%,
21%,
31%,
41%,
51%,
61%,
71%,
81%,
91% {
border-right-color: #fff;
}
}
@keyframes Wait {
0%, 90%%{
width: 0;
}
10%,90%{
width: 100%;
}
}
@keyframes change-content {
0%{
content: "تنها در پیکوشاپ ۳۰ میلیون مشتری داری";
}
33.3%{
content: "تنها در پیکوشاپ به همه نقاط ایران بفروشید";
}
66.6%{
content: "تنها در پیکوشاپ بدون تعطیلی بفروشید";
}
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="loader">
<div class="scanner">
<span>fffffffffffffffffrrrfrttttttttttttttttttttttttttfffff</span>
</div>
</div>
</body>
</html>گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
به همدیگه کمک کنیم
به ML کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.