اپیلیکیشن صفحه نمایش محصولات

اپیلیکیشن صفحه نمایش محصولات

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

برای مشاهده لینک وارد شود

ما کار را با نوشتن کد های HTML آغاز می کنیم.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

        <!-- Google Webfonts and our stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans
           +Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="impress" class="impress-not-supported">

            <!-- The Slides Will Go Here -->

        </div>

        <a id="arrowLeft" class="arrow">&lt;</a>
        <a id="arrowRight" class="arrow">&gt;</a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/impress.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

چیز خاصی در این کد نیست. ما فونت مورد نیازمان را از google font دانلود کردیم همچنین ما قبل از بستن تگ body کتابخانه jQuery و جاوااسکریپت را وارد کردیم.

تگimpress اسلاید ها را نگه میدارد.برای استفاده از کتابخانهimpress.js باید id مرتبط تعریف بشودسپس فلش های اسلاید ها را برای جابجایی اسلاید ها آماده میکنیم.

هر اسلاید شامل سه المان میباشد:عنوان-عکس-متن.این المان ها برای هر اسلاید  منحصر به فرد است.

نحوه استفاده از impress.js

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

خواصی که impress.js پشتیبانی میکند

data-x,data-y,data-z برای حرکت سه بعدی اسلایدها

data-rotate,data-rotate-x,data-rotate-y برای چرخاندن

data-scale برای تغییر اندازه اسلاید ها

میتونید اعمال گفته شده را در قطعه کد زیر مشاهده کنید

<!-- The first slide retains its default position. We could omit the
   data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
    <h2>Introducing Galaxy Nexus</h2>
    <p>Android 4.0<br /> Super Amoled 720p Screen<br />
    <img src="assets/img/nexus_1.jpg" width="232" height="458"
     alt="Galaxy Nexus" />
</div>

<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8"
   data-rotate="190">
    <h2>Simplicity in Android 4.0</h2>
    <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
    <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <h2>Connect &amp; Share</h2>
    <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
    <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
    <h2>Instant Upload</h2>
    <p>Your photos upload themselves with Instant Upload, which makes ..</p>
    <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
    <h2>Jam on with Google Music</h2>
    <p>Google Music makes discovery, purchase, and listening effortless and..</p>
    <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

سپس برای زیبا تر کردن  و نظم بخشیدن از کد های CSS استفاده می کنیم

assets/css/style.css

/*----------------------------
    Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
    opacity:0.4;
}

#impress .step{
    width:700px;
    height: 600px;
    position:relative;
    margin:0 auto;

    -moz-transition:1s opacity;
    -webkit-transition:1s opacity;
    transition:1s opacity;
}

#impress .step.active{
    opacity:1;
}

#impress h2{
    font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
    color:#444648;
    position:absolute;
    z-index:10;
}

#impress p{
    font: normal 18px/1.3 'Open Sans', sans-serif;
    color:#27333f;
    position:absolute;
    z-index:10;
}

#impress img{
    position:absolute;
    z-index:1;
}

/*----------------------------
    Slide 1 - Intro
-----------------------------*/

#impress #intro{
    width: 500px;
}

#intro h2{
    text-align: center;
    width: 100%;
}

#intro p{
    font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
    top: 120px;
}

ما برای استفاده از کتابخانه impress.js باید متد های آن را با استفاده از کد های jQuery فراخوانی کنیم.

script.js

$(function(){

    var imp = impress();

    $('#arrowLeft').click(function(e){
        imp.prev();
        e.preventDefault();
    });

    $('#arrowRight').click(function(e){
        imp.next();
        e.preventDefault();
    });

});

 

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


نُه − 7 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>