دیجی اسکریپت

این روز‌ها مد شده پایین هر وب‌سایتی یک قلب اضافه کنیم و مثلا بنویسیم: ساخته شده با ❤️ به دست رضا حسینی راد 🙂 بد هم نیست. شاید خودمون هم به میهن وردپرس اضافه کردیم.

زیباست. اما چون شکلک روی همه سیستم‌ها اجرا نمیشه و از سمت دیگه استفاده از تصویر برای انجام چنین کار خلاقانه‌ای هم عملا کند کردن سرعت سایت شماست، قصد داریم این کار رو با استفاده از SVG انجام بدیم. همون Scalable Vector Graphics که قبلا توی دوره صفر تا صد طراحی سایت در موردش صحبت کردیم. اگر اطلاع ندارید مقاله ما درباره SVG رو بخونید.

اگر مقاله رو خونده باشید متوجه شدید که با استفاده از SVG می‌تونید فایل‌هایی با کیفیت بسیار بالا، ساده و شیک و با حجم بسیار کم تولید کنید. حالا قصد داریم با استفاده از SVG یک قلب تپنده زیبا در وردپرس بسازیم. به این شکل:

اگر دوست دارید شگفت زده بشید، باید عرض کنم که این انیمیشن تنها با استفاده از HTML ساخته شده. پس بریم که بسازیمش.

اول یک آیکون قلب بسازیم

قبل از هر چیزی باید یک آیکون قلب داشته باشیم تا بتونیم اون رو تپنده کنیم. پس بریم برای ساخت ایکون قلب در SVG

ساخت آیکون باید با استفاده از نرم افزار adobe illustrator انجام بشه و اگر بخوام این کار رو به شما آموزش بدم. نیاز به یک دوره چند ساعته برای انجام اینکار هست. پس اینبار اجازه بدید به جای ماهی گیری، به شما ماهی بدم. 🙂 از انتهای همین صفحه آیکون قلب رو دانلود کنید.

فایلی که دانلود کردید رو باز کنید و فایل heart.svg رو با استفاده از نرم افزار ویرایش متن، مثلا Atom باز کنید.

حالا این فایل رو داشته باشید تا بعدا بریم سراغش.

توی نرم‌افزار ویرایش کد، مثلا همون Atom یک فایل جدید باز کنید. شروع کنیم به نوشتن کد‌هایی برای ساخت فایل SVG. پس این کد رو داخلش قرار بدید:

<svg width="100" height="100" viewBox="0 0 100 100">
   
</svg>

توی عبارت بالا می‌تونید عدد ۱۰۰ رو به هر عددی که قصد دارید سایز آیکون شما باشه تغییر بدید. فقط دقت داشته باشید که اندازه آیکون شما با اندازه این SVG یکی باشه.

حالا اگر قصد دارید رنگ پس زمینه SVG شما هم با رنگ قالب یکی باشه پس باید این کد رو به سی اس اس اضافه کنید.

svg {
  background: blue;
}

کد بالا اعلام کرد که رنگ پس زمینه ما آبی باشه.

حالا Path قلب رو اضافه کنید.

قلبی که توی atom باز کردید رو ببینید. توی این فایل یک مقدار path مشخص شده با یک مقدار d که مقدار d مسیر نمایش path رو به مرورگر اعلام می‌کنه. شما باید این مقدار رو بصورت زیر بین svg در فایل جدیدی که ایجاد کردید، قرار بدید.

<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0
	c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"/>

توی کد بالا مقدار fill به شما رنگ قلب رو اعلام می‌کنه. مثلا tomato یه رنگی در حدود گوجه‌فرنگی رو به شما اعلام می‌کنه (که با توجه به قیمت فعلی گوجه فرنگی، رنگ بسیار زیبا و لاکچری هم هست. 🙂 )

پس تا اینجا نتیجه کار ما شد این کد:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
</svg>

که به این شکل نمایش داده خواهد شد:

قلب بزرگتر می‌خواید؟

می‌خواید قلب بزرگتر باشه؟ پس فایل svg رو با ادوبی ایلاستریتر ویرایش کنید و یک فایل svg بزرگتر بسازید. سپس اعداد ۱۰۰ رو به عدد دلخواه خودتون تغییر بدید. به همین راحتی!

زنده کردن قلب!

حالا میرسیم به قسمت جالب کار. می‌خوایم قلب رو تپنده کنیم. پس بریم برای ایجاد یک قلب تپنده و نمایش اون توی سایتمون.

برای متحرک کردن قلب باید کد زیر رو بعد از path اضافه کنیم. قبل از بسته شدن تگ svg توی فایل بالا. به این شکل:

<svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
<animateTransform
      attributeName="transform"
      type="scale"
      dur="1s"
      values="1; 1.5; 1.25; 1.5; 1.5; 1;"
      repeatCount="indefinite">
</animateTransform>
</svg>

توی کد بالا با استفاده از animateTransform اعلام کردیم که هر ۱ ثانیه، قلب ما به میزان ۱.۵ برابر بزرگتر بشه. می‌تونید اعداد بالا رو به هر مقداری که دوست دارید تغییر بدید. مثلا توی پیش نمایش زیر، این عدد رو به ۰٫۵ ثانیه تغییر میدم تا نتیجه رو ببینید:

به همین راحتی یک قلب تپنده ایجاد شد. فقط کافیه کد بالا رو بصورت یک فایل SVG ذخیره کنید و با img توی سایت‌تون نمایش بدید و یا مستقیما کد رو به HTML سایت خودتون اضافه کنید و لذتش رو ببرید. 🙂

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

سلام و درود به شما همراهان دوست داشتنی میهن وردپرس

در جلسات قبلی بیشتر مفاهیم ابتدایی را با هم کار کردیم. امیدوارم به صورت کامل بر آن ها تسلط داشته باشید. از این جلسه به بعد شروع به آموزش قابلیت های مهم و کاربردی میکنیم. با من همراه باشید:

تگ <div> :

این تگ یکی از مهم ترین و کاربردی ترین تگ های HTML است. به وسلیه این تگ می توانیم صفحه ی سایتمان را قسمت بندی کنیم و در هر کدام از این قسمت ها ، محتوایی را که دوست داریم قرار بدهیم. این تگ به دو صورت خوانده میشود.

۱- دیو

۲- دی آی وی

به خودتان بستگی دارد که چه مدلی بخوانیدش! من مدل دوم را ترجیح میدهم!

نکته : تگ <div> از نوع block است و inline نیست. یعنی هر وقت از آن استفاده کنیم کل عرض مرورگر را میگیرد. به عبارتی اگر شما سه تگ <div> را پشت سر هم بنویسید ، محتوایشان زیر هم نمایش داده میشود نه کنار هم. راجب مفهوم inline و block بعدا با هم صحبت خواهیم کرد.

نکته : تگ دی آی وی یک تگ بسته است.

تگ های عنوان :

<h1/> این یک عنوان است<h1>

<h2/> این یک عنوان است<h2>

<h3/> این یک عنوان است<h3>

<h4/> این یک عنوان است<h4>

<h5/> این یک عنوان است<h5>

<h6/> این یک عنوان است<h6>

همانطور که از اسمشان معلوم است برای عنوان ها از این تگ ها استفاده میشود. اهمیت عنوان ها از h1 تا h6 به ترتیب کاهش می یابد. این موضوع درباره سئو هم صدق می کند و تگ h1 نسبت به h2 اهمیت بیشتری دارد. تگ h2 نسب به h3 و… به همین ترتیب.

نکته : تگ های عنوان یا همان heading ها مانند تگ div از نوع بلاک هستند. یعنی به صورت زیر همدیگر قرار میگیرند.

نکته : تگ های heading از نوع تگ های بسته هستند.

تگ <p> :

می رسیم به تگ دوست داشتنی p ! با استفاده از این تگ می توانیم پاراگراف ها را به سایتمان اضافه کنیم. بخش عمده ای از هر پست سایت از پاراگراف ها تشکیل شده است. اگر با مرورگرتان از همین متن inspect بگیرید ، متوجه این موضوع میشوید.

نکته : تگ p از نوع block است. حالا شما بگویید : از نوع block است یعنی…

نکته : تگ p از نوع تگ های بسته است.

تگ <img> :

با استفاده از تگ img می توانیم در سایتمان از تصاویر استفاده کنیم. این تگ چند اتربیوت(ویژگی) مهم دارد که آن ها را به شما معرفی میکنم.

اتربیوت های تگ img :

src : در این اتربیوت آدرس عکسمان قرار می گیرد.

alt : این اتربیوت یک متن جایگزین برای عکسمان در نظر میگیرد تا اگر عکسمان به هر دلیلی لود نشد ، آن متن نمایش داده شود. احتمالا یک بار اتفاق افتاده است که با چنین سایتی مواجه شده باشید. راستی حتما alt را قرار دهید. حتی اگر شده به صورت خالی چون برای سئو مهم است.

title : این اتربیوت عنوان عکس را نمایش میدهد. به عبارتی وقتی موس را روی عکس ببرید title نمایش داده میشود.

width : عرض تصویر را مشخص میکند.

height : ارتفاع تصویر را مشخص میکند.

در نهایت یک تگ img کامل به این صورت در می آید :

خب تا همین جا کافی است. حتما تگ های گفته شده را در فایل html ی که ایجاد کرده اید ، بنویسید و تمرین کنید تا به خوبی ملکه ذهنتان شود. تا جلسه بعدی خدانگهدارتان…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

محمد مقدم وبسایت شخصی
وقت گذراندن با آن هایی که دنیا را مثل من می بینند دوست دارم…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

محمد مقدم وبسایت
وقت گذراندن با آن هایی که دنیا را مثل من می بینند دوست دارم…