یک تریک بسیار زیبا و هوشمندانه که در کلاس وب ۱ مجتمع فنی تهران توسط استاد پارسا قربانیان نوشته شده است.
در این دو سکشن راست و چپ وجود دارد که با قرار دادن گریدهایی، به حرکت موس حساس شده است و وقتی که موس را حرکت میدهید، دو متن برخلاف جهت حرکت موس، جابجا میشوند و چون رنگ های متفاوتی دارند، منظره زیبایی را برای کاربر ترسیم میکنند.
کد قسمت css3:
[box type=”success” align=”” class=”” width=””]
<style>
*, ::before, ::after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
position: relative;
z-index: -9
}
#main{
width: 100%;
height: 100vh;
background-image: url(img/12.jpg);
background-size: cover;
position: relative;
z-index: -2;
}
#main>div{
width: 7.14%;
height: 100%;
/* background: rgba(255, 255, 255, 0.58);*/
float: left;
/* border: 1px solid red;*/
}
.left, .right{
width: 50%;
height: 100%;
/* background: red;*/
position: absolute;
top: 0;
overflow: hidden;
z-index: -1;
font-size: 6.5em;
}
.left{
left: 0;
}
.left>h2{
transform: translate(443px, -50%) !important;
color: aqua;
transition: .4s;
}
.right{
right: 0;
}
.right>h2{
transform: translate(-238px, -50%) !important;
color: fuchsia;
transition: .4s;
}
#main>section>h2{
position: absolute;
top: 50%;
}
.l7:hover ~ .left>h2{
transform: translate(493px, -50%) !important;
}
.l7:hover ~ .right>h2{
transform: translate(-188px, -50%) !important;
}
/***************************/
.r7:hover ~ .left>h2{
transform: translate(393px, -50%) !important;
}
.r7:hover ~ .right>h2{
transform: translate(-288px, -50%) !important
}
.l6:hover ~ .left>h2{
transform: translate(543px, -50%) !important;
}
.l6:hover ~ .right>h2{
transform: translate(-138px, -50%) !important;
}
/***************************/
.r6:hover ~ .left>h2{
transform: translate(343px, -50%) !important;
}
.r6:hover ~ .right>h2{
transform: translate(-338px, -50%) !important
}
.l5:hover ~ .left>h2{
transform: translate(593px, -50%) !important;
}
.l5:hover ~ .right>h2{
transform: translate(-88px, -50%) !important;
}
/***************************/
.r5:hover ~ .left>h2{
transform: translate(293px, -50%) !important;
}
.r5:hover ~ .right>h2{
transform: translate(-388px, -50%) !important
}
.l4:hover ~ .left>h2{
transform: translate(643px, -50%) !important;
}
.l4:hover ~ .right>h2{
transform: translate(-38px, -50%) !important;
}
/***************************/
.r4:hover ~ .left>h2{
transform: translate(243px, -50%) !important;
}
.r4:hover ~ .right>h2{
transform: translate(-438px, -50%) !important
}
.l3:hover ~ .left>h2{
transform: translate(693px, -50%) !important;
}
.l3:hover ~ .right>h2{
transform: translate(28px, -50%) !important;
}
/***************************/
.r3:hover ~ .left>h2{
transform: translate(193px, -50%) !important;
}
.r3:hover ~ .right>h2{
transform: translate(-488px, -50%) !important
}
.l2:hover ~ .left>h2{
transform: translate(743px, -50%) !important;
}
.l2:hover ~ .right>h2{
transform: translate(78px, -50%) !important;
}
/***************************/
.r2:hover ~ .left>h2{
transform: translate(143px, -50%) !important;
}
.r2:hover ~ .right>h2{
transform: translate(-538px, -50%) !important
}
.l1:hover ~ .left>h2{
transform: translate(793px, -50%) !important;
}
.l1:hover ~ .right>h2{
transform: translate(128px, -50%) !important;
}
/***************************/
.r1:hover ~ .left>h2{
transform: translate(93px, -50%) !important;
}
.r1:hover ~ .right>h2{
transform: translate(-588px, -50%) !important
}
</style>
[/box]
کد قسمت HTML :
[box type=”success” align=”” class=”” width=””]
<body>
<section id=”main”>
<div class=”l1″></div>
<div class=”l2″></div>
<div class=”l3″></div>
<div class=”l4″></div>
<div class=”l5″></div>
<div class=”l6″></div>
<div class=”l7″></div>
<div class=”r7″></div>
<div class=”r6″></div>
<div class=”r5″></div>
<div class=”r4″></div>
<div class=”r3″></div>
<div class=”r2″></div>
<div class=”r1″></div>
<section class=”left”>
<h2>PARSA</h2>
</section>
<section class=”right”>
<h2>PARSA</h2>
</section>
</section>
</body>
[/box]
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
