افکت پارالاکس – اسکریپت دات کام

پلاگین افکت 3 بعدی پارالاکس با حرکت ماوس Face Cursor

محمد — Sat, 07 May 2016 20:45:38 +0000

چندی پیش به دلیل استقبال زیاد کاربران , شروع به درج آموزش های Parallax کردم که مورد استقبال شما عزیزان قرار گرفت …

و حالا در این پست قصد انتشار یک پلاگین جی کوئری را دارم که با استفاده از آن میتوانید به باکس ها یا نوشته های خود افکت سه بعدی حرکت با ماوس بدهید .

با استفاده از این پلاگین میتوانید افکتی را ایجاد نمایید که کاربر با حرکت دادن ماوس , شاهد حرکات و چرخش هایی در اشیای مورد نظر شما در وب سایت باشد که حالت بسیار زیبا , جالب و کاربر پسندی را ایجاد مینماید و میتوانید زیبایی دو چندانی به دیزاین وب سایت خود ببخشید .

نحوه ی استفاده از این پلاگین بسیار راحت میباشد .

ابتدا باید دو فایل Jquery مربوطه را از این لینک دانلود نمایید و با استفاده از تگ script به وب سایت خود اضافه نمایید .

حال باید کد جی کوئری زیر را در وب سایت خود وارد نمایید ( ترجیحا در انتهای وب سایت )

$(document).ready(function(e) {
    $(".vms").faceCursor({
	perspective:"6rem"
    });
});

توجه : در کد بالا میتوانید به جای مقدار 6 , عددی کمتر و یا بیشتر وارد نمایید . ( این عدد مشخص کننده مقدار حالت سه بعدی می باشد )

نکته بسیار مهم : در کد بالا فرض بر این قرار داده شده که اشیایی که میخواهید به حرکت در بیایند , دارای کلاس vms میباشند . طبیعتا میتوانید به جای آن , هر انتخابگر دیگری از css را وارد نمایید . مثلا آی دی test که میشود test# و یا …

دموی پلاگین

دانلود فایل آماده دموی پلاگین

پخش اختصاصی

آموزش : وحید مجیدی

افکت پارالاکس جابجایی تگ مورد نظر با تغییر مکان ماوس

محمد — Sun, 13 Mar 2016 15:25:18 +0000

در راستای قولی که در چند پست قبل داده بودم , در این پست از سایت اسکریپت دات کام , یک افکت پارالاکس دیگر را برای شما توسعه دهندگان وب آموزش خواهم داد .

اگر وب سایت awwwards.com که مخصوص وب سایت های جهانی می باشد که از نظر طراحی دارای مقام هستند را نگاهی بیاندازیم , این افکت را به وفور پیدا خواهیم کرد .

افکتی که باعث میشود زمانی که کاربر ماوس را به حرکت در می آورد , یک یا چند نوشته , عکس یا … به صورت مخالف با آن حرکت میکنند که حالت زیبا و کاربر پسندی را ایجاد میکند .

و اما آموزش :

شما میتوانید یک یا چند تگ را با سرعت های مختلف دارای این افکت بکنید …

ابتدا کافیست به تگ یا تگ های مورد نظر خاصیت ID داده و امی برای آن انتخاب کنید :

به عنوان مثال :

Vahid Majidi Sadr

سپس کد زیر ار به فایل css اضافه نموده :

body{
	overflow-x:hidden;
}
.center_vms{
	text-align:center;	
}

حال باید کد جی کوئری زیر را در قالب خود اضافه نمایید :

نکته مهم : کاملا واضح هست که برای استفاده و اجرای کد های جی کوئری , نیازمند کتابخانه Jquery میباشید که میتوانید آخرین نسخه آن را از وب سایت رسمی آن به نشانی www.Jquery.com دانلود نمایید .

$(document).ready(function () {
    $('body').mousemove(function (e) {
        parallax_vms(e, document.getElementById('vms1'), 5);
        parallax_vms(e, document.getElementById('vms2'), 3);
    });
});
function parallax_vms(e, target, layer) {
    var layer_all = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_all;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_all;
    $(target).offset({ top: y ,left : x });
};

نکات مهم :

1 – در خط های 6 و 7 کد های بالا دو تابع parallax_vms تعریف شده است که برای دو تگ در نظرگرفته شده h1 و img با آی دی های vms1 و vms2 میباشد که شما میتوانید با حذف یا اضافه کردن آن ها , تعداد پارالاکس ها رو بیشتر یا کمتر نمایید .

2 – در همان خط 6 و 7 , دو آرگومان آخر که در بالا عدد های 5 و 3 میباشد , به معنی سرعت حرکت میباشند که میتوانید با تغییر آن , سرعت حرکت را کمتر یا بیشتر نمایید .

3 – در خط 5 کد های بالا ( کلمه body ) به معنی تگی هست که کاربر روی آن ماوس را حرکت میدهد و حرکات انجام میشود . طبیعتا body به معنی کل وب سایت میباشد . مثلا اگر میخواهید با حرکت ماوس بر روی یک تگ یا آی دی یا کلاس خاصی , این حرکات اتفاق بیافتد , میتوانید به جای کلمه body , انتخابگر مورد نظر خود را وارد نمایید . مثلا header#

4 – 3 نکته بالا , کلیات این اسکریپت میباشد . کاملا بدیهی است که شما میتوانید با تغییر دیگر خط ها ( به شرط آشنایی با جاوا اسکریپت و جی کوئری ) تغییرات اساسی خود را اعمال نمایید .

دموی آنلاین افکت

آموزش : وحید مجیدی

پخش اختصاصی

افکت پارالاکس حباب برای پس زمینه وب سایت ( html5 , css3 )

محمد — Sat, 05 Mar 2016 13:38:41 +0000

طبق ایمیل های فراوانی که برای معرفی افکت های پارالاکس در وب سایت داشتم , تصمیم گرفتم از این به بعد بیشتر به این نوع افکت های زیبا بپردازم و مطالب بیشتری در این زمینه به صورت آموزشی منتشر کنم .

پارالاکس (Parallax) در لغت به معنای اختلاف منظر است ولی در طراحی وب به معنی تکنیک‌های پیمایش در صفحه برای عمق بخشی به وب سایت است.

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

این افکت میتواند پس زمینه شما را به صورت دایره های چند بعدی تبدیل کرده که با تغییر مکان نمای ماوس , دایره ها به صورت زیبایی جابجا میشوند .

و اما آموزش :

برای این کار کافیست کد های html زیر را در قسمت body وب سایت خود قرار داده :

و سپس کد های زیر را در css وب سایت خود قرار دهید :

body {
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background: #007AFF;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.vms {
  animation: vms 3s linear;
  position: fixed;
}

div[class^='pos-detect'] {
  width: calc(100vw/6);
  height: calc(101vh/6);
  float: left;
}

div[class $='ground-layer'] {
  position: absolute;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  top: 50vh;
  left: 50vw;
  margin-top: -50vh;
  margin-left: -50vw;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.23,1,0.32,1);
} 
div[class ^='bubble-'] {
  position: absolute;
  width: 15vw;
  height: 15vw;
  border-radius: 100%;
  background: #fff;
}

div[class ^='bubble-']:nth-child(even) {
  width: 10vw;
  height: 10vw;
}

.background-layer {
  z-index: 1;
  transition-duration: 30s;
  opacity: 0.1;
}
  .background-layer .bubble-1 {
    margin-top: 16vh;
    margin-left: 6vw;
  }
  .background-layer .bubble-2 {
    margin-top: 8vh;
    margin-left: 35vw;
  }
  .background-layer .bubble-3 {
    margin-top: 31vh;
    margin-left: 73vw;
  }
  .background-layer .bubble-4 {
    margin-top: 57vh;
    margin-left: 20vw;
  }
  .background-layer .bubble-5 {
    margin-top: 69vh;
    margin-left: 62vw;
  }
  .background-layer .bubble-6 {
    margin-top: 9vh;
    margin-left: 78vw;
  }
  .background-layer .bubble-7 {
    margin-top: 23vh;
    margin-left: 44vw;
  }
  .background-layer .bubble-8 {
    margin-top: 55vh;
    margin-left: 47vw;
  }
  .background-layer .bubble-9 {
    margin-top: 75vh;
    margin-left: 8vw;
  }
  .background-layer .bubble-10 {
    margin-top: 89vh;
    margin-left: 78vw;
  }
  .background-layer .bubble-11 {
    margin-top: 89vh;
    margin-left: 30vw;
  }
  .background-layer .bubble-12 {
    margin-top: 63vh;
    margin-left: 91vw;
  }


.middleground-layer {
  z-index: 2;
  transition-duration: 20s;  
  opacity: 0.3;
}
  .middleground-layer .bubble-1 {
    margin-top: -2vh;
    margin-left: 10vw;
  }
  .middleground-layer .bubble-2 {
    margin-top: 27vh;
    margin-left: 24vw;
  }
  .middleground-layer .bubble-3 {
    margin-top: 9vh;
    margin-left: 60vw;
  }
  .middleground-layer .bubble-4 {
    margin-top: 45vh;
    margin-left: 38vw;
  }
  .middleground-layer .bubble-5 {
    margin-top: 54vh;
    margin-left: 78vw;
  }
  .middleground-layer .bubble-6 {
    margin-top: 79vh;
    margin-left: 72vw;
  }
  .middleground-layer .bubble-7 {
    margin-top: 19vh;
    margin-left: 78vw;
  }
  .middleground-layer .bubble-8 {
    margin-top: 45vh;
    margin-left: 68vw;
  }
  .middleground-layer .bubble-9 {
    margin-top: 68vh;
    margin-left: 43vw;
  }
  .middleground-layer .bubble-10 {
    margin-top: 40vh;
    margin-left: 5vw;
  }
  .middleground-layer .bubble-11 {
    margin-top: 65vh;
    margin-left: 14vw;
  }
  .middleground-layer .bubble-12 {
    margin-top: 25vh;
    margin-left: 48vw;
  }


.foreground-layer {
  z-index: 3;
  transition-duration: 13s;
  opacity: 0.5;
}
  .foreground-layer .bubble-1 {
    margin-top: 69vh;
    margin-left: -5vw;
  }
  .foreground-layer .bubble-2 {
    margin-top: 26vh;
    margin-left: 30vw;
  }
  .foreground-layer .bubble-3 {
    margin-top: 14vh;
    margin-left: 77vw;
  }
  .foreground-layer .bubble-4 {
    margin-top: 85vh;
    margin-left: 39vw;
  }
  .foreground-layer .bubble-5 {
    margin-top: 67vh;
    margin-left: 73vw;
  }
  .foreground-layer .bubble-6 {
    margin-top: 4vh;
    margin-left: 94vw;
  }
  .foreground-layer .bubble-7 {
    margin-top: 5vh;
    margin-left: 48vw;
  }
  .foreground-layer .bubble-8 {
    margin-top: 35vh;
    margin-left: 58vw;
  }
  .foreground-layer .bubble-9 {
    margin-top: 25vh;
    margin-left: 8vw;
  }
  .foreground-layer .bubble-10 {
    margin-top: 54vh;
    margin-left: 24vw;
  }
  .foreground-layer .bubble-11 {
    margin-top: 41vh;
    margin-left: 93vw;
  }
  .foreground-layer .bubble-12 {
    margin-top: 55vh;
    margin-left: 52vw;
  }


.pos-detect-top-1:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12 * 11);
}
.pos-detect-top-2:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12 * 9);
}
.pos-detect-top-3:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12 * 7);
}
.pos-detect-top-4:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12 * 5);
}
.pos-detect-top-5:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12 * 3);
}
.pos-detect-top-6:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 11);
  left: calc(100vw / 12);
}
.pos-detect-top-7:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12 * 11);
}
.pos-detect-top-8:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12 * 9);
}
.pos-detect-top-9:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12 * 7);
}
.pos-detect-top-10:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12 * 5);
}
.pos-detect-top-11:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12 * 3);
}
.pos-detect-top-12:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 9);
  left: calc(100vw / 12);
}
.pos-detect-center-1:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12 * 11);
}
.pos-detect-center-2:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12 * 9);
}
.pos-detect-center-3:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12 * 7);
}
.pos-detect-center-4:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12 * 5);
}
.pos-detect-center-5:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12 * 3);
}
.pos-detect-center-6:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 7);
  left: calc(100vw / 12);
}
.pos-detect-center-7:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12 * 11);
}
.pos-detect-center-8:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12 * 9);
}
.pos-detect-center-9:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12 * 7);
}
.pos-detect-center-10:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12 * 5);
}
.pos-detect-center-11:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12 * 3);
}
.pos-detect-center-12:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 5);
  left: calc(100vw / 12);
}
.pos-detect-bottom-1:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12 * 11);
}
.pos-detect-bottom-2:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12 * 9);
}
.pos-detect-bottom-3:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12 * 7);
}
.pos-detect-bottom-4:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12 * 5);
}
.pos-detect-bottom-5:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12 * 3);
}
.pos-detect-bottom-6:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12 * 3);
  left: calc(100vw / 12);
}
.pos-detect-bottom-7:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12 * 11);
}
.pos-detect-bottom-8:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12 * 9);
}
.pos-detect-bottom-9:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12 * 7);
}
.pos-detect-bottom-10:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12 * 5);
}
.pos-detect-bottom-11:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12 * 3);
}
.pos-detect-bottom-12:hover ~ div[class $='ground-layer'] {
  top: calc(100vh / 12);
  left: calc(100vw / 12);
}
@-webkit-keyframes vms {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes vms {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vms {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

دموی افکت

دانلود فایل آماده افکت پارالاکس حباب برای پس زمینه وب سایت ( html5 , css3 )

پخش اختصاصی

آموزش : وحید مجیدی