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

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

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

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

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

و اما آموزش :

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

<div class="vms">
	<div class="pos-detect-top-1"></div>
	<div class="pos-detect-top-2"></div>
	<div class="pos-detect-top-3"></div>
	<div class="pos-detect-top-4"></div>
	<div class="pos-detect-top-5"></div>
	<div class="pos-detect-top-6"></div>
	<div class="pos-detect-top-7"></div>
	<div class="pos-detect-top-8"></div>
	<div class="pos-detect-top-9"></div>
	<div class="pos-detect-top-10"></div>
	<div class="pos-detect-top-11"></div>
	<div class="pos-detect-top-12"></div>
	
	<div class="pos-detect-center-1"></div>
	<div class="pos-detect-center-2"></div>
	<div class="pos-detect-center-3"></div>
	<div class="pos-detect-center-4"></div>
	<div class="pos-detect-center-5"></div>
	<div class="pos-detect-center-6"></div>
	<div class="pos-detect-center-7"></div>
	<div class="pos-detect-center-8"></div>
	<div class="pos-detect-center-9"></div>
	<div class="pos-detect-center-10"></div>
	<div class="pos-detect-center-11"></div>
	<div class="pos-detect-center-12"></div>
	
	<div class="pos-detect-bottom-1"></div>
	<div class="pos-detect-bottom-2"></div>
	<div class="pos-detect-bottom-3"></div>
	<div class="pos-detect-bottom-4"></div>
	<div class="pos-detect-bottom-5"></div>
	<div class="pos-detect-bottom-6"></div>
	<div class="pos-detect-bottom-7"></div>
	<div class="pos-detect-bottom-8"></div>
	<div class="pos-detect-bottom-9"></div>
	<div class="pos-detect-bottom-10"></div>
	<div class="pos-detect-bottom-11"></div>
	<div class="pos-detect-bottom-12"></div>
    
	<div class="background-layer">
    	<div class="bubble-1"></div>
    	<div class="bubble-2"></div>
    	<div class="bubble-3"></div>
    	<div class="bubble-4"></div>
    	<div class="bubble-5"></div>
    	<div class="bubble-6"></div>
    	<div class="bubble-7"></div>
    	<div class="bubble-8"></div>
    	<div class="bubble-9"></div>
    	<div class="bubble-10"></div>
    	<div class="bubble-11"></div>
    	<div class="bubble-12"></div>
	</div>

	<div class="middleground-layer">
		<div class="bubble-1"></div>
		<div class="bubble-2"></div>
		<div class="bubble-3"></div>
		<div class="bubble-4"></div>
		<div class="bubble-5"></div>
		<div class="bubble-6"></div>
		<div class="bubble-7"></div>
		<div class="bubble-8"></div>
		<div class="bubble-9"></div>
		<div class="bubble-10"></div>
		<div class="bubble-11"></div>
		<div class="bubble-12"></div>
	</div>

	<div class="foreground-layer">
		<div class="bubble-1"></div>
		<div class="bubble-2"></div>
		<div class="bubble-3"></div>
		<div class="bubble-4"></div>
		<div class="bubble-5"></div>
		<div class="bubble-6"></div>
		<div class="bubble-7"></div>
		<div class="bubble-8"></div>
		<div class="bubble-9"></div>
		<div class="bubble-10"></div>
		<div class="bubble-11"></div>
		<div class="bubble-12"></div>
	</div>
</div>

و سپس کد های زیر را در 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 )

پخش اختصاصی

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