48 הדגמות HTML5 / CSS3 אכזריות

אנימציה מצוירת בד HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אני לוקח את הפוסט הזה כדי לענות על שאלה ששאלת לאחרונה בתגובות המאמר:

מתי זמן טוב להתחיל לעצב באופן מלא עם HTML5?

ובכן, האמת, זה תלוי ביעד שאליו אתה מכוון. אם אינך מתכנן שהמבקרים שלך ישתמשו ב- Internet Explorer (למשל: דף תוכנת Mac) אז התחל מיד עם HTML5, אך אם אתה זקוק לאנשים עם IE שיראו את האתר שלך, מוטב שתמתין ...

בכניסה, הרבה אחרי הקפיצה 48 הדגמות של HTML5 מדהימות וראויות להיראות. נהדר זה קטן.

מקור | הונג קיאט

aאנימציה udioburst

אנימציה נוחה ופנטסטית שנוצרה עם קנבס ותג שמע של HTML5.

אנימציה של פרץ שמע HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

בריכת כדורים

מוצג באירוע הקלט / פלט האחרון של Google, הדגמה זו מראה לך עד כמה יכול להיות HTML5 דינמי.

מאגר כדורים HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

בלוב סאלד

יצור שנוצר ב- HTML5 שיענג אותך.

blob sallad HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

בומומו

באמצעות Bomomo ניתן לצפות בתנועות אטומיות שונות המדומות עם HTML5.

bomomo HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

כדור דפדפן

תתפלא עם כדור HTML5 'חוצה דפדפנים' זה.

כדור דפדפן HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

בועות

תיהנו על ידי יצירת בועות צפות אינסופיות בצבעים שונים.

בועות HTML5 ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אנימציה מצוירת בד

סרט מצויר HTML5 פשוט ומצחיק שעוזר לכם להבין מה יכול אלמנט הקנבס של HTML5 לעשות.

אנימציה מצוירת בד HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

קולקלוק

שעון אנלוגי נחמד וניתן להתאמה אישית שנבנה על ידי HTML5 ו- JavaScript.

coolclock HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

Flickr PS3 מצגת

צפה בתמונות Flickr שלך עם שקופיות בסגנון PS3 בדפדפן האינטרנט.

flickr ps3 מצגת הצגת HTML5: 48 הדגמות פוטנציאליות להריגת פלאש

פולארויד אינטראקטיבי

הדגמה אינטראקטיבית שעובדת די דומה לממשק מולטי טאץ '.

פרוטוקול HTML5 אינטראקטיבי של פולארויד: 48 הדגמות פוטנציאליות להריגת פלאש

זיקוקים של JS

תיהנו מרגע הזיקוקים עם כוח המשיכה והמהירות המועדפים עליכם, מופעל באמצעות HTML5 ו- Javascript.

js זיקוקים HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

קלידוסקופ

קליידוסקופ HTML5 יפהפה מאוד ועתידני.

קליידוסקופ HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

חלקיקים נוזליים

אנימציית חלקיקים רגישה המגיבה על בסיס תנועת העכבר שלך.

חלקיקים נוזליים HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

מסמרייזר

הדגמת HTML5 רגישה ומצטיינת נוספת המציגה כיצד אלמנטים קרובים מגיבים איתך בתנועת העכבר.

מהפנט HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

ענן ערפילית

ללכת לאיבוד עם ערפילית HTML5 המופלאה הזו.

ענן ערפילית HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

Parallax

צפה בכל צורות הדו-ממד בפרספקטיבה מקבילה.

פרלקסה HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אנימציית חלקיקים

אנימציית חלקיקי HTML5 אלגנטית שיכולה להיווצר למסר המועדף עליכם.

אנימציית חלקיקים HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

להתפשט

ללכת לאיבוד עם אנימציית התפשטות אינסופית זו.

להפיץ HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

סטארפילד

אנימציה מגניבה מאוד של HTML5 Starfield שתשנה כיוון ומהירות בהתבסס על תנועת העכבר שלך.

starfield HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

הרס וידאו

לחיצה אחת לבום סרטון מנגן.

הרס וידאו HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

צורת גל

שימו לב כיצד גל הקנבס של HTML5 נע על ידי שינוי המשרעת, אורך הגל, הרוחב וכו '.

צורת גל HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אפקט 3D

מתרשם מאנימציית קנבס? זה יותר שרכיב הקנבס של HTML5 יכול לעשות, וזה נקרא אפקט תלת ממדי. מפתח יכול להסתמך על אלמנט בד, DOM ו- JavaScript כדי ליצור אפקט תלת ממדי, אשר בהמשך ניתן לפתח לאנימציה או למשחק תלת ממדי.

Canvas3D ו- Flickr

חוו חוויה תלת ממדית חדשה לגמרי עם סרט הצילום של פליקר.

canvas3d ו- flickr HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

הדמיית בד

הדמיית בד מציאותית המבוססת על HTML5.

הדמיית בד HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

מפלצת מתפתחת

התבונן במפלצת המתפתחת ליצור מסובך, אחד מיוצריה הוא HTML5.

מפלצת מתפתחת HTML5 ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

ארגז מתנות של גוגל

מנוע החיפוש הענק Google מוצג בתצוגה תלת-ממדית הניתנת להשמעה.

קופסת מתנה של גוגל HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

מגע JS

חלון ראווה איכותי וריאליסטי '3D on 2D Canvas'.

js touch HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

מצגת נתונים

אמנם ניתן להשתמש באלמנט הקנבס של HTML5 ליצירת אנימציה ואפקט תלת ממדי, אך ניתן ליישם אותו גם כדי להציג נתונים מתמטיים.

גנופלוט

Gnuplot, יישום לתכנון נתונים בגרסת HTML5.

gnuplot HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

RGraph

RGraph מספק מגוון רחב של הצגת נתונים כמו תרשים עמודות, סרגל התקדמות ותרשים מכ"ם מסורתי.

rgraph HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אפליקציית רשת

בסופו של דבר, תוך שימוש בכל האפשרויות המשולבות על ידי HTML5 ושפה אחרת, ניתן ליצור יישום או משחק אינטראקטיביים הקרובים ליישום Flash.

CanvasPaint

עד אחיו של מיקרוסופט פיינט נכנס לדפדפן האינטרנט שלך, ואביו הוא HTML5.

canvaspaint HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

CanvasMol

יישום מדעי אשר נבנה כדי לעזור לך להבין את מבנה אלמנטים מסוימים של כדור הארץ.

canvasmol HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

בונה קריקטורות

צייר תמונה מצוירת מעניינת עם בונה קריקטורות מינימלי ואינטראקטיבי זה.

בונה קריקטורות HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

גרור הכל לכאן

גרור כל מה שאתה יכול לגרור בהדגמה כדי להציג פרטים.

גרור הכל לכאן HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

מערכון גרטיק

יישום HTML5 מקורי המאפשר לך ליצור כמה שרטוטים בסיסיים שניתן לשמור בפורמט תמונה שונה כמו jpeg או png.

סקיצה גרטיקטית HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

PhysicalSketch

צייר כל מה שתרצה ותראה כיצד הם מגיבים בכוח המשיכה המדומה.

physicsketch HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

לוח סקיצה

יישום רישום HTML5 רב עוצמה המאפשר לך לצייר ולערוך את התמונה שלך באופן מדויק.

sketchpad HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

שיחות חולין

יישום אינטרנט המאשר את המיקום הגאוגרפי של הודעה הקשורה למזג האוויר שנרכש מטוויטר, ובכך יוצר אותם למפת 'מזג אוויר חברתי' מבוסס בד, טריוויאלי למדי (כאמור המחבר) אך מעניין.

smalltalk HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

משחק

3 משועמם

לעולם לא תשתעמם אם תוכל להמשיך להתחמק ממאות כדורי HTML5 בשנייה הבאה.

תצוגת HTML3 משולבת: 5 הדגמות פוטנציאליות להריגת פלאש

להיפרד

להחזיר את הכדור כדי לשבור את כל הלבנים.

פריצת HTML5 ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

קנבסקייפ

לא ממש משחק, אבל זה מדגים כיצד ניתן להשתמש ב- HTML5 לפיתוח משחק דפדפן First Person Shooting.

canvascape HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

תפוס את זה

כמה כדורים אתה יכול להתחמק כדי לקבל את הריבוע HTML5 המנצח שלך?

לתפוס את זה HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

תגובת שרשרת

שרשר את הפיצוץ כדי להשיג את המטרה, אל תתמכר.

תגובת שרשרת HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

קובייה

שחק טטריס בתצוגה תלת ממדית, מלמעלה למטה.

קוביית HTML5 לראווה: 48 הדגמות פוטנציאליות להריגת פלאש

etchaPhysics

צייר פריט כדי להעביר את הכדור לכוכב, אל תשכח מכוח המשיכה.

etchaphysics HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

משחק הרכבה

לחץ, סובב ושחרר חלקי פאזל כדי לפתור את הפאזל מבוסס HTML5 זה.

פאזל HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

חידה שקופית

החלק אל הניצחון, עוד משחק HTML5 שנבנה כדי לסחוט את מיץ המוח שלך.

פאזל שקופיות HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

אותו משחק

הסר קבוצה מסוימת כדי לזכות בקבוצה אחרת באותו צבע ובסופו של דבר תוענק לך ניצחון.

אותו משחק HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

טטריס

אחד המשחק הקלאסי ביותר שהוחזר לחיים על ידי HTML5.

tetris HTML5 חלון ראווה: 48 הדגמות פוטנציאליות להריגת פלאש

טורוס

עוד משחק טטריס בגרסת פסאודו תלת מימד.

טורוס HTML5 ראווה: 48 הדגמות פוטנציאליות להריגת פלאש


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

7 תגובות, השאר את שלך

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם.

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

  1.   צ'ופטינה דיג'ו

    הטטריס לא הולך, אני שם שני חלקים ועומד, אבל השאר מאוד שפעים מגניבים

  2.   אליסה דיג'ו

    אני אוהב את הדף הזה ... למעט המשחק הראשון. אני אוהב אותך פראן =)
    ביי נשיקה לעולם toooodooooooo

  3.   הלסיק דיג'ו

    מדהים, מרהיב. אני לא מאמין עד כמה פיתוח אתרים הגיע!

  4.   ג'ו ווגה דיג'ו

    אני לא יודע למה משייכים את המשאבים האלה ל- HTML5, זה Javascript טהור, לפני עליית פלאש, עם Javascript ניתן היה לעשות את כל הדברים האלה, היה מחקר בברצלונה שגרם לכמה אתרים שבאותה תקופה נשפו לי את הראש, הכל בכתב javascript כל כך הרבה שלמדתי מהם ועיצבתי זוג עם כדורים מקפצים והכל, איבדתי אותם לחלוטין ועדיין מתחרט. אני לא זוכר את שם הסטודיו זה היה משהו כמוך 2 או 2 אתה שהיה בשנת 2 בערך.

  5.   ASDF דיג'ו

    ג'ו וגה ... זה מראה שאין לך מושג מזוין של HTML5 ... .lol

  6.   ג'ו ווגה דיג'ו

    אולי אין לך שום רעיון HTML5 מדמם, זה נכון, אבל אתה מבלבל בין התרנגול ללול התרנגולות ולא מבדיל שפה מסביבה. אני מאתגר אותך להכין דוגמה כמו אלה בלי להשתמש ב- Javascript, רק עם html5, ותבין למה התכוונתי בפוסט שמחקתי. יתרה מכך, בחנתי את קוד המקור של הדוגמאות ויש כמה שניתן לעשות בקלות מבלי להרכיב אותו ב- html5.
    ש- html5 מביא שיפורים רבים ודברים שמקלים הרבה זה נכון, אבל זרי הדפנה של הדבר הפנטסטי שמוצג בדף זה הם Javascript.

  7.   סנטיאגו ברצ'טה דיג'ו

    אני מעוניין לערוך מצגות מהסוג הזה ... יש לך הדרכה או דף עם משאבים ??? תודה!!!