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

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

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

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

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

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

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

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

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

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

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

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

در این قسمت میخوام یک کد (xa0Rings Navigation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Rings Navigation همونطور که دیدید یک دایره با متن Menu در گوشه بالا و سمت راست صفحه قرار داده شده و با کلیک بر روی اون یک منوی حلقه ای زیبا با تعدادی زیرمنو نمایش داده میشه. شما میتونین از این مورد ایده گرفته و از اون در سایتتون استفاده کنید. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. برای ساخت این نمونه از CSS Animation استفاده شده است و با...

در این قسمت میخوام یک کد (xa0Ocean ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Ocean همونطور که دیدید تعدادی سه ضلعی وجود دارد که در کنار یکدیگر یک دلفین رو به وجود آوردند و بعد از اون به زیبایی تبدیل به یک متن Ocean میشن. این سه ضلعی ها با استفاده از SVG به وجود اومدن و با استفاده از ابزار Anime.js اونا رو بصورت انیمیشنی در میاریم. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. برای اینکار بصورت تصادفی یکی از المنتهای SVG رو انتخاب میکنیم و ...

در این قسمت میخوام یک کد (xa0Spinning circles animation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Spinning circles animation همونطور که دیدید تعدادی دایره وجود دارند و به زیبایی در حال چرخش هستند و حالت جالبی رو به وجود آوردن. این کار با استفاده از CSS Gridxa0 و CSS Animation به وجود آمده است و میتونین از اون ایده بگیرید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که م...

در این قسمت میخوام یک کد ( Animated Login Sign upxa0) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Animated Login Sign up همونطور که دیدید یک ایده زیبا و حرفه ای برای فرم ورود و ثبت نام قرار داده شده است. زمانی که بر روی دکمه های Log in یا Sign up کلیک میکنید، فرم مربوطه به زیبایی به سمت اون حرکت میکنه و محتوای اون نیز تغییر داده میشه. شما میتونین از این نمونه ایده بگیرید. برای مشاهده کدهای این نمونه میتونین View Source رو مشاهده کنید. بدلیل اینکه حجم کدها زیاد...

در این قسمت میخوام یک کد (xa0Buttons Depth Effect ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Buttons Depth Effect همونطور که دیدید دو دکمه بصورت سوئیچی و زیبا قرار داده شده اند و با کلیک بر روی هر کدام یک افکت عمقی زیبا نمایش داده میشه و دکمه مورد نظر انتخاب میشه. شما میتونین از این مورد ایده بگیرید و از اون در سایتتون استفاده کنید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. برای ساخت این کد از CSS Animation و انتقال سه بعدی استفاده شده ...

در این قسمت میخوام یک کد (xa0Cube page navigation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Cube page navigation همونطور که دیدید بخش های مختلف یک وبسایت بصورت سه بعدی در وجه های یک مکعب قرار داده شده است و با استفاده از گزینه های بالای صفحه میتونین بصورت سه بعدی بین صفحات جابجا بشید. برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید. همونطور که میبینید یک مکعب با استفاده از CSS ساخته شده و محتوای مورد نظر مربوط به 4 بخش در 4 وجه اون قرار گرفته...

در این قسمت میخوام یک کد (xa0Mutant Cursor ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Mutant Cursor همونطور که دیدید حالت های مختلف و زیبایی برای نشانه گر ماوس در نظر گرفته شده است. زمانی که بر روی Action cursor هاور میکنید، ماوس به زیبایی به کاربر میفهمونه که باید کاری رو انجام بده و بر روی این لینک یا دکمه کلیک کند. زمانی که بر روی Close cursor هاور میکنید، ماوس بصورت یک X در میاد و به کاربر میفهمونه که با کلیک بر روی این دکمه یا لینک باعث بسته شدن چیزی خ...

در این قسمت میخوام یک کد (xa0Blend Mode Slider ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Blend Mode Slider همونطور که دیدید یک اسلایدر زیبا و حرفه ای ساخته شده و با استفاده از ویژگی های CSS Blend Mode افکت های زیبایی برای اون قرار داده شده که میتونین از اون ایده بگیرید و در سایتتون از اون استفاده کنید. برای مشاهده کدهای این اسلایدر میتونین وارد بخش View Source بشید. زمانی که بین اسلایدها جابجا میشید یک افکت زیبا نمایش داده میشه. بدلیل اینکه حجم کدها زیاد ب...

در این قسمت میخوام یک کد (xa0Love Magnetic ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Love Magnetic همونطور که دیدید یک آهنربا و گیره آهنی قرار داده شده و زمانی که بر روی قلب کلیک میکنید، آهنربا گیره رو به سمت خودش میکشه و جذب میکنه. این حالت با استفاده از Javascript و ابزارxa0TweenMax ساخته شده است و میتونین از اون ایده بگیرید. برای مشاهده کدهای مربوط به این نمونه وارد بخش View Source بشید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار می...