سبد (0)

آموزش ساخت پیمایش سه بعدی

پیمایش یا اسکرول 3 بعدی صفحه

Space.js یک کتابخانه جاوا اسکریپت HTML محور، برای پیمایش 3D (سه بعدی) در صفحه است.

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

مزیت این پلاگین در این است که نیازی به نوشتن کدهای جاوا اسکریپت نیست و همه کار ها با HTML انجام می شود.

توجه: این پلاگین از مرورگرهای قدیمی IE پشتیبانی نمی کند.

نحوه استفاده

ابتدا یک سند HTML  ایجاد کنید و دو فایل space.min.js و jquery.min.js  را به آن متصل کنید. (این دو فایل را می توانید از انتهای همین مطلب دانلود نمایید.)

اضافه کردن فایل ها به سند

<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    ...
</head>
<body>
    [Your contents]
    <script type="text/javascript" src="space.min.js"></script>
</body>

ایجاد فریم (frame)

برای اسکرول یا پیمایش صفحه باید یک فریم (frame) ایجاد کنیم. مثال زیر یک فریم با کلاس "space-frame" در صفحه ایجاد می کند.

ایجاد یک فریم

<div class="space-frame">[contents]</div>

توصیه می شود برای قرار گیری محتویات فریم، هم از نظر عمودی و هم افقی در وسط صفحه، یک فریم داخلی در داخل فریم اصلی ایجاد کنید. مثال زیر یک فریم داخلی با کلاس "space-inner-frame" در داخل فریم با کلاس "space-frame" ایجاد می کند. محتویات مورد نظر از قبیل، عکس، متن و ... در قسمت "[contents]" قرار می گیرد.

ایجاد فریم داخلی

<div class="space-frame">
    <section class="space-inner-frame">
        [contents]
    </section>
</div>

مدت زمان سفارشی

 با استفاده از ویژگی "data-duration" می توان یک زمان دلخواه برای اجرای انیمیشن بر روی فریم مورد نظر مشخص کرد. این ویژگی یک مقدار پیش فرض دارد، که می توان مقدار آن را به دلخواه تغییر داد.  

مثال (آموزش ساخت پیمایش سه بعدی)

<section class="space-frame" data-duration="1.4">...</section>
<section class="space-frame" data-duration="0.6">...</section>

Space.js، یک گذار یا انتقال پیش فرض دارد، که برای ورود از  fading in (آشکار کردن تدریجی عنصر مخفی) و برای خروج از scaling up و  fading out (پوسته پوسته شدن و محو تدریجی عنصر) استفاده می کند. می توان بدون در نظر گرفتن گذار پیش فرض کتابخانه، یک گذار سفارشی ایجاد کرد. ( همچنین می توان انتقال را از ابتدا ایجاد کرد، اما بعد آن را مورد استفاده قرار داد. )

در مثال زیر فریم مورد نظر یک پیمایش با چرخش 360 خواهد داشت.

مثال (آموزش ساخت پیمایش سه بعدی)

<section class="space-frame" data-transition="rotate360">
...
</section> 

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

استفاده از چند مقدار

<section class="space-frame" data-transition="rotate360 fadeOut slideInLeft">
...
</section>

ورود و خروج سفارشی

در صورتی که بخواهید یک ورود و خروج سفارشی ایجاد کنید می توانید برای ورود قاب (بخش اول)، و برای خروج قاب (بخش دوم ) را به دلخواه تعیین کنید.

مثال (آموزش ساخت پیمایش سه بعدی)

<section class="space-frame" data-enter="fadeIn" data-exit="fadeOut zoomOut">...</section>

ساختار یک قاب کامل

مثال (آموزش ساخت پیمایش سه بعدی)

<html>
<head>
    <script src="/jquery.min.js"></script>
</head>
<body>

<div class="space-frame" data-enter="fadeIn" data-exit="zoomOut fadeOut" data-duration="1.3" data-transition="rotate360 rotate3dOut">
    <section class="space-inner-frame">
        <div style="background-image: url(/img/splash.png); padding:150px 200px;" class="bg">
            <section>
                <p>Demo 1</p>
                <h1>The Gallery</h1>
            </section>
        </div>
    </section>
</div>          

<script type="text/javascript" src="/plugin/space.min.js"></script>


</body>
</html>
خودتان امتحان کنید »

ایجاد انتقالِ سفارشی

 با استفاده از متد "addTransitions"  می توان یک انتقال یا گذار سفارشی ایجاد کرد. اما باید اطمینان حاصل کرد که این متد بعد از بارگزاری کتابخانه اجرا می شود.

مثال (آموزش ساخت پیمایش سه بعدی)

<script src="space.min.js"></script>

<script type="text/javascript">
    var transitions = {
        rotate720: {
            'rotate':{from:0, to:720}
        },
        fadeOutHalf: {
            'opacity':{from:1, to:0.5}
        }
    };
    Space.addTransitions(transitions);
</script>

افکت هایی که در حال حاضر وجود دارند:

نکته ای که باید به آن توجه شود این است که این متد ها ممکن است در نسخه بتا کتابخانه تغییر پیدا کنند.

  • scaleIn
  • fadeIn
  • scaleOut
  • fadeOut
  • rotateQuarterRight
  • rotateInQuarterClockwise
  • zoomOut
  • slideInBottom
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideInRight
  • slideOutUp
  • slideInTop
  • slideInLeft
  • slideBottomRight
  • rotate360
  • rotate3dOut

دانلود فایل های پلاگین Space.js

حجم: 6.67 مگا بایت

حجم: 90.46 کیلو بایت

نوشته شده توسط شهربانو دوستی
بازدید: 10777

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه