אנו ממשיכים בסבב של קוד CSS ו- HTML שניתן ליישם באתר האינטרנט שלנו בכדי לתת לו את הטאץ 'המיוחד שבאמצעותו ניתן להבדיל אותו מהשאר. הודות לשליטה + c בתוספת שליטת + v שאנחנו יכולים יש בידנו קוד שיהפוך את האינטרנט למוכן להתפרסם בפיתוח לאחר שביליתי ימים או שבועות בבדיקה.
עכשיו הגיע הזמן ל -27 מחוונים ב- HTML וב- CSS שיאפשרו לנו להכין את המרחב בו בדרך כלל אנו משלבים הרבה תוכן בכמה פיקסלים בריבוע. המחוונים האלה נעים על כרטיס, השוואתי, מסך מלא, מגיב והפשוטה ביותר, אך יחד עם זאת גם מאוד אלגנטית. אנחנו הולכים עם 27 מחוונים שלא ישאירו אף אחד אדיש, במיוחד הלקוח או המשתמש שעובר באתר שלך לקרוא תוכן, לרכוש מוצר או פשוט להשתמש במחוון השוואתי כדי להשוות תמונה לפני ואחרי.
מסכים על קלפים
מחוון מאוד אינטואיטיבי ב- HTML ו- CSS שעוסק ב קח סדרת כרטיסים לאתר שלך שעוברים אחד לשני עם אנימציה עם סגנון נהדר. דווקא האנימציה ושיפוע הרקע מעניקות את הטאץ 'העדין הזה לקוד ה- HTML וה- CSS הזה, גם הם בולטים קצת ב- JavaScript. אלגנט היא המילה המתארת את המחוון האיכותי הזה.
מחוון כרטיס מידע
מחוון כרטיס מידע זה מקודד גם ב- HTML, CSS ו- JavaScript. זה די בערך סדרת קלפים זה לא מושך תשומת לב רבה לאנימציה, אם כי הפשטות שלה היא הערך הגדול ביותר שלה. מחוון נוסף שיש לקחת בחשבון מרשימה זו.
מחוון תמונה השוואתי
המחוון הזה הוא תועלת רבה ובוודאי שראית את זה בהמון אתרי אינטרנט שבהם משווים תמונות לפני ואחרי עם סרגל אנכי שמחליק אופקית. זוהי עזרה מצוינת להשוואות, לכן אנו הופכים אותה לאחת מהעיקריות ברשימת המחוונים הזו.
מחוון השוואתי ללא JavaScript
האיכות הנהדרת של המחוון הזה היא ש מגיע ללא JavaScriptאז תצטרך ליישם רק את קוד ה- CSS וה- HTML באתר שלך כדי לערוך השוואה נוספת. יהיה עליך להשתמש בתיבה השחורה בתחתית התמונה כדי להחליק אותה מצד אחד לצד השני כדי לראות את השוואת התמונות. לא אינטואיטיבי כמו הקודם, אבל מאוד שימושי ללא JavaScript.
מחוון תמונה השוואתי בן שלוש שכבות
שמו אומר הכל, מחליק תמונה מאפשר לך להשוות עד שלוש בכל פעם. הדוגמה שניתנה היא אחת לראות את הראש בפרופיל, אחרת להראות את השרירים ועוד מחוון כדי לראות את העצמות. היא משתמשת ב- HTML, CSS ו- JavaScript לצורך פעולתה.
מחוון תמונות וניל JS
מחוון תמונה השוואתי נוסף עם כפתור גדול שבעזרתו ניתן להחליק את התמונה מצד אחד למשנהו. מינימליסטי, עם מעט JavaScript וגימור חזותי נהדר. אחד המדהימים ביותר להשוות תמונות.
מסך מפוצל באלכסון
זה מחוון תמונה השוואתי הוא נוצר על ידי Envato Tuts ויש לו הבחנה שהמחוון ממוקם באלכסון כדי לגרום לסוגים אחרים של תחושות כאשר משווים שתי תמונות. הוא משתמש ב- JavaScript, CSS ו- HTML כדי להיות מחוון השוואתי באיכות גבוהה.
מחוון מסך מלא
הגענו לחלק של המחוונים עם מסך מלא להיפגש איתו מעבר מחוון המאופיין במעבר מבוצע על ידי אנימציה בעלת השפעה רבה. אם אתה מתכנן להציג תמונות במסך מלא ושאתה מעביר בזהירות רבה, קידוד ב- JavaScript, CSS ו- HTML.
מחוון אופקי עם פרלקסה
עבור אוהדי הפרלקסה משפיעים על המחוון הזה עם Swiper.js, HTML ו- CSS. מלבד היכולת להחליק כששני הכפתורים ממוקמים בכל צד, בצד ימין יש לנו במינימום את כל התמונות של הקרוסלה השלמה. מחוון חזותי שונה ואיכותי שלא ישאיר אף אחד שמבקר באתר שלנו אדיש.
מחוון פרספקטיבה תלת-ממדי חלק
סליידר רספונסיבי ש עקוב אחר תנועות המצביע עכבר. הוא מסוגל לגרום להשפעה גדולה של פרספקטיבה שיכולה לגרום לתחושות מעורבות אצל המבקר. אם אתה יודע להשתמש בו כראוי, אתה יכול לתת את הנגיעה המקורית והעדינה לאתר שלנו. קוד JavaScript, CSS ו- HTML לא חסר.
מחוון מסך מלא לגיבור
מחוון תמונות גיבור במסך מלא ב- HTML, CSS ו- JavaScript. שיהיה לך אפקט הקפצה בכל אנימציה זה נותן לו את זה ובאופן כללי אנו עומדים מול מחוון איכותי של מסך מלא כמו שאר הרשימה.
מחוון VELO.JS עם גבולות
אחד הבולטים כמחוון מסך מלא עם אנימציית מעבר פשוט פנטסטית. אנו ממליצים לך ללכת לראות אותו בפעולה כדי להתחיל לחשוב כיצד ליישם אותו באינטרנט. השתמש באפקטים של מהירות כדי לשפר את אותה אנימציה המשתמשת בכפתורי חץ, לחיצה בניווט ואפילו גלילה, פשוט מושלם.
מחוון אנכי רספונסיבי של CSS עם תמונות ממוזערות
אנחנו עוברים למחוונים CSS רספונסיבי למובייל איכות מעולה כמו זו. תהיה לך סדרה של תמונות ממוזערות בצד ימין שלחיצה עליה תתחיל אנימציה נופלת אנכית. אפקט נהדר המשתמש רק ב- CSS כדי להשאיר מחוון מהמיטב ברשימה זו.
Flexbox מחוון תמונה
אחר מחוון תמונה רספונסיבי עשוי עם JavaScript ושהוא יותר מפשוט להיות אלגנטי למדי. קצר, פשוט ומינימליסטי עם לא יותר מזה. זה מקומו ברשימה זו של סליידרים של Flexbox.
טשטוש תנועה עם מסנני SVG
ניסוי המדמה את ההשפעה של טשטוש תנועה בכל פעם שקופית זה הופעל. הוא משתמש במסנן טשטוש גאוס SVG ובכמה מקשי אנימציה של CSS. הקוד המשמש ב- JavaScript נועד אך ורק לדוגמא הנתונה ולפונקציונליות של המחוון.
מחוון מונפש
מחוון מונפש מגיב עם JavaScript, HTML ו- CSS. יש לנו חצים בצד ימין המאפשרים לנו לעבור על התמונות שמקורן באנימציה חיננית ותמציתית. אפקט נהדר שהושג בכל אחת מהשקופיות בכדי להבליט את עצמו. עדכני מאוד באנימציות.
מחוון תמונות עם דפוסי SVG
עוד אחד מאותם ניסויים שמנסים לשאת דפוסי SVG כדי ליצור כמה תמונות מסכה עבור מחוון CSS. זה גורם לאפקט טשטוש מרשים מאוד עם גימור נהדר. עוד אחד מאותם מחוונים כדי לעורר רגשות טובים אצל המבקר באתר האינטרנט שלנו.
מחוון שכבה פשוט
מחוון עם אחד יותר מ אנימציה מכובדת שמציע את אפקט הגל הזה בכל פעם שאנחנו לוחצים על הסמל כדי להחליק תמונה חדשה. נעשה ב- HTML, CSS ו- JavaScript הוא הופך למחוון תמונות אחר.
מחוון CSS טהור
עוד אחד מהמחוונים הפשוטים ביותר וזה CSS טהור. אחד היתרונות שלה להכניס משמאל למטה סדרת נקודות שישמשו ככפתורים להגיע לכל אחת מהתמונות שיעברו לפנינו ללא כל אנימציה מיוחדת.
מחוון קאפקייק רק CSS
El המחוון הכי מתוק ברשימה ושהוא נמצא רק ב- CSS ו- HTML. זהו אחד המיוחדים מכל הרשימה שיש בצד ימין את הווריאציות השונות של הקאפקייקס. לחץ על אחת וקאפקייק מופיע עם אנימציה נפלאה שמסתיימת באפקט הקפצה נהדר. אחד הטובים ללא ספק.
אפקט אנימציה של המחוון
אחד המחוונים האלגנטיים באנימציה ומה מצליח להדהים אותנו בשינוי הראשון. מהרגע הראשון בו נוצרת האנימציה, קוד ה- HTML, CSS וה- JavaScript שלה משאיר אותנו מופתעים. עוד אחד הטובים במגע המינימליסטי שהוא נותן.
פרוסת מחוון
Un מחוון מעבר המשתמש בכיתת הוספה פשוטה וזה מאופיין באנימציות חלקות מאוד כדי להפוך לאחד המועדפים ברשימה זו. אם אתה רוצה להבדיל את עצמך בגרסת המובייל של האינטרנט, זה אחד מהעקרונות העיקריים. הרבה מאוד מבחינה ויזואלית.
סליידר פרלקס ניו יורק
אחד היתרונות הגדולים ביותר בכך מחוון פרלקסה ב- CSS הוא שניתן להתאים אותו הרבה. המשמעות היא שניתן לשנות את הגופן, גודלו, צבעו ומהירות האנימציה. האות הראשונה של כל עיר במחרוזת מערך JavaScript חדשה מופיעה בשקופית חדשה. עוד אחד מהמחוונים היקרים של פוסט זה.
חלון קופץ
עם בסגנון מינימליסטי המחוון הזה מוצג שבו כל חלק מהתמונה יוצא עם כל שקופית. מאוד יצירתי ושונה ממה שרואים ברשימת המחוונים וזה עומד במקום שלו.
סליידר עם אפקט אדווה
Un מחוון מסך מלא אפקט נהדר עם צבעים שטוחים כדי לקבל את כל המיץ שלו. JavaScript, HTML ו- CSS למחוון נוסף עם אפקט המושך את העין.
מחוון עם תצוגה מקדימה של תמונה
מחוון GSAP עם תצוגה מקדימה של השקופיות הבאות שיוצג בפני המשתמש. מושלם לדוגמנות באתר אופנה או עיצוב.
מעברים מחוונים
אנחנו מסיימים את הרשימה עם מחוון איכותי עם אפקט בומבסטי וסדרת אנימציות שמקבלות את הטאץ 'המיוחד באתר שלנו. ניתן להפעיל את אפקט הפרלקסה.
אל תחמיץ את זה רשימת קוד CSS אחרת לכפתורים.
טוב מאוד הפוסט הזה, תודה רבה על השיתוף. עובר למועדפים ישיר ללא הפסקה.
ברכות חבר.