การสาธิต HTML48 / CSS5 สุดโหด 3 รายการ

ฉันใช้โพสต์นี้เพื่อตอบคำถามที่คุณถามเมื่อเร็ว ๆ นี้ในความคิดเห็นของบทความ:

เมื่อใดเป็นเวลาที่ดีในการเริ่มออกแบบอย่างสมบูรณ์ด้วย HTML5

จริงๆแล้วมันขึ้นอยู่กับเป้าหมายที่คุณกำหนดเป้าหมาย หากคุณไม่ได้วางแผนให้ผู้เยี่ยมชมใช้ Internet Explorer (เช่นหน้าซอฟต์แวร์ Mac) ให้เริ่มทันทีด้วย HTML5 แต่ถ้าคุณต้องการให้ผู้ที่มี IE เห็นเว็บไซต์ของคุณคุณควรรอ ...

ในรายการหลังจากการสาธิต HTML48 กระโดด 5 ครั้งที่น่าทึ่งและสมควรได้รับชม ยิ่งใหญ่เป็นเพียงเล็กน้อย

ที่มา | หงเกียรติ

audioburst นิเมชั่น

แอนิเมชั่นที่สะดวกสบายและยอดเยี่ยมสร้างขึ้นด้วยผ้าใบและแท็กเสียงของ HTML5

บอลพูล

การจัดแสดงในงาน Google I / O ครั้งที่แล้วการสาธิตนี้จะแสดงให้คุณเห็นว่า HTML5 เป็นแบบไดนามิกได้อย่างไร

หยด Sallad

สิ่งมีชีวิตที่สร้าง HTML5 ที่จะทำให้คุณพอใจ

โบโมโม

ด้วย Bomomo คุณสามารถสังเกตการเคลื่อนไหวของอะตอมที่แตกต่างกันโดยจำลองด้วย HTML5

เบราว์เซอร์บอล

ตื่นตาตื่นใจไปกับลูกบอล HTML5 แบบ 'ข้ามเบราว์เซอร์'

ต่อมน้ำ

ขอให้สนุกด้วยการสร้างฟองอากาศที่ไม่มีที่สิ้นสุดด้วยสีที่ต่างกัน

ภาพเคลื่อนไหวการ์ตูนผ้าใบ

การ์ตูน HTML5 ที่เรียบง่ายและตลกที่ช่วยให้คุณเข้าใจว่าองค์ประกอบผ้าใบของ HTML5 สามารถทำอะไรได้บ้าง

คูลคล็อก

นาฬิกาอะนาล็อกที่สวยงามและปรับแต่งได้สร้างโดย HTML5 และ JavaScript

สไลด์โชว์ Flickr PS3

ดูภาพถ่ายของ Flickr ด้วยสไลด์โชว์สไตล์ PS3 ในเว็บเบราว์เซอร์

โพลารอยด์แบบโต้ตอบ

การสาธิตแบบโต้ตอบที่ทำงานได้ค่อนข้างคล้ายกับอินเทอร์เฟซมัลติทัช

JS ดอกไม้ไฟ

เพลิดเพลินไปกับช่วงเวลาดอกไม้ไฟด้วยแรงโน้มถ่วงและความเร็วที่คุณต้องการขับเคลื่อนโดย HTML5 และ Javascript

ภาพลานตา

ภาพลานตา HTML5 ที่สวยงามและล้ำยุค

อนุภาคของเหลว

ภาพเคลื่อนไหวของอนุภาคที่ละเอียดอ่อนซึ่งตอบสนองตามการเคลื่อนไหวของเมาส์ของคุณ

เครื่องสะกดจิต

การสาธิต HTML5 ที่ละเอียดอ่อนและโดดเด่นอีกอย่างที่แสดงให้เห็นว่าองค์ประกอบใกล้เคียงตอบสนองต่อการเคลื่อนไหวของเมาส์ของคุณอย่างไร

เนบิวลาเมฆ

หลงทางไปกับเนบิวลา HTML5 สุดมหัศจรรย์นี้

ความเหลื่อมซึ่งเกิดจากการดูจากจุดสองจุด

ดูรูปร่าง 2 มิติทั้งหมดในมุมมองคู่ขนาน

แอนิเมชันของอนุภาค

ภาพเคลื่อนไหวอนุภาค HTML5 ที่สวยงามซึ่งสามารถสร้างเป็นข้อความที่คุณต้องการ

การแพร่กระจาย

หลงทางไปกับแอนิเมชั่นการแพร่กระจายที่ไม่มีที่สิ้นสุด

Starfield

แอนิเมชั่นสตาร์ฟิลด์ HTML5 ที่ยอดเยี่ยมซึ่งจะเปลี่ยนทิศทางและความเร็วตามการเคลื่อนไหวของเมาส์

การทำลายวิดีโอ

คลิกเดียวเพื่อขยายวิดีโอที่กำลังเล่น

รูปแบบของคลื่น

สังเกตว่าคลื่นผืนผ้าใบของ HTML5 เคลื่อนที่อย่างไรโดยการเปลี่ยนแอมพลิจูดความยาวคลื่นความกว้าง ฯลฯ

3D Effect

ประทับใจกับภาพเคลื่อนไหวบนผืนผ้าใบไหม นั่นคือองค์ประกอบผ้าใบของ HTML5 ที่ทำได้มากกว่าและเรียกว่าเอฟเฟกต์ 3 มิติ ผู้พัฒนาสามารถใช้องค์ประกอบผ้าใบ DOM และ JavaScript เพื่อสร้างเอฟเฟกต์ 3 มิติซึ่งสามารถพัฒนาเป็นภาพเคลื่อนไหว 3 มิติหรือเกมได้ในภายหลัง

Canvas3D และ Flickr

สัมผัสประสบการณ์ 3D แบบใหม่ด้วยโฟโต้สตรีมของ Flickr

การจำลองผ้า

การจำลองผ้าที่ใช้ HTML5 ที่เหมือนจริง

การพัฒนาสัตว์ประหลาด

สังเกตสัตว์ประหลาดที่พัฒนาเป็นสิ่งมีชีวิตที่ซับซ้อนหนึ่งในผู้สร้างคือ HTML5

กล่องของขวัญกูเกิล

เครื่องมือค้นหายักษ์ Google นำเสนอในรูปแบบ 3 มิติมุมมองที่เล่นได้

เจ.เอส.ทัช

ตู้โชว์ '3D on 2D Canvas' คุณภาพสูงและสมจริง

การนำเสนอข้อมูล

ในขณะที่องค์ประกอบผ้าใบของ HTML5 สามารถใช้ในการสร้างแอนิเมชั่นและเอฟเฟกต์ 3 มิติได้ แต่ก็สามารถนำไปใช้เพื่อนำเสนอข้อมูลทางคณิตศาสตร์ได้

gnuplot

Gnuplot แอปพลิเคชันการลงจุดข้อมูลในเวอร์ชัน HTML5

อาร์คราฟ

RGraph มีการนำเสนอข้อมูลที่หลากหลายเช่นแผนภูมิแท่งแถบความคืบหน้าและแผนภูมิเรดาร์แบบดั้งเดิม

เว็บแอ็พพลิเคชัน

ในท้ายที่สุดการใช้ความเป็นไปได้ทั้งหมดรวมกันโดย HTML5 และภาษาอื่น ๆ เราสามารถสร้างแอปพลิเคชันแบบโต้ตอบหรือเกมที่ใกล้เคียงกับแอปพลิเคชัน Flash

ผ้าใบ

ดูว่าพี่ชายของ Microsoft Paint เข้ามาในเว็บเบราว์เซอร์ของคุณและพ่อของเขาคือ HTML5

ผ้าใบMol

แอปพลิเคชันทางวิทยาศาสตร์ที่สร้างขึ้นเพื่อช่วยให้คุณเข้าใจโครงสร้างของธาตุดิน

ตัวสร้างการ์ตูน

วาดภาพการ์ตูนที่น่าสนใจด้วยเครื่องมือสร้างการ์ตูนที่เรียบง่ายและโต้ตอบได้

ลากอะไรก็ได้ที่นี่

ลากสิ่งที่คุณสามารถลากในการสาธิตเพื่อแสดงรายละเอียด

ร่าง Gartic

แอปพลิเคชัน HTML5 ดั้งเดิมที่ให้คุณสร้างภาพวาดพื้นฐานที่สามารถบันทึกลงในรูปแบบภาพต่างๆเช่น jpeg หรือ png

ภาพร่างทางกายภาพ

วาดอะไรก็ได้ที่คุณชอบและดูว่าพวกมันตอบสนองอย่างไรกับแรงโน้มถ่วงจำลอง

ผ้ายาง

แอปพลิเคชันการวาดภาพ HTML5 ที่มีประสิทธิภาพซึ่งช่วยให้คุณสามารถวาดและแก้ไขภาพของคุณได้อย่างแม่นยำ

หูฟัง

เว็บแอปพลิเคชันที่ยืนยันตำแหน่งทางภูมิศาสตร์ของข้อความที่เกี่ยวข้องกับสภาพอากาศที่ได้มาจาก Twitter จึงสร้างเป็นแผนที่ 'สภาพอากาศทางสังคม' บนผืนผ้าใบซึ่งค่อนข้างไม่สำคัญ (ตามที่ผู้เขียนระบุไว้) แต่น่าสนใจ

เกม

3 เบื่อ

คุณจะไม่มีวันเบื่อหากคุณสามารถหลบเลี่ยงกระสุน HTML5 ได้หลายร้อยรายการในวินาทีถัดไป

ฝ่าวงล้อม

เด้งลูกบอลเพื่อทำลายอิฐทั้งหมด

แคนวาสเคป

ไม่ใช่เกม แต่แสดงให้เห็นว่า HTML5 สามารถใช้ในการพัฒนาเกมเบราว์เซอร์ First Person Shooting ได้อย่างไร

จับมัน

คุณสามารถหลบได้กี่ลูกเพื่อให้ได้สี่เหลี่ยมจัตุรัส HTML5 ที่ชนะ

ปฏิกิริยาลูกโซ่

เชื่อมต่อการระเบิดเพื่อให้บรรลุเป้าหมายอย่าเสพติด

คิวบ์เอาท์

เล่น Tetris ในมุมมอง 3 มิติจากบนลงล่าง

หลักฟิสิกส์

วาดรายการเพื่อย้ายลูกบอลไปยังดาวอย่าลืมเกี่ยวกับแรงโน้มถ่วง

ตัวต่อ

คลิกหมุนและวางชิ้นส่วนปริศนาเพื่อไขปริศนาจิ๊กซอว์ที่ใช้ HTML5

ปริศนาภาพนิ่ง

เลื่อนไปสู่ชัยชนะเกม HTML5 อีกเกมที่สร้างขึ้นเพื่อบีบความคิดของคุณ

เกมเดียวกัน

ลบบางกลุ่มออกเพื่อให้อีกกลุ่มหนึ่งจับคู่สีเดียวกันและคุณจะได้รับชัยชนะในที่สุด

Tetris

เกมคลาสสิกที่สุดเกมหนึ่งที่นำกลับมามีชีวิตอีกครั้งด้วย HTML5

ฐานรองดอก

ยังเป็นเกม Tetris อีกเกมในเวอร์ชันหลอก 3D