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

متن مرتبط با «کدهای» در سایت سون لرن • آموزش نوشته شده است

کدهای جذاب و دیدنی ( Lazy loading SVG ) : ایده جالب برای لود شدن تصاویر با SVG

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

  • کدهای جذاب و دیدنی ( Typographic Clock ) : ساخت ساعت جالب با استفاده از تایپوگرافی

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

  • کدهای جذاب و دیدنی ( movey backgrounds grid ) : افکت زیبا برای هاور تصاویر

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

  • کدهای جذاب و دیدنی ( Nature ) : ساخت متن و افکت زیبا با SVG

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

  • کدهای جذاب و دیدنی ( Breadcrumbs Navigation ) : ساخت Breadcrumb زیبا بصورت منو

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

  • کدهای جذاب و دیدنی ( Radar ) : ساخت رادار با CSS خالص

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

  • کدهای جذاب و دیدنی ( CSS 3D Sphere ) : ساخت کره سه بعدی و زیبا با CSS

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

  • کدهای جذاب و دیدنی ( Billiard Battle ) : ساخت بازی بیلیارد بصورت حرفه ای و طبیعی

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

  • کدهای جذاب و دیدنی ( Canvas Filters ) : ساخت ستاره های زیبا با حرکت ماوس

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

  • کدهای جذاب و دیدنی ( Swirly ) : افکت گردابی و پیچشی زیبا برای متن

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

  • کدهای جذاب و دیدنی ( Jumping Balls ) : شبیه سازی حرکت توپ نورانی در محیط تاریک

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

  • کدهای جذاب و دیدنی ( Rings Navigation ) : ساخت منوی حلقه ای زیبا با CSS

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

  • کدهای جذاب و دیدنی ( Ocean ) : ساخت انیمیشن زیبا با SVG و Anime

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

  • کدهای جذاب و دیدنی ( Spinning circles animation ) : انیمیشن زیبای دایره های چرخان

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

  • کدهای جذاب و دیدنی ( Animated Login Sign up ) : ایده زیبا برای فرم ورود و ثبت نام

  • در این قسمت میخوام یک کد ( Animated Login Sign up ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Animated Login Sign up همونطور که دیدید یک ایده زیبا و حرفه ای برای فرم ورود و ثبت نام قرار داده شده است. زمانی که بر روی دکمه های Log in یا Sign up کلیک میکنید، فرم مربوطه به زیبایی به سمت اون حرکت میکنه و محتوای اون نیز تغییر داده میشه. شما میتونین از این نمونه ایده بگیرید. برای مشاهده کدهای این نمونه میتونین View Source رو مشاهده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source Animated Login Sign up attractive beauty code CSS‏ idea inspire , ...ادامه مطلب

  • جدیدترین مطالب منتشر شده

    گزیده مطالب

    تبلیغات

    برچسب ها