سون لرن • آموزش

می‌گو‌یند عشق در یک نگاه اتفاق می‌افتد!شاید این جمله در دنیای واقعی خیلی طرفدار نداشته باشید، اما در دنیای اینستاگرام به شدت درست است!شما فقط چند ثانیه فرصت دارید که با یک متن بیو درست‌وحسابی، مخاطب‌تان را یک دل نه صد دل، عاشق خود کنید.وقتی یک نفرد وارد پیج شما می‌شود، اول عکس پروفایل‌تان را چک می‌کند و بعد بیو اینستاگرام‌تان را می‌خواند. پس شما باید از این فرصت استفاده کنید، تا مخاطب بالاخره آن دکمه لعنتی Follow را فشار دهد. قبل از هرچیز، مثل همیشه با تعاریف اولیه شروع می‌کنیم. بیو اینستاگرام کجاست؟ «بیو» همون مخفف کلمه بیوگرافی است و خیلی‌ها هم آن را به انگلیسی «بایو» تلفظ می‌کنند. حالا بیو اینستا شما دقیقاً کجا قرار گرفته؟ زیر عکس پروفایل‌. شما برای نوشتن بیو اینستاگرام باید به پروفایل خودتان بروید و از قسمت edit profile یا ویرایش پروفایل، بیو پیج خود را تغییر دهید.حالا اصلاً چرا متن بیو ما باید تغییر کند؟ چرا انقدر روی درست بودن متن بیوگرافی اینستاگرام تأکید می‌کنیم؟ در بخش بعدی، کاملاً برایتان توضیح می‌دهیم. چرا باید بیو اینستا جذابی بنویسیم؟ همانطور که گفتیم، متن بیو اینستاگرام در واقع قرار است در همان مراحل اول، نظر مخاطب را جلب کند تا شما را دنبال کند. حالا در این نقطه، آدم‌ها دو دسته می‌شوند. دسته اول، افرادی هستند که پیج پابلیک دارند و می‌خواهند به طور حرفه‌ای در اینستاگرام فعالیت کنند. (که ما به این دسته از افراد توصیه می‌کنیم حتماً مقاله «همه چیز درباره تولید محتوا در اینستاگرام» را بخونند.)دسته دوم هم کسب‌وکارهایی هستند که می‌خواهند با راه‌اندازی پیج اینستاگرام، فروش خود را چند برابر کنند. دلایل اهمیت متن بیو اینستاگرام برای هر دو دسته را در ادامه باهم برر, ...ادامه مطلب

در این قسمت میخوام یک کد ( Lazy loading SVG ) جالب رو در اختیارتون بذارم. دمو توضیحات مربوط به کد Lazy loading SVG همونطور که دیدید یک ایده زیبا برای لود شدن تصاویر قرار داده شده است و میتونین از اون در سایت خودتون استفاده کنید. همونطور که میبینید تا زمانی که تصویر اصلی لود … کدهای جذاب و دیدنی ( Lazy loading SVG ) : ایده جالب برای لود شدن تصاویر با SVG سون لرن • آموزش طراحی وب و جاوا اسکریپت ، HTML ، CSS و PHP , ...ادامه مطلب

در این قسمت میخوام یک کد ( Typographic Clock ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Typographic Clock همونطور که دیدید یک ساعت جالب با استفاده از متن و تایپوگرافی ساخته شده است و میتونین از اون ایده بگیرید و در سایتتون استفاده کنید. برای اینکار از Flexbox و کلاسهای کاذب و ... استفاده شده است. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( movey backgrounds grid ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد movey backgrounds grid همونطور که دیدید تعدادی تصویر با گریدبندی زیبا در کنار یکدیگر قرار گرفتن و زمانی که بر روی اونا هاور میکنید و ماوستون رو حرکت میدید، تصویر پس زمینه اونا به زیبایی حرکت میکنه و حالت زیبایی رو به وجود میاره. برای انجام چنین کاری از CSS و Javascript بصورت همزمان استفاده شده است. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Nature ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Nature همونطور که دیدید متن با عنوان طبیعت با استفاده از مسیر SVG به وجود اومده و با اون افکت زیبایی رو به وجود آوردن. شما میتونین از این نمونه ایده بگیرید و از اون در سایت خودتون استفاده کنید. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Breadcrumbs Navigation ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Breadcrumbs Navigation همونطور که دیدید یک Breadcrumb زیبا که مسیر صفحه یا مقاله فعلی را با استفاده از اون مشخص میکنیم در قالب یک منو یا Navigation پیاده سازی شده است و میتونین از اون ایده بگیرید و استفاده کنید. زمانی که بر روی اون هاور میکنید به زیبایی نمایش داده می شود. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Radar ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Radar همونطور که دیدید یک رادار زیبا با استفاده از CSS خالص شبیه سازی شده است و میتونین از نحوه پیاده سازی اون ایده بگیرید. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. برای ساخت این نمونه از گرادیان، کلاسهای کاذب و CSS Animation استفاده شده است. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( CSS 3D Sphere ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد CSS 3D Sphere همونطور که دیدید یک کره سه بعدی و زیبا با استفاده از CSS خالص ساخته شده است و حالت موجی جالبی رو نشون میده. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. برای انجام این کار از Javascript استفاده نشده است و در CSS برای هر نقطه استایلی در نظر گرفته شده است. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Billiard Battle ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Billiard Battle همونطور که دیدید بازی بیلیارد بصورت بسیار زیبا و حرفه ای ساخته شده و میتونین با کامپیوتر بازی کنید. برای ساخت این بازی از کتابخانه دوبعدی شبیه ساز فیزیکی بنام Matter استفاده شده است که با استفاده از اون برخوردها و بقیه موارد مربوط به حرکت مهره ها شبیه سازی شده است. همچنین برای صداگذاری از Howler استفاده شده است. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Canvas Filters ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Canvas Filters همونطور که دیدید زمانی که ماوستون رو بر روی صفحه حرکت میدید، تعدادی ستاره با افکتی زیبا به اطراف پخش میشن و حالت زیبایی رو به وجود میارن. هدف اصلی این کد تست کردن انواع مختلف فیلترهای Canvas می باشد و میتونین با استفاده از تنظیمات موجود در سمت راست صفحه، فیلترهای Blur و Contrast و ... رو تغییر داده و تاثیر اونا رو در خروجی مشاهده کنید. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Swirly ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Swirly همونطور که دیدید یک افکت پیچشی و گردابی زیبا و حرفه ای برای متن درون Canvas به وجود اومده و میتونین از اون ایده بگیرید و یا در سایتتون استفاده کنید. این افکت درون Canvas و با استفاده از کدهای Javascript به وجود آمده است. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Jumping Balls ) جالب رو در اختیارتون بذارم. توضیحات مربوط به کد Jumping Balls همونطور که دیدید تعدادی حفره وجود داره و در هر حفره یک توپ نورانی قرار گرفته و بصورت تصادفی یکی از اونا به سمت بالا پرتاب می شود. با بالا اومدن هر توپ، یک نور زیبا به اطراف اون پخش میشه و حالت زیبایی رو به وجود میاره و خیلی نزدیک به واقعیت شبیه سازی شده است. برای مشاهده نحوه پیاده سازی این نمونه میتونین وارد بخش View Source بشید. این کد با استفاده از Three.js و TweenMax به وجود اومده است و میتونین از اون ایده بگیرید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source , ...ادامه مطلب

در این قسمت میخوام یک کد ( Rings Navigation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Rings Navigation همونطور که دیدید یک دایره با متن Menu در گوشه بالا و سمت راست صفحه قرار داده شده و با کلیک بر روی اون یک منوی حلقه ای زیبا با تعدادی زیرمنو نمایش داده میشه. شما میتونین از این مورد ایده گرفته و از اون در سایتتون استفاده کنید. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. برای ساخت این نمونه از CSS Animation استفاده شده است و با استفاده از Javascript نیز اون رو مدیریت میکنیم. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source attractive beauty code CSS‏ idea inspire Rings Navigation , ...ادامه مطلب

در این قسمت میخوام یک کد ( Ocean ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Ocean همونطور که دیدید تعدادی سه ضلعی وجود دارد که در کنار یکدیگر یک دلفین رو به وجود آوردند و بعد از اون به زیبایی تبدیل به یک متن Ocean میشن. این سه ضلعی ها با استفاده از SVG به وجود اومدن و با استفاده از ابزار Anime.js اونا رو بصورت انیمیشنی در میاریم. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. برای اینکار بصورت تصادفی یکی از المنتهای SVG رو انتخاب میکنیم و مسیر اون رو تغییر میدیم و در جای مورد نظرمون قرارش میدیم. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source attractive beauty code CSS‏ idea inspire Ocean , ...ادامه مطلب

در این قسمت میخوام یک کد ( Spinning circles animation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Spinning circles animation همونطور که دیدید تعدادی دایره وجود دارند و به زیبایی در حال چرخش هستند و حالت جالبی رو به وجود آوردن. این کار با استفاده از CSS Grid  و CSS Animation به وجود آمده است و میتونین از اون ایده بگیرید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source attractive beauty code CSS‏ idea inspire Spinning circles animation , ...ادامه مطلب