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

{ const config = { in: { base: { duration: 1, delay: 100, easing: 'linear', opacity: 1, translateY: { value: [-40,0], duration: 800, easing: 'easeOutElastic' } }, path: { duration: 600, easing: 'easeInOutSine', strokeDashoffset: [anime.setDashoffset, 0], fill: { value: '#141514', duration: 400, delay: 500, easing: 'linear' } }, ,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 1, delay: 100, easing: 'linear', opacity: 1 }, path: { duration: 1000, easing: 'easeOutExpo', delay: function(t,i) { retu i*150; }, scale: [0,1], translateY: function(t,i,c) { retu i === c-1 ? ['50%','0%'] : 0; }, rotate: function(t,i,c) { retu i === c-1 ? [90,0] : 0; } }, content: { ,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 1, delay: 50, easing: 'linear', opacity: 1 }, path: { duration: 800, delay: 100, easing: 'easeOutElastic', delay: function(t,i) { retu i*20; }, scale: [0,1], }, content: { duration: 300, delay: 250, easing: 'easeOutExpo', scale: [0.7,1], opacity: { value: 1, easing: 'linear', durat,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 500, easing: 'easeOutQuint', translateY: [100,0], opacity: { value: 1, duration: 50, easing: 'linear' } }, shape: { duration: 350, easing: 'easeOutBack', scaleY:  { value: [1.3,1], duration: 1300, easing: 'easeOutElastic', elasticity: 500 }, scaleX: { value: [0.3,1], duration: 1300, ,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 1, easing: 'linear', opacity: 1 }, path: { duration: 800, easing: 'easeOutQuint', rotate: [0,90], opacity: { value: 1, duration: 200, easing: 'linear' } }, content: { duration: 600, easing: 'easeOutQuint', translateX: [50,0], opacity: { value: 1, duration: 100, easing: 'linear' } ,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 100, easing: 'linear', opacity: 1 }, deco: { duration: 500, easing: 'easeOutExpo', scaleY: [0,1] }, content: { duration: 125, easing: 'easeOutExpo', delay: function(t,i) { retu i*15; }, easing: 'linear', translateY: ['50%','0%'], opacity: [0,1] }, trigger: { translateX: [ {value: '30%', du,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 400, easing: 'easeOutQuint', scaleX: [1.2,1], opacity: { value: 1, easing: 'linear', duration: 50 } }, path: { duration: 600, easing: 'easeOutQuint', d: 'M 92.4,79 C 136,79 156,79.1 200,79.4 244,79.7 262,79 308,79 354,79 381,111 381,150 381,189 346,220 308,221 270,222 236,221 200,221 164,221 130,222 92.4,221 54.4,انیمیشن ...ادامه مطلب

{ const config = { in: { base: { duration: 800, easing: 'easeOutElastic', translateY: [60,0], scale: [0.5,1], opacity: { value: 1, easing: 'linear', duration: 100 } }, path: { duration: 1200, delay: 50, easing: 'easeOutElastic', elasticity: 700, d: 'M 22,74.2 22,202 C 22,202 82,202 103,202 124,202 184,202 184,202 L 200,219 216,202 C 216,202 274,2,انیمیشن,نمایش,تولتیپ,نمونه ...ادامه مطلب

{ const config = { in: { base: { duration: 400, easing: 'easeOutExpo', scale: [0.5,1], opacity: { value: 1, easing: 'linear', duration: 100 } }, path: { duration: 900, easing: 'easeOutElastic', d: 'M 33.5,31 C 33.5,31 145,31 200,31 256,31 367,31 367,31 367,31 367,110 367,150 367,190 367,269 367,269 367,269 256,269 200,269 145,269 33.5,269 33.5,269 33.5,26,انیمیشن,نمایش,تولتیپ,نمونه ...ادامه مطلب

{ const config = { in: { base: { duration: 600, easing: 'easeOutQuint', scale: [0,1], rotate: [-180,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 300, delay: 250, easing: 'easeOutQuint', translateY: [20,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, trigger: { duration: 300,انیمیشن,نمایش,تولتیپ,نمونه ...ادامه مطلب

{ const config = { in: { base: { duration: 200, easing: 'easeOutQuad', rotate: [35,0], opacity: { value: 1, easing: 'linear', duration: 100 } }, content: { duration: 1000, delay: 50, easing: 'easeOutElastic', translateX: [50,0], rotate: [10, 0], opacity: { value: 1, easing: 'linear', duration: 100 } }, trigger: { translateX:,انیمیشن,نمایش,تولتیپ,نمونه ...ادامه مطلب

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