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

در این قسمت میخوام یک کد (xa0animating svg polygons ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد animating svg polygons در بالا و سمت چپ صفحه 4 لینک وجود داره که با کلیک بر روی اونا، تصاویر انیمیشنی در سمت راست نمای...

//jQuery is required to run this code$( document ).ready(function() {xa0xa0xa0xa0scaleAnimationContainer();xa0xa0xa0xa0initBannerAnimationSize('.animation-container .animation img');xa0xa0xa0xa0initBannerAnimationSize('.animation-container .mask');xa0xa0xa0xa0initBannerAnimationSize('.animation-container video');xa0xa0xa0xa0$(window).on('resize', function() {xa0xa0xa0xa0xa0xa0xa0xa0scaleAnimationContainer();xa0xa0xa0xa0xa0xa0xa0xa0scaleBannerAnimationSize('.animation-...

در این قسمت میخوام یک کد ( tabs and listsxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید سه تب در بالا قرار داره و با کلیک بر روی هر کدام، موارد مربوط به اون نمایش داده میشن. با کلیک بر روی هر نفر، اطلاعات مربوط به اون شخص با استایلی زیبا نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در ا...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که با استفاده از اون میتونین شکل های زیبایی که با استفاده از کدهای اَسکی یا Ascii ساخته اید رو با حالتی انیمیشنی زیبا به یکدیگر تغییر بدین و لذت ببرید. برای شروع وارد سایتxa0ascii-morphxa0بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی ...

در این قسمت میخوام یک کد ( Heart Animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک قلب قرار گرفته و زمانی که بر روی اون کلیک میکنید، یک افکت انیمیشنی زیبا نمایش داده میشه. میتونین از این ایده برای لایک کردن استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم...

در این قسمت میخوام یک کد ( Colorful text animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک متن قرار داده شده و رنگ متن بصورت انیمیشنی و زیبا تغییر میکنه و میتونین از اون ایده بگیرید و یا در سایتتون از اون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم ک...

در این قسمت میخوام یک کد ( Animated Camera Iconxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک آیکون دوربین بصورت انیمیشنی ساخته شده و عکس بصورت زیبا از اون خارج میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( BoldMedia Logo Variationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک لوگوی قرار داده شده و زمانی که بر روی اون هاور میشه به زیبایی جمع میشن و پشت هم قرار میگیرن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

html { xa0xa0background: #fefefe; } body { xa0xa0color: #4b507a; xa0xa0font: 300 24px/1.5 Lato, sans-serif; xa0xa0margin: 1em auto; xa0xa0max-width: 36em; xa0xa0padding: 1em 1em 2em; xa0xa0text-align: center; xa0xa0isolation: isolate; } button { xa0xa0background: none; xa0xa0border: 0; xa0xa0box-sizing: border-box; xa0xa0box-shadow: inset 0 0 0 2px #f45e61; xa0xa0color: #f45e61; xa0xa0font-size: inherit; xa0xa0font-weight: 700; xa0xa0margin: 1em; xa0xa0padding: 1em 2em; xa0xa0text-align: cente...

html { xa0xa0background: #fefefe; } body { xa0xa0color: #4b507a; xa0xa0font: 300 24px/1.5 Lato, sans-serif; xa0xa0margin: 1em auto; xa0xa0max-width: 36em; xa0xa0padding: 1em 1em 2em; xa0xa0text-align: center; xa0xa0isolation: isolate; } button { xa0xa0background: none; xa0xa0border: 0; xa0xa0box-sizing: border-box; xa0xa0box-shadow: inset 0 0 0 2px #f45e61; xa0xa0color: #f45e61; xa0xa0font-size: inherit; xa0xa0font-weight: 700; xa0xa0margin: 1em; xa0xa0padding: 1em 2em; xa0xa0text-align: cente...

در این قسمت میخوام یک کد ( SLOFISH CSS Logo Animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید انیمیشنی با استفاده از CSS ساخته شده که در اون ماهی ها بصورت زیبا در اون جرکت میکنن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

html { xa0xa0background: #fefefe; } body { xa0xa0color: #4b507a; xa0xa0font: 300 24px/1.5 Lato, sans-serif; xa0xa0margin: 1em auto; xa0xa0max-width: 36em; xa0xa0padding: 1em 1em 2em; xa0xa0text-align: center; xa0xa0isolation: isolate; } button { xa0xa0background: none; xa0xa0border: 0; xa0xa0box-sizing: border-box; xa0xa0box-shadow: inset 0 0 0 2px #f45e61; xa0xa0color: #f45e61; xa0xa0font-size: inherit; xa0xa0font-weight: 700; xa0xa0margin: 1em; xa0xa0padding: 1em 2em; xa0xa0text-align: cente...

در این قسمت میخوام یک کد ( Woven Star Animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک انیمیشن بسیار زیبا و دیدنی قرار داده شده و میتونین از اون استفاده کرده و ایده بگیرید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Rain-Bros dont like JSxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید چهار شئ که هر کدوم رنگ متفاوتی دارن به صورت متناوب به زمین میخورن و مسیری که طی میکنن در پشت سر اونا نمایش داده میشه. این کار تماما با استفاده از CSS انجام شده. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Motion preloader 2015xa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک انیمیشن زیبا ساخته شده و حالت جالبی رو به وجود آورده. شما میتونین از این مورد ایده گرفته و از اون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Mr JeellyFish pure CSS animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک ماهی شبیه سازی شده و انیمیشنی زیبا برای اون قرار گرفته و شما میتونین از اون ایده بگیرید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Cubesxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی مکعب بهم چسبیدن و بصورت انیمیشنی زیبا حرکاتی رو از خودشون نشون میدن و از هم جدا میشن و دوباره به هم میچسبن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Stats animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید نمودارهای انیمیشنی زیبایی قرار داده شده و میتونین از اونا ایده بگیرید و در سایتتون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Delivery Card Animationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید که یک سری کارت در اون قرار داده شده و با کلیک بر روی هر کدام با انیمیشن بسیار زیبایی جزئیات اون نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

<div id="container"> <button class="icobutton icobutton--unico"> <svg viewBox="0 0 448.546 448.546" width="86px" height="86px"> <path d="M385.7,172.2c-9.7-7.9-19.2-12.4-27.3-14.9c-9.9-3.1-17.5-3.2-20.6-3.2c-16.2,0-32.3,5.5-45.5,15.6c-6,4.6-12.6,8.3-19.5,11c-0.4-56.9-23-110.5-59.3-139.5c-2.3-4.1-5.1-7.9-8.5-11.3l-6-6.1l-4.6,5.2c-14.9-7.2-30.6-9.5-45.7-6.9c-11,2-20.2,9.2-24.6,19.5c-3.1,7.2-3.5,15.2-1.4,22.5c-1.7,0.8-3.3,1.6-4.8,2.6L9.3,1.5l80.4,107.4l-22.6,49.4c-5,10.9-4,23.3,...