تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
اسکریپت یا کد انتقال دهنده کاربر به صفحه 2 پاسخ 109 بازدید وردپرس شبکه 0 پاسخ 3 بازدید مشکل در نصب اسکریپت 0 پاسخ 1 بازدید درخواست افزونه 3 پاسخ 715 بازدید اسکریپت مدیریت هاست رایگان 3 پاسخ 276 بازدید کتابخانه blog برای لاراول 0 پاسخ 88 بازدید معرفی وبسایت خرید آنلاین مواد و لوازم دندانپزشکی 0 پاسخ 106 بازدید افزونه Coins MarketCap 1 پاسخ 516 بازدید درخواست پلاگین 4 پاسخ 782 بازدید اسکریپت vfm 5 پاسخ 871 بازدید
تبلیغات
تبلیغات تبلیغات

ساخت قلب تپنده در سایت شما با استفاده از SVG

مقالات,آموزش,ترفند , آموزش ها , وردپرس

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

 

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



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

 

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

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

 

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

 

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

ساخت قلب تپنده در سایت شما با استفاده از SVG

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

توی نرم‌افزار ویرایش کد، مثلا همون 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 اعلام کردیم که هر ۱ ثانیه، قلب ما به میزان ۱.۵ برابر بزرگتر بشه. می‌تونید اعداد بالا رو به هر مقداری که دوست دارید تغییر بدید. مثلا توی پیش نمایش زیر، این عدد رو به 0.5 ثانیه تغییر میدم تا نتیجه رو ببینید:
 

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , آموزش ها , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=43738
کلمات کلیدی پست :
مطالب مرتبط
8,594دانلود قالب صفحه 404 گربه متحرک به صورت HTML تاریخ : 2017/11/28
6,097افزونه پشتیبان گیری وردپرس Backup & Clone Master تاریخ : 2015/05/12
16,122قالب متریال مدیریت وب سایت Admin.io به صورت HTML تاریخ : 2016/10/5
6,725کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 2014/10/17
11,798دانلود قالب هاستینگ ColorHost نسخه HTML و WHMCS تاریخ : 2017/08/24
13,241افزونه نمایش نقشه کره زمین در وردپرس Interactive World Maps نسخه 2.2.7 تاریخ : 2018/09/11
10,354اسکریپت ایجاد افکت و انیمیشن در تصاویر سایت tFigure تاریخ : 2014/08/19
15,888قالب HTML مدیریت وب سایت Adminto تاریخ : 2016/10/15
5,408هفتمین شماره ماهنامه طراحی وب منتشر شد تاریخ : 2014/12/6
6,652انتشار پنجمین شماره ماهنامه طراحی وب تاریخ : 2014/08/28
15,463قالب مدیریت وب سایت Flatkit به صورت HTML تاریخ : 2016/10/5
78,410آموزش اضافه کردن فونت فارسی به قالب تاریخ : 2014/04/23
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات