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

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

//jQuery is required to run this code$( document ).ready(function() {    scaleAnimationContainer();    initBannerAnimationSize('.animation-container .animation img');    initBannerAnimationSize('.animation-container .mask');    initBannerAnimationSize('.animation-container video');    $(window).on('resize', function() {        scaleAnimationContainer();        scaleBannerAnimationSize('.animation-,انیمیشنی ...ادامه مطلب

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

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

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

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

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

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

html {   background: #fefefe; } body {   color: #4b507a;   font: 300 24px/1.5 Lato, sans-serif;   margin: 1em auto;   max-width: 36em;   padding: 1em 1em 2em;   text-align: center;   isolation: isolate; } button {   background: none;   border: 0;   box-sizing: border-box;   box-shadow: inset 0 0 0 2px #f45e61;   color: #f45e61;   font-size: inherit;   font-weight: 700;   margin: 1em;   padding: 1em 2em;   text-align: center;   text-transform: capitalize;   position: relative;   vertical-align: middle; } button::before, button::after {   box-sizing: border-box;   content: '';   position: absolute;   width: 100%;   height: 100%; } /* Spin & Thick */ .spin {   width: 5em;   height: 5em;   padding: 0; } .spin:hover {   color: #0eb7da; } .spin::before, .spin::after {   top: 0;   left: 0; } .spin::before {   border: 2px solid transparent; } .spin:hover::before {   border-top-color: #0eb7da;   border-right-color: #0e, ...ادامه مطلب

html {   background: #fefefe; } body {   color: #4b507a;   font: 300 24px/1.5 Lato, sans-serif;   margin: 1em auto;   max-width: 36em;   padding: 1em 1em 2em;   text-align: center;   isolation: isolate; } button {   background: none;   border: 0;   box-sizing: border-box;   box-shadow: inset 0 0 0 2px #f45e61;   color: #f45e61;   font-size: inherit;   font-weight: 700;   margin: 1em;   padding: 1em 2em;   text-align: center;   text-transform: capitalize;   position: relative;   vertical-align: middle; } button::before, button::after {   box-sizing: border-box;   content: '';   position: absolute;   width: 100%;   height: 100%; } /* Center */ .center:hover {   color: #6477b9; } .center::before, .center::after {   top: 0;   left: 0;   height: 100%;   width: 100%;   -webkit-transform-origin: center;           transform-origin: center; } .center::before {   border-top: 2px solid #6477b9;   border-bottom: 2px s, ...ادامه مطلب

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

html {   background: #fefefe; } body {   color: #4b507a;   font: 300 24px/1.5 Lato, sans-serif;   margin: 1em auto;   max-width: 36em;   padding: 1em 1em 2em;   text-align: center;   isolation: isolate; } button {   background: none;   border: 0;   box-sizing: border-box;   box-shadow: inset 0 0 0 2px #f45e61;   color: #f45e61;   font-size: inherit;   font-weight: 700;   margin: 1em;   padding: 1em 2em;   text-align: center;   text-transform: capitalize;   position: relative;   vertical-align: middle; } button::before, button::after {   box-sizing: border-box;   content: '';   position: absolute;   width: 100%;   height: 100%; } /* Draw and Meet */ .draw {   -webkit-transition: color 0.25s;   transition: color 0.25s; } .draw::before, .draw::after {   border: 2px solid transparent;   width: 0;   height: 0; } .draw::before {   top: 0;   left: 0; } .draw::after {   bottom: 0;   right: 0; } .draw:hover {   color: #6, ...ادامه مطلب

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

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

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