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

در این قسمت میخوام یک کد ( Audio Visualizer2 ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک دایره با استفاده از Three.js ساخته شده و قرار گرفته. با استفاده از دکمه choose a mp3 file در بالا و سمت چپ صفحه میتونین یک صدا یا موسیقی رو انتخاب کنید و زمانی که صدا پخش میشه، این دایره به زیبایی عکس العمل نشون میده و حالت جالبی رو به وجود میاره. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطل,کدهای,دیدنی,موسیقی ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون موسیقی های مختلف و جالبی رو قرار داده که میتونین در حین برنامه نویسی یا انجام کارهای دیگه به اونا گوش بدید و با اینکار تمرکزتون رو بر روی کار بیشتر کنید. برای شروع وارد سایت musicForProgramming بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی , ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که با استفاده از WebGL ساخته شده و بسیار زیبا و حرفه ای هست. در ابتدا در سمت چپ یک جعبه قرار داره که تعدادی دیسک موزیک درون اونا قرار داده شده. با کلیک بر روی هر کدوم، اون مورد از جعبه بیرون میاد و با کلیک بر روی Listen میتونین به اون گوش بدید و در سمت راست اون رو مدیریت کنید. برای شروع وارد سایت dihh بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! بخوانید, ...ادامه مطلب

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

*, *:before, *:after {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } section {   font-family: 'Open Sans', sans-serif;   height: 350px;   position: relative;   background-clip: fixed;   background-repeat: no-repeat;   background-size: cover;   background-position: center center;   overflow: hidden;   width: 94%;   margin: 0 auto 30px; } section a {   text-transform: uppercase;   font-weight: 800;   text-align: center;   text-decoration: none;   color: #fff;   display: block;   font-size: 4.875em; } section.p9 {   background-image: url(10.jpg); } section.p9 a {   width: 211px;   height: 55px;   line-height: 55px;   position: absolute;   top: 50%;   left: 50%;   margin-left: -105.5px;   margin-top: -27.5px;   -webkit-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);   -moz-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);   -ms-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);   -o-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);   transition: all 0.5s cubic-bezier(0, 0.28, 0, 1); } section.p9 a:before, section.p9 a:after, section.p9 a div {   content: '';   height: 9px;   background-color: #fff;   position: absolute;   right: 80%;   width: 0; } section.p9 a:before {   top: 0; } section.p9 a > div:first-of-type {   top: 15px; } section.p9 a > div:last-of-type {   top: 31px; } section.p9 a:after {   top: 46px; } section.p9 a:hover {   padding-left: 40px; } section.p9 a:hover:before {   -webkit-animation: bar1 0.8s infinite;   -moz-animation: bar1 0.8s infinite;   -ms-animation: bar1 0.8s infinite;   animation: bar1 0.8s infinite; } @-moz-keyframes bar1 {   0% {     width: 10px;   }   5% {     width: 5px;   }   16% {     width: 25px;   }   32% {     width: 18px;   }   50% {     width: 28px;   }   66% {     width: 50px;   }   73% {     width: 45px;   }   100% {     width: 10px;   } } @-webkit-keyframes bar1 {   0% {     width: 10px;   }   5% {     width: 5px;   }   16% {     width: 25px;   }   32% {     width: 18px;  , ...ادامه مطلب