כיצד ליצור אפקט ריחוף של תמונה ב-CSS

אפקטי ריחוף של תמונה יכולים להוסיף רמה נוספת של ליטוש לאתר שלך. הם יוצרים אפקט חלק, מה שהופך את גלריות התמונות או הקרוסלות לנעימים יותר לניווט. החלק הטוב ביותר הוא שאתה יכול ליצור את האפקטים האלה רק עם CSS וללא JavaScript.

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

יצירת HTML עבור התמונות

התחל ביצירת index.html קובץ בתוך תיקיה ריקה במחשב שלך, ואז פתח את הקובץ עם עורך טקסט. בתוך הקובץ, צור את שלד ה-HTML והוסף את הסימון הבא בתוך תגי הגוף הפותח והתגיות הסוגרות:

<divמעמד="רֶשֶׁת">
<divמעמד="מעטפת תמונה">
<imgמעמד="לְטַשׁטֵשׁ"src=" https://picsum.photos/500?random=1"alt="">
<divמעמד="תוכן דוהה">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. מודעת Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divמעמד="מעטפת תמונה">
<imgמעמד="טשטוש זום"src=" https://picsum.photos/500?random=2"alt="">





instagram viewer

<divמעמד="תוכן דוהה">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. מודעת Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divמעמד="מעטפת תמונה">
<imgמעמד="לְטַשׁטֵשׁ"src=" https://picsum.photos/500?random=3"alt="">
<divמעמד="החלק משמאל לתוכן">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. מודעת Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divמעמד="מעטפת תמונה">
<imgמעמד="אפור"src=" https://picsum.photos/500?random=3"alt="">
<divמעמד="החלק משמאל לתוכן">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. מודעת Soluta
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

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

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

הוספת CSS בסיסי

כעת לאחר שיצרת את ה-HTML, הגיע הזמן לסגנן אותו עם CSS. ליצור style.css קובץ וקישור לגיליון הסגנונות הזה מקובץ ה-HTML שלך, בתוך ה- סָעִיף:

<קישורrel="גיליון סגנונות"href="style.css">

בתוך שלך style.css קובץ, הדבר הראשון שאתה צריך לעשות הוא לאפס את השוליים בגוף לאפס ולהגדיר קצת שוליים תחתונים:

גוּף {
שולים: 0;
שוליים-תחתית: 20rem;
}

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

.רֶשֶׁת {
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: חזור(התאמה אוטומטית, מינימום מקסימום(300פיקסלים, 1fr));
}

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

.image-wrapper {
עמדה: קרוב משפחה;
הצפה: מוּסתָר;
}

השלב הבא הוא עיצוב התמונה. הצג את התמונה כאלמנט בלוק, הפוך אותה לרוחב המיכל כולו, והצב אותה מותאמת במרכז המיכל שלה:

.image-wrapper > img {
לְהַצִיג: לַחסוֹם;
רוֹחַב: 100%;
יחס גובה-רוחב: 1 / 1;
התאמה לאובייקט: כיסוי;
מיקום אובייקט: מֶרְכָּז;
}

באשר לטקסט, מקם אותו במרכז ותן צבע רקע שקוף ואפור בהיר:

.image-wrapper > .תוֹכֶן {
עמדה: מוּחלָט;
הַבלָעָה: 0;
גודל גופן: 2rem;
ריפוד: 1rem;
רקע כללי: rgba(255, 255, 255, .4);
לְהַצִיג: לְהַגמִישׁ;
align-items: מֶרְכָּז;
להצדיק-תוכן: מֶרְכָּז;
}

שמור את קובץ ה-CSS ופתח index.html בדפדפן שלך. אתה אמור למצוא עמוד דומה לזה שבתמונה למטה.

הגדרת המעבר על התמונות והטקסטים

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

.image-wrapper > img,
.image-wrapper > .תוֹכֶן {
מַעֲבָר: 200גברתקלות-in-out;
}

המשמעות היא שכל אפקטי המעבר (כלומר דהייה, זום וטשטוש) יימשכו 200 אלפיות שניות ויהיו בעלי אותה עקומת תזמון.

אנימציית דה-אין וטשטוש

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

.image-wrapper > .תוֹכֶן.לִדעוֹך {
אֲטִימוּת: 0;
}
.image-wrapper:לְרַחֵף > .תוֹכֶן.לִדעוֹך {
אֲטִימוּת: 1;
}

אם תשמור את הקובץ ותבדוק את הדפדפן שלך, תראה את הנפשת הדהייה בתוקף. אבל אולי גם תשימו לב שהטקסט קצת קשה לקריאה (אם התמונה חדה ובעלת ניגודיות רבה). נזכיר שלכל התמונות יש גם שם מחלקה לְטַשׁטֵשׁ. זה נועד לטשטוש התמונות כדי להוסיף קצת ניגוד נחוץ בינן לבין הטקסט:

עטיפת תמונה:לְרַחֵף > img.לְטַשׁטֵשׁ {
לְסַנֵן: לְטַשׁטֵשׁ(5פיקסלים)
}

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

הוספת אפקטים אחרים

האפקטים האחרים הם החלקת הטקסט משמאל, הגדלה של התמונה והוספת גווני אפור לתמונה. להלן הקוד להשגת שלושת האפקטים:

.image-wrapper > .תוֹכֶן.החלקה-שמאלה {
שינוי צורה: translateX(100%)
}
.image-wrapper:לְרַחֵף > .תוֹכֶן.החלקה-שמאלה {
שינוי צורה: translateX(0%)
}
.image-wrapper:לְרַחֵף > img.אפור {
לְסַנֵן: גווני אפור(1)
}
.image-wrapper:לְרַחֵף > img.לְטַשׁטֵשׁ {
לְסַנֵן: לְטַשׁטֵשׁ(5פיקסלים)
}
.image-wrapper:לְרַחֵף > img.תקריב {
שינוי צורה: סוּלָם(1.1)
}

שמור את הקובץ ולאחר מכן עבור אל הדפדפן שלך ורחף מעל כל תמונה. אתה אמור לראות את ההשפעות השונות בפעולה.

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

CSS Grid ו-Flexbox

CSS Grid ו-Flexbox הן שתי תכונות המאפשרות לך ליצור פריסות פנטסטיות לאתר שלך. אתה יכול ליצור כמעט כל פריסה שתרצה בקלות ולהתאים אישית את השורות והעמודות לפי טעמך. העמודות גם יהיו רספונסיביות כברירת מחדל. למידה מתי להשתמש באחד על פני השני יעזור לך להיות מפתח CSS מוביל באחוז אחד.