Html and Css & Jsآموزش
ادمین : @Maryam3771 تعرفه تبلیغات: https://t.me/alloadv/822
Show more📈 Analytical overview of Telegram channel Html and Css & Jsآموزش
Channel Html and Css & Jsآموزش (@htmlcss_channels) in the Farsi language segment is an active participant. Currently, the community unites 23 293 subscribers, ranking 8 448 in the Education category and 14 600 in the Iran region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 23 293 subscribers.
According to the latest data from 02 September, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by 410 over the last 30 days and by 5 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 3.31%. Within the first 24 hours after publication, content typically collects 1.28% reactions from the total number of subscribers.
- Post reach: On average, each post receives 771 views. Within the first day, a publication typically gains 297 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 3.
- Thematic interests: Content is focused on key topics such as css, #javascript, دنیا, وبینار, شغل.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“ادمین :
@Maryam3771
تعرفه تبلیغات:
https://t.me/alloadv/822”
Thanks to the high frequency of updates (latest data received on 03 September, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Education category.
این دوره مسیر آموزشی ساختاریافتهای است که طبق سرفصلهای بهروز علمی طراحی شده و شرکتکنندگان را از مبانی ریاضیات و یادگیری ماشین تا طراحی، پیادهسازی و استقرار مدلهای پیشرفته هوشمصنوعی همراهی میکند.🕒 ۱۵ هفته: ۵۰ ساعت (آموزش) ۳۰ ساعت (حل تمرین و کارگاه) 🚀 مخاطبان دوره: دانشجویان، پژوهشگران، تحلیلگران داده، مهندسان یادگیری ماشین، متخصصین علوم داده، مهندسین داده، برنامهنویسان و توسعهدهندگان نرمافزار، و سایر علاقهمندان هوش مصنوعی و یادگیری عمیق ℹ️ اطلاعات برگزاری: شنبهها و سهشنبهها ساعت ۱۸:۰۰ تا ۲۱:۲۰ شروع از ۱۷ شهریور ۱۴۰۵ شیوه برگزاری: آنلاین 👆 معرفی کامل دوره و سوالات متداول (pdf) ❌ پشتیبانی آموزشی، ارتباط مستمر با مدرسین در طول دوره و گواهی پایان دوره 🎰 اهداف دوره: ✔️ آشنایی با مفاهیم بنیادین یادگیری ماشین و شبکههای عصبی عمیق ✔️ آشنایی با ترنسفورمرها، ساخت چتبات با RAG و LangChain ✔️ یادگیری ساخت Agent هوشمند بر پایهی پروتکل MCP ✔️ آشنایی با روشهای بهینهسازی و استقرار مدلهای زبانی ✔️ اجرای یک پروژهی عملی برای جمعبندی و تثبیت مهارتهای آموختهشده ⏳ فرصت استفاده از تخفیف ثبت نام زودهنگام ۱: جمعه ۲۶ تیر ۱۴۰۵ ⚡️ تخفیف ویژه دانشجویان ❤️امکان پرداخت قسطی 🔍 درخواست پذیرش (پیش ثبتِنام): 🔗 b2n.ir/mlai05_mbn تماس: 📱 t.me/dlearnsup 📞 02188349244 📲 09103209837 @dlearn_ir
@view-transition {
navigation: auto;
}
همین! حالا هر جابهجایی بین صفحات، خودکار انیمیشن داره.
۲. شخصیسازی انیمیشن با @keyframes
میتونی تعیین کنی صفحه قدیم چطور محو بشه و صفحه جدید چطور ظاهر بشه:
::view-transition-old(root) {
animation: fadeOut 0.4s ease-out;
}
::view-transition-new(root) {
animation: fadeIn 0.4s ease-in;
}
@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
}
۳. انیمیشن اختصاصی برای یک المان خاص
فرض کن میخوای وقتی از یه صفحه به صفحه دیگه میری، یه کارت خاص جابهجا بشه. کافیه بهش یه view-transition-name بدی:
<article style="view-transition-name: hero-card;">
<h1>تیتر اصلی</h1>
<p>توضیحات کارت</p>
</article>
و تو CSS:
::view-transition-old(hero-card),
::view-transition-new(hero-card) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
۴. مثال کامل: یک صفحه با دو لینک
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>دموی View Transitions</title>
<style>
@view-transition {
navigation: auto;
}
body {
font-family: sans-serif;
padding: 2rem;
background: #f5f5f5;
}
.card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
view-transition-name: main-card;
}
a {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 6px;
}
::view-transition-old(root) {
animation: slideOut 0.3s ease-in;
}
::view-transition-new(root) {
animation: slideIn 0.3s ease-out;
}
@keyframes slideOut {
to { opacity: 0; transform: translateX(-30px); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(30px); }
}
</style>
</head>
<body>
<div class="card">
<h1>صفحه اصلی</h1>
<p>روی دکمه زیر بزن تا انیمیشن جابهجایی رو ببینی.</p>
<a href="page2.html">برو به صفحه دوم</a>
</div>
</body>
</html>
۵. مثال با JavaScript (برای SPA)
function navigateTo(url) {
if (!document.startViewTransition) {
window.location.href = url;
return;
}
document.startViewTransition(() => {
window.location.href = url;
});
}
💎 @Htmlcss_channels | #HTML #css #JavaScript