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

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

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

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

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

در این مطلب میخوام سایتی رو بهتون معرفی کنم که طراحی بسیار زیبا و حرفه ای داره و میتونین با درگ کردن اون رو به زیبایی جابجا کنید و افکتهای جالبی رو مشاهده کنید.xa0برای شروع وارد سایتxa0Anagramxa0بشین. توضیحات مربوط به کتابخانه Anagram این سایت طراحی بسیار زیبا و حرفه ای داره و میتونین با استفاده از درگ کردن قسمت های مختلف سایت رو مشاهده کنید. با درگ کردن سایت، قسمت هایی کشیده شده و جاهای دیگه جمع میشن و افکت بسیار زیبایی نمایش داده میشه. با هاور کردن بر روی قسمت های ...

افکت زیبا برای دکمه - Distorted Button Effects (نمونه 5) • سون لرن آيا مي دانيد ميانگين رضايت دانشجويان سون لرن از دوره ها، بيش از ٩٣% مي باشد! ...

افکت زیبا برای دکمه - Distorted Button Effects (نمونه 4) • سون لرن آيا مي دانيد ميانگين رضايت دانشجويان سون لرن از دوره ها، بيش از ٩٣% مي باشد! ...

در این قسمت میخوام یک کد (xa0Layered Button ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Layered Button همونطور که دیدید یک دکمه قرار داده شده است و زمانی که بر روی اون هاور میکنید به زیبایی بصورت چندلایه در میاد. م...

در این مطلب نمونه 3 از افکت زیبا برای ž...

در این قسمت میخوام یکxa0کدxa0( Button effectsxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط به افکت های دکمه یا Button effects همونطور که دیدید سه دکمه قرار داده شده و زمانی که بر روی اونا هاور میکنید، افکت زیبایی برای اونا اجرا میشه و Border های اونا به زیبایی تغییر حالت و مکان میدن. برای ساخت این نمونه از افکت ها، در کلاسهای کاذب after و before مربوط به دکمه ها borderxa0در نظر گرفته شده و زمانی که بر رو...

در این قسمت میخوام یکxa0کدxa0( Liquid Buttonxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط Liquid Button همونطور که دیدید یک دکمه آبکی و ژله مانند قرار داده شده و زمانی که بر روی اون هاور میکنیم، افکت زیبایی براش اجرا میشه. این دکمه با استفاده از Javascript و Canvas به وجود اومده و میتونین کدهای اون رو مشاهده کنید. یک سایدبار در سمت راست قرار گرفته که میتونین با استفاده از اون متغیرهای Javascript رو بصو...

در این قسمت میخوام یک کد ( shimmering neon textxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط به کد همونطور که دیدید یک متن قرار گرفته و افکت زیبا نور نئون بصورت موجی برای اون اعمال شده است. شما میتونین این متن رو انتخاب کرده و پاک کنید و متن دیگری رو جایگزین اون کنید. برای ساخت این حالت برای متن از filter و گرادیان و انیمیشنها (برای حالت موجی) استفاده شده است که خودتون میتونین کدهای مربوط به اون رو...

در این قسمت میخوام یک کد ( Crackedxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید با استفاده از Canvas و کدهای Javascript یک عکس تمام صفحه قرار گرفته و زمانی که هر جای اون کلیک کنید، یک افکت ترک برداشتن یا شکسته شدن زیبا نمایش داده میشه و عکس زیر اون بصورت کلی نمایش داده میشه. میتونین از این مورد ایده بگیرید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانل...

در این قسمت میخوام یک کد ( Fly to cart effectxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی دوچرخه برای فروش قرار داده شده و زمانی که بر روی دکمه ADD TO CART کلیک میکنید با افکت زیبایی پرواز میکنه و به سمت آیکون سبدخرید واقع در بالا و سمت راست حرکت میکنه و بهش اضافه میشه. میتونین از این کد ایده بگیرید و از اون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار م...

;(function(window) { 'use strict'; /** * StackFx: The parent class. */ function StackFx(el) { this.DOM = {}; this.DOM.el = el; this.DOM.stack = this.DOM.el.querySelector('.stack'); this.DOM.stackItems = [].slice.call(this.DOM.stack.children); this.totalItems = this.DOM.stackItems.length; this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img'); this.DOM.caption = this.DOM.e...

;(function(window) { 'use strict'; /** * StackFx: The parent class. */ function StackFx(el) { this.DOM = {}; this.DOM.el = el; this.DOM.stack = this.DOM.el.querySelector('.stack'); this.DOM.stackItems = [].slice.call(this.DOM.stack.children); this.totalItems = this.DOM.stackItems.length; this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img'); this.DOM.caption = this.DOM.e...

;(function(window) { 'use strict'; /** * StackFx: The parent class. */ function StackFx(el) { this.DOM = {}; this.DOM.el = el; this.DOM.stack = this.DOM.el.querySelector('.stack'); this.DOM.stackItems = [].slice.call(this.DOM.stack.children); this.totalItems = this.DOM.stackItems.length; this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img'); this.DOM.caption = this.DOM.e...

در این قسمت میخوام یک کد ( Box Shadows Effectsxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید تعدادی سایه زیبا با استایلهای متفاوت برای المنتها قرار داده شده. میتونین از اونا ایده گرفته و یا ازشون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان ...

;(function(window) { 'use strict'; /** * StackFx: The parent class. */ function StackFx(el) { this.DOM = {}; this.DOM.el = el; this.DOM.stack = this.DOM.el.querySelector('.stack'); this.DOM.stackItems = [].slice.call(this.DOM.stack.children); this.totalItems = this.DOM.stackItems.length; this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img'); this.DOM.caption = this.DOM.e...

خودتون میدونید که من خیلی ابزار نمیسازم اما این یکی رو به خاطر دوستان گلم و خانوادم . مسئولان مدرسم . بغال سر کوچه دوست خوبم احسان. سبزی فروش دم رودخونه و گوشی خوبم و لب تاپم و هزاران جوایز نقدی دیگر! خب کجا بودیم!؟ همین دیگه برید حالش رو ببرید ... با تشکر. به امید روز های بهتر. یک اسلایدر حرفه ای با 3 افکت مختلف رو براتون آماده کردم. شما باید 5 تصویر در اسلایدر قرار دهید. با قابلیت تغییر سایز ...