Rabbitinblack

Tag: library

  • 3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน

    3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน

    ในการทำเว็บไซต์นั้น หลายครั้งที่เราต้องการให้ Element นั้นมีการเคลื่อนไหว ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ animation – CSS: Cascading Style Sheets | MDN

    แต่มันจะง่ายขึ้นถ้าเราไม่ต้องทำเองตั้งแต่ต้น โดยใช้ไลบารี่ต่าง ๆ ที่มีคนทำไว้ให้แล้ว ผมเลยจะมาแนะนำ 3 CSS Animation ไลบารี่ เพื่อให้ทุกคนสามารถนำไปใช้งานกับงานตัวเองได้

    CSS Animation ไลบารี่

    animate.css

    Animate.css

    สำหรับไลบารี่ตัวนี้ เป็นตัวที่ผมใช้บ่อยมากที่สุด โดยวิธีการใช้งานก็ไม่ได้ยาก แค่เพิ่ม CSS ตัวนี้เข้าไป

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    และใส่ class animate__animated แล้วตามด้วยชื่อ animation ที่จะใช้ โดยนำหน้าด้วย animate__ เช่น animate__bounce

    ลิงก์ : animate.css

    Hint.css

    สำหรับไลบารี่ตัวนี้ สำหรับใช้งาน tooltip โดยใช้แค่ CSS อย่างเดียวไม่ต้องใช้ Javascript ประกอบ วิธีการใช้งานก็เรียก hint.css ใน HTML ของเรา

    <link rel="stylesheet" href="hint.css" />

    และใส่ class ที่ต้องการใช้งาน รวมถึง aria-label ซึ่งภายใน aria-label จะเป็นข้อความที่แสดงผลใน tooltip

    สวัสดีครับ, <span class="hint--bottom" aria-label="ขอบคุณครับ">เอาเม้าส์มาวางบนนี้ซิ.</span>

    ลิงก์ : hint.css

    Magic.css

    สำหรับไลบารี่ตัวนี้ การเคลื่อนไหวของมันจะดูหรูหรามากขึ้นจาก animate.css โดยเพิ่ม CSS ของไลบารี่นี้เข้าไป

    <link rel="stylesheet" href="magic.css" />

    และใส่ class ที่ตัวไลบารี่กำหนดไว้ เช่น magic, swap, puffin

    ลิงก์ : magic.css

  • [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

    [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

    คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

    โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

    [html]
    <script src="js/modernizr.min.js"></script>
    [/html]

    และกำหนดที่ html ให้มี class เป็นแบบนี้

    [html]
    <html class="no-js">
    [/html]

    และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

    [html]
    <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
    [/html]

    จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

    รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

    โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
    บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

    ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ