[CSS] Animated Banners รับหน้าร้อน

posted on 04 Mar 2012 02:21 by limitblog in css directory Diary
สวัสดีวันที่ 3 มีนาคม 2555
ก่อนอื่นต้องขอกั้น entry ที่แล้วไว้ก่อนเพราะเกิดปัญญาหากับคอมกากๆที่บ้าน ขั้นอันนี้แทน
"Animated Banners" ไอเดีย animation คล้ายๆกับ css-my-twitter-update นะครับไม่อยากเลยลองดูนะครับ

  • อันดับแรกหาภาพ social ในรูปร่างของ tag ผมหาได้ Social Media Price Tag แบบนี้
  • จัดารฝากไฟล์ภาพแล้วกำหนด HTML ครับ

    <nav> <ul> <li><img src="facebook.png"><a href="#"></a></li> <li><img src="twitter.png"><a href="#"></a></li> <li><img src="flickr.png"><a href="#"></a></li> <li><img src="google.png"><a href="#"></a></li> </ul> </nav> ตัวอย่างใช้แค่ 4 อันนะครับ จัดการ css อย่างง่าย

    nav{ margin:100px; /*ตัวนี้ทำใน jsFiddle สามารถปรับหรือไม่ก็ได้*/ } nav>ul{ position:relative; } nav>ul>li{ position:relative; display:inline; padding:10px; }
  • ขั้นต่อมากำหนดการเคลื่อนไหวแบบ Swing ให้เหมือนแกว่งไปมากำหนดแบบง่ายๆนะครับไม่ต้องกำหนดยากเกินไป
  • จะได้ nav>ul>li{ position:relative; display:inline; padding:10px; -webkit-animation:swing 2.5s infinite ease-in-out; -webkit-transform-origin:top; -moz-animation:swing 2.5s infinite ease-in-out; -moz-transform-origin:top; } @-moz-keyframes swing {0%{-moz-transform:rotate(-3deg)} 50%{-moz-transform:rotate(3deg)} 100%{-moz-transform:rotate(-3deg)}} @-webkit-keyframes swing {0%{-webkit-transform:rotate(-3deg)} 50%{-webkit-transform:rotate(3deg)} 100%{-webkit-transform:rotate(-3deg)}} โดยในส่วนของ"-animation"ย่อให้สั้นลงจาก

    -animation-name: swing; -animation-iteration-count: infinite; -animation-timing-function: ease-in-out; -animation-duration: 2.5s; ได้มา -animation:swing 2.5s infinite ease-in-out; โดยกำหนดให้ยึดส่วนหมุนตรงหัวคือ -transform-origin:top;
  • มันยังดูสามัคคีกันเกินไปไม่เหมือนลมพัดเลยต้องใส่ "nth:child" ลงไปกำหนดการ delay อันเว้นอัน odd
  • nav>ul>li:nth-child(odd){ -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s }
    มันยังไม่มีที่ยึดเหนี่ยวก็ไปหารูปหัวตะปูมาตอกมันลงไป

    nav>ul>li:before{ content: url(/tack.png); position:absolute; margin:6px 20px; }
    แค่นี้ก็เรียบร้อยครับผมดัดแปลงไว้เหมือนข้างๆนี่ครับที่เหมือนเสา

    ท่านสามาารถอ่านต่อบทความกี่ยวกับ css3 animation และ :nth:chilr() ได้ตามลิงค์ด้านล่างนี้นะครับ
  • css3 animations และ Css Transitions
  • how nth-child works

  • ท่านสามารถดูตัวอย่างและ code ทั้ง 2 ได้ที่
  • DEMO1 มีเสา
  • DEMO2 Howto



  • ท้ายนี้ :ถ้าคอม desktop ดีจะสารต่อ entry ที่แล้วให้เสร็จนะครับติดตามต่อกันต่อไปนะครับ และตอนนี้อากาศร้อนมากยังไงรักษาสุขภาพด้วยครับ ;p

    Comment

    Comment:

    Tweet

    แจ่มมากมาย
    สอง ฮ่าๆๆ
    big smile open-mounthed smile confused smile Hot! Hot! Hot!

    #11 By Nirankas on 2012-03-05 19:13

    ขอบคุณครับ^^

    #10 By ของขวัญ (171.4.180.25) on 2012-03-05 00:06

    Hot! Hot!

    #9 By kuma-tan on 2012-03-04 23:26

    Hot! Hot! Hot! Hot! Hot! สุดยอดไปเลย

    #8 By Code-Catte on 2012-03-04 21:49

    ล้ำลึก ล้ำลึก ชาบู~~ confused smile open-mounthed smile Hot! Hot! Hot! Hot! Hot! Hot! Hot!
    เก่งจริงอะไรจังเฮีย ได้อีกเยอะๆน๊าาาา big smile open-mounthed smile confused smile double wink Hot! Hot! Hot!
    ดีเลิศประเสริฐศรีจริงๆครับ open-mounthed smile confused smile Hot! Hot! Hot! Hot! Hot!

    #5 By บุรุษนิรนาม on 2012-03-04 20:33

    Hot! Hot! Hot! เจ๋งbig smile
    Hot! มันยอดมาก ๆ เลยค่ะ

    #3 By D-faxtory on 2012-03-04 10:06

    ชอบครับ มอบดาวแดงให้ท่านเลยตอนนี้ :D Hot! Hot! Hot! Hot!

    #2 By ozinepank on 2012-03-04 08:03

    Hot! Hot! Hot! เฮือก!! ข้าน้อยขอคารวะ

    #1 By nodtem32 on 2012-03-04 02:46