ตัวอย่างเว็บไซต์ HTML5 48 การสาธิตการสังหารด้วยแฟลชที่มีศักยภาพ

ดังนั้นคุณเคยได้ยินข่าวลือทั้งหมดเกี่ยวกับ HTML5 จะเข้าควบคุม Adobe Flash ในขณะที่ชุมชนเว็บส่วนใหญ่ให้เหตุผลว่าเป็นไปได้หรือไม่คุณจะต้องหลงสิ่งที่ทำให้ HTML5 มีประสิทธิภาพจนแม้แต่ บริษัท ยักษ์ใหญ่ของ Apple ต้องการใช้เพื่อแทนที่ Flash.

นั่นเป็นสาเหตุที่โพสต์นี้มีอยู่เราจะไม่พูดเกี่ยวกับสิ่งที่ HTML5 สามารถทำได้ แต่แสดงการสาธิตสดของสิ่งมหัศจรรย์ที่ HTML5 สามารถทำได้ด้วยภาษาอื่นเช่น JavaScript ดังนั้นเตรียมพร้อมรับแรงบันดาลใจ.

หมายเหตุ: เนื่องจาก HTML5 ไม่ได้รับการสนับสนุนอย่างสมบูรณ์จากเว็บเบราว์เซอร์บางตัวเช่น Internet Explorer คุณควรอย่างยิ่งที่จะใช้เบราว์เซอร์ Firefox เพื่อดูการสาธิต HTML5 ทั้งหมดด้านล่าง.

นิเมชั่น

องค์ประกอบ Canvas ของ HTML5 เป็นปัจจัยในการตัดสินใจสำหรับ HTML5 เพื่อแทนที่ภาพเคลื่อนไหว Flash บางอย่าง จะช่วยให้คุณสร้างการแสดงผลแบบไดนามิกสคริปต์ในรูปแบบ 2D และภาพบิตแมปด้วย Javascript ซึ่งหมายความว่าเป็นภาพเคลื่อนไหวที่ควบคุมได้.

Audioburst Animation

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

บอลพูล

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

Blob Sallad

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

Bomomo

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

Browser Ball

ประหลาดใจกับลูกบอล HTML5 แบบข้ามเบราว์เซอร์.

ฟองฟอด

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

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

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

Coolclock

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

สไลด์โชว์ Flickr PS3

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

โพลารอยด์เชิงโต้ตอบ

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

ดอกไม้ไฟเจ

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

ภาพลานตา

ลานตา HTML5 ที่สวยงามและล้ำสมัยมาก.

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

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

Mesmerizer

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

เนบิวลาคลาวด์

หายไปกับเนบิวลา HTML5 อันมหัศจรรย์นี้.

Parallax

ดูรูปร่าง 2D ทั้งหมดในมุมมองแบบคู่ขนาน.

ภาพเคลื่อนไหวของอนุภาค

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

กระจาย

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

Starfield

ภาพเคลื่อนไหว HTML5 starfield ที่เจ๋งมากที่จะเปลี่ยนทิศทางและความเร็วตามการเคลื่อนไหวของเมาส์.

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

คลิกเดียวเพื่อบูมวิดีโอที่กำลังเล่น.

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

สังเกตว่าคลื่นผ้าใบของ HTML5 เคลื่อนไหวอย่างไรโดยการเปลี่ยนความกว้างความยาวคลื่นความกว้าง ฯลฯ.

เอฟเฟกต์ 3D

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

Canvas3D และ Flickr

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

การจำลองผ้า

การจำลองผ้าที่ใช้ HTML5 อย่างสมจริง.

วิวัฒนาการของสัตว์ประหลาด

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

Google Giftbox

เสิร์ชเอนจิ้นยักษ์ Google นำเสนอในมุมมอง 3 มิติที่สามารถเล่นได้.

JS Touch

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

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

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

gnuplot

Gnuplot แอปพลิเคชันการพล็อตข้อมูลในเวอร์ชัน HTML5.

RGraph

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

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

ในท้ายที่สุดเมื่อใช้ความเป็นไปได้ทั้งหมดที่รวมเข้าด้วยกันโดย HTML5 และไฟล์อื่น ๆ ของ HotelTravel.com ผู้ใช้สามารถสร้างแอปพลิเคชั่นหรือเกมแบบอินเทอร์แอคทีฟที่ใกล้กับ Flash.

CanvasPaint

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

CanvasMol

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

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

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

ลากสิ่งที่นี่

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

Gartic Sketch

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

PhysicSketch

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

ผ้ายาง

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

หูฟัง

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

เกม

3Bored

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

ฝ่าวงล้อม

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

Canvascape

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

จับมัน

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

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

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

Cubeout

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

etchaPhysics

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

ตัวต่อจิ๊กซอว์

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

เลื่อนปริศนา

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

เกมเดียวกัน

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

Tetris

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

ฐานรองดอก

เกม Tetris อีกเกมหนึ่งในเวอร์ชั่นหลอก 3D.

ข้อสรุป

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

ใช่มันคือ Quake II ในเว็บเบราว์เซอร์ดังนั้นตอนนี้มันชัดเจนมากว่าด้วย HTML5 แอปพลิเคชันเว็บที่ก้าวล้ำจะเกิดมาเพื่อให้บริการผู้ใช้อินเทอร์เน็ตหลายพันล้านคน มันเร็วพัฒนาและเปลี่ยนโลกไวด์เว็บ คำถามคือคุณจะใช้ HTML5 ที่เปลี่ยนแปลงเกมนี้อย่างไร?

เราชอบที่จะได้ยินความคิดของคุณ!