سلام دوستان، از این به بعد میخوام مطالب آموزشی رو ترجمه کنم و به شما یاد بدم، پس امروز اولین پست را ارسال می کنم، من تو ترجمه زیاد وارد نیستم، ولی سعی کردم خوب و گیرا ترجمه کنم، اگه یکم ترجمه رسمی بود به دل نگیرید، به مرور زمان من سعی می کنم بهتر ترجمه کنم. خوب بریم سراغ آموزش:

امروز میخواهم چگونگی ساخت افکت های سه بعدی هیجان انگیز را با استفاده از css3 و jQuery نشان بدهم. این ایده الهام گرفت شده از افکت حرکتی است که شما می توانید در صفحه Google SketchUp Showcase پیدا کنید. ما یک ساختار با jquery می سازیم که به ما اجازه میدهد ، وقتی به روی عکس برویم ، خم یا تا شود. برای این افکت ما از تبدیل css سه بعدی استفاده میکنیم.
پس این موضوع را ذکر کنم که این افکت فقط در مرورگرهای جدید کاربرد دارد و در اینترنت اکسپلورر ( حتی نسخه ۹ ) اجرا نمی شود.
آموزش در ادامه مطلب..

مشاهده دموی اسکریپتدریافت اسکریپت

تصاویر استفاده شده در دمو توسط Angelo González گرفته شده و تحت لیسانس Creative Commons Attribution 2.0 Generic (CC BY 2.0) می باشد.شما می توانید برای مشاهده آثار دیگر این هنرمند به لینک صفحه فلیکر آن مراجعه کنید.

نشانه گذاری ها:

نشانه گذاری در ساختار تصاویر به شرح زیر است:

۵۶۶ ۱۲۴

هر تصویر در داخل یک بخش ( div) همراه یک بخش دیگر برای جزئیات است. ( کلاس view-back را مشاهده کنید در بالا ).ساختاری که ما می خواهیم برای هر بخش ایجاد کنیم همراه یک کلاس view با استفاده از جاوا اسکریپت به شرح زیر است:

هر تکه یک عکس پس زمینه خواهد داشت و ما یک ساختار تو در تو داریم، این اجازه میدهد تا افکت را کنترل کنیم.علاوه بر این ما یک المان span با کلاس overlay را اضافه می کنیم تا یا افکت واقعی تر داشته باشیم. توابع جاوا اسکریپت هم به شرح زیر است:

$.fn.hoverfold = function( args ) {
 
    this.each( function() {
     
        $( this ).children( '.view' ).each( function() {
         
            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; var $struct = $( struct ); $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) ); } ); }); };

خوب، اول برویم یکسری ساختار رایج راتعریف کنیم و بعد برویم سراغ مثال اول.

قسمت css

برویم ساختار بخش view را تعریف کنیم. آنچه مهم است این است که ما المانهای ظاهر را اضافه کنیم:

.view {
width: 316px;
height: 216px;
margin: 10px;
float: left;
position: relative;
border: 8px solid #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
perspective: 500px;
}

برای قسمت slice ما به خواص سه بعدی و یک انتقال نیاز داریم:

.view .slice{
width: 60px;
height: 100%;
z-index: 100;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 150ms ease-in-out;

}

این هم ساختار بخشی که ما به سمت کنار فشار می آوریم:

.view div.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}

ساختار قسمت spans و لینک ها:

.view-back span {
display: block;
float: right;
padding: 5px 20px 5px;
width: 100%;
text-align: right;
font-size: 16px;
color: rgba(255,255,255,0.6);
}

.view-back span:first-child {
padding-top: 20px;
}

.view-back a {
display: bock;
font-size: 18px;
color: rgba(255,255,255,0.4);
position: absolute;
right: 15px;
bottom: 15px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 22px;
text-align: center;
font-weight: 700;
}

.view-back a:hover {
color: #fff;
border-color: #fff;
}

برای آیکونهای قبل از spans هم ما از فونتهای ساخته شده توسط Fontello استفاده کردیم.پس ما یک ویژگی دیتا-آیکون به spans اضافه کردیم، ما برای نمایش آن می توانیم از شبه کلاس :before استفاده کنیم:

.view-back span[data-icon]:before {
content: attr(data-icon);
font-family: 'icons';
color: #aaa;
color: rgba(255,255,255,0.2);
text-shadow: 0 0 1px rgba(255,255,255,0.2);
padding-right: 5px;
}

همه، به جز قطعه اول، باید به سمت راست منتقل شود (به یاد داشته باشید، ما یک ساختار تو در تو داریم):

.view .s2,
.view .s3,
.view .s4,
.view .s5 {
transform: translateX(60px);
}

بیایید موقعیت پس زمینه های مربوطه از هر تکه برای عکس پس زمینه را تنظیم کنیم:

.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -60px 0px;
}
.view .s3 {
    background-position: -120px 0px;
}
.view .s4 {
    background-position: -180px 0px;
}
.view .s5 {
    background-position: -240px 0px;
}

برای overlays ابتدا ما opacity 0 را داریم و بعد در قسمت hover آن را به ۱ تغییر می دهیم:

.view .overlay {
    width: 60px;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 150ms ease-in-out;
}

.view:hover .overlay {
    opacity: 1;
}

حالا موقعیت و مقدار z-index را برای عکس تنظیم می کنیم.و یک قسمت را هم برای مرورگرهایی که css سه بعدی را پشتیبانی نمی کنند را اضافه می کنیم:

.view img {
position: absolute;
z-index: 0;
transition: left 0.3s ease-in-out;
}

و ما وقتی میبینیم که یک مرورگر قابلیت های سه بعدی را پشتیبانی نمی کند، ما یک ساختار اظافه را در فایل fallback.css قرار می دهیم که به شرح زیر است:

.view {
overflow: hidden;
}

.view:hover img {
left: -85px;
}

.view div.view-back {
background: #666;
}

و این قسمت هم برای آن است که وقتی به روی عکس میرویم آن را به سمت چپ حرکت دهد.
خوب، حالا برویم مثال را با هم ببینیم!

مثال:

برای این مثال ما می خواهیم یه افکت تاشو بسازیم.حالا ما قسمت perspective را برای بخش view و transition را برای تمام بخش ها تنظیم می کنیم:

.view {
perspective: 1050px;
}

.view div {
transition: all 0.3s ease-in-out;
}

چرخش سه یعدی را برای تکه های دوم و سوم و چهارم و پنجم قرار می دهیم:

.view:hover .s2{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

هر یک از این تکه ها به سمت چپ منتقل خواهند شد.برای نشان دادن شکاف کوچک باید عرضش را کم کنیم، ما ۵۹px را انتخاب می کنیم.تکه دوم -۴۵ درجه به سمت چپ می چرخد.تکه چهارم در جهت دیگر می چرخد و تکه های سوم و پنجم هردو ۹۰ درجه می چرخند.به یاد داشته باشید که ما یک ساختار تو در تو داریم، پس وقتی ساختار اصلی می چرخد، ساختار های داخل آن هم می چرخند.
برای آنکه یک مقدار واقعی تر کنیم، ما مقداری شیب به قسمت overlays اضافه می کنیم:

.view .s2 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s3 > .overlay {
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s4 > .overlay {
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s5 > .overlay {
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

برای شبیه سازی یک سایه افتاده روی پس زمینه مقداری شیب به پس زمینه می دهیم:

.view div.view-back{
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

همین! نمونه های دیگر را هم تست کنید! کارهای دیگری را هم می شود انجام داد.

مشاهده دموی اسکریپتدریافت اسکریپت

6381 بازدید

۱ تیر ۱۳۹۱ / آموزش

۶ دیدگاه برای این مطلب ارسال شده است !

  • B4R0N / در تاریخ ۱۷ تیر ۱۳۹۱

    تو فتوشاپ چجوری میشه این افکتارو درست کرد؟؟؟

  • علیرضا / در تاریخ ۱۷ تیر ۱۳۹۱

    والا تو اینجا که نمیشه توضیح داد، ولی میتونی تو نت یه سرچ کنی، مقاله آموزشی زیاده، شاید چند وقت دیگه آموزششو تو سایت گذاشتم 😀

  • علی / در تاریخ ۱ اسفند ۱۳۹۳

    سلام،میشه یه کمکی تو یادگیری این کار زیبا بهم بکنید؟
    بقیه کارهاتون رو با هر زحمتی که هست میفهمم و انجام میدم ولی این یکی رو اصلا نمیتونم
    خیلی هم دوست دارم که کاملا بفهممش
    ممنون

    • علیرضا / در تاریخ ۱ اسفند ۱۳۹۳

      سلام، بله کمکی از دستم بر بیاد انجام میدم، مشکل کجاست کجاشو نمیفهمید؟؟؟؟

  • علی / در تاریخ ۱۸ فروردین ۱۳۹۴

    افکت های حرکتی واسه هر عکس رو خوب نمیفهمم که چه اتفاقی میفته!!!اگه اینجا نمیتونید با ایمیلم بهم بگید

  • ارسال پاسخ !

    بالا