สร้างสไลน์รูปภาพแบบ 3D ด้วยปลั๊กอิน jQuery และ CSS 3D


StackSlider คือปลั๊กอิน jQuery ที่ผู้พัฒนาได้ทำการทดสอบเพื่อให้ผู้พัฒนาลองใช้งานร้วมกับ CSS 3D ที่ตอนนี้เริ่มมีการนำมาใช้งานกันอย่างแพร่หลายโดยวันนี้เว็บการสร้างสไลน์เลื่อนแบบเจ๋งโดยหลักการทำงานก็ไม่สลับซับซ้อนครับแต่เป็นการใช้เทคนิคที่น่าสนใจโดยการโชว์ภาพเลื่อนซ้าย ขวา แต่เพื่อความเลื่อนไหลและความสมูลในการเลื่อนเข้าไปด้วยด้านล่างที่คล้ายกับชั้นของภาพที่ซ้อนกันอยู่จะค่อยๆลดลงไปตามจำนวนภาพที่เลื่อนไปนั้นเองครับเราลองมาดูตัวอย่างกันเลยดีกว่า



โค้ด HTML เราสามารถใส่รูปภาพเข้าไปได้โดยไม่จำกันครับตรงส่วน

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul id="st-stack" class="st-stack-raw">
        <li>
            <div class="st-item">
                <a href="http://drbl.in/fgQV">
                    <img src="images/1.jpg" />
                </a>
            </div>
            <div class="st-title">
                <h2>Graverobber</h2><h3>by Isaac Montemayor</h3>
            </div>
        </li>
        <li> <!-- ... --> </li>
        <li> <!-- ... --> </li>
        <li> <!-- ... --> </li>
        <!-- ... -->
    </ul>


    เป็นโค้ด css ชื่อไฟล์ style.css ที่ใช้ในการกำหนดขนาดและการเลื่อนของสไลน์นั้นเองครับ

    1
    2
    3
    4
    5
    // ความเร็วการเปลี่ยนแปลง
    speed : 700,
    // ความลื่นไหนของภาพตอนเลื่อน
    easing : 'ease-in-out',
    piles : true


    ดาวน์โหลดโค้ด…..!!!



    ขอบคุณข้อมูลจาก http://tympanus.net/

    Comments

    comments

    Powered by Facebook Comments