شاید توی بعضی سایتا دیده باشید که وقتی موس رو روی عکسا می برید یه سری اتفاقات خاصی میوفته مثلا عکس به صورت سه بعدی می چرخه یا تغییر میکنه. این کارا رو میشه هم با جاوا اسکریپت و هم با CSS انجام داد و اینجا سعی دارم یه سری نمونه کد براتون بزارم که توی سایتا یا پروژه های خودتون ازش استفاده کنید:
نوع اول
توی این مدل عکس به سمت بالا حرکت میکنه تا متن مورد نظر ما که زیرش مخفی شده نمایش داده بشه.
مرحله ی اول : ایجاد ساختار html
<ul class=“demo-1 effect”>
<li>
<h2>من یه برنامه نویسم!</h2>
<p>برنامه نویسا موجوداتی منزوی هستن که بیست و چهار ساعت میشینن چشم میدوزن به یه مانیور و با صفحه کلید ور میرن ماشالله دست به تایپشونم خیلی توپه.</p>
</li>
<li><img class=“top” src=“images/image1.jpg” alt=“”/></li>
</ul>
مرحله ی دوم: نوشتن دستورات CSS برای استایل دهی و حرکت دادن به تصویر
.demo-1 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-1 p {
font-family:‘Lato’;
font-size:12px;
line-height:18px;
margin:0
}
.demo-1 h2 {
font-family:‘Lato’;
font-size:20px;
line-height:24px;
margin:0;
}
.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}
مدل دوم
توی این مدل عکس به صورت اسلاید به طرف پایین حرکت میکنه تا متن یا همون تایتلی که برای عکس در نظر گرفته شده نمایش داده بشه
مرحله اول ایجاد ساختار html
<ul class=“demo-2 effect”>
<li>
<h2 class=“zero”>من یه برنامه نویسم!</h2>
<p class=“zero”>برنامه نویسا موجوداتی منزوی هستن که بیست و چهار ساعت میشینن چشم میدوزن به یه مانیور و با صفحه کلید ور میرن ماشالله دست به تایپشونم خیلی توپه.</p>
</li>
<li><img class=“top” src=“images/image1.jpg” alt=“”/></li>
</ul>
مرحله دوم نوشتن دستورات CSS برای استایل دهی و متحرک سازی های مربوط به عکس
.demo-2 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:‘Lato’;
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:‘Lato’
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
مدل سوم
در این مدل عکس به صورت سه بعدی میچرخه تا متن یا توضیحات مربوط به عکس دیده بشه.
مرحله اول ایجاد ساختار html
<ul class=“demo-3”>
<li>
<figure>
<img src=“images/image1.jpg” alt=“”/>
<figcaption>
<h2 class=“zero”>من یه برنامه نویسم!</h2>
<p class=“zero”>برنامه نویسا موجوداتی منزوی هستن که بیست و چهار ساعت میشینن چشم میدوزن به یه مانیور و با صفحه کلید ور میرن ماشالله دست به تایپشونم خیلی توپه.</p>
</figcaption>
</figure>
</li>
<li><img class=“top” src=“images/image1.jpg” alt=“”/></li>
</ul>
مرحله دوم نوشتن دستورات مربوط به استایل دهی و چرخش عکس که همه با CSS انجام خواهد شد
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:‘Lato’;
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:‘Lato’;
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
