วิธีการทำ GRID LOADING EFFECT แสดงผลรูปภาพแบบเท่ๆ

Published on: May 27 2014 by soraya
Grid-Loading-and-Hover-Effect


วันนี้ผมมาแนะนำการทำ side show แบบเจ๋งอีกแล้วครับเป็นการทำแบบ Grid Loading ที่เป็นการโหลดภาพมาแสดงผลตามที่เราเลื่อน Browser ลักษณะของการออกแบบที่เป็นเอกลักษณ์ซึ่งเป็นจุดที่น่าสนใจ เป็นวิธีการสร้าง side show อีกแบบที่น่าสนใจครับสำหรับใครที่มองหาวิธีการทำ side show แบบเท่ๆ ต้องลอกดาวน์โหลดไปเล่นกันดูได้ครับ




ตัวอย่าง code การแสดงรูปภาพ

1
2
3
4
5
6
7
8
9
10
11
<section class="grid-wrap">
    <ul class="grid swipe-right" id="grid">
        <li class="title-box">
            <h2>Illustrations by <a href="http://ryotakemasa.com/">Ryo Takemasa</a></h2>
        </li>
        < them > < a  href = "#" > < img  src = "img/1.jpg"  alt = "img01" > < h3 > Kenpo News April 2014 issue  
        < li > < a  href = "#" > < img  src = "img/2.jpg"  alt = "img02" > < h3 > April 2014 Issue as taking place without  
        < li > < ! - ... ->
        <!-- ... -->
    </ul>
</section>

ขอบคุณข้อมูลจาก tympanus

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



Comments

comments

Powered by Facebook Comments

Filed under: CSS, Java Script
Tags: , , ,