סליידר הינו אחד הדברים השימושיים ביותר והבסיסיים ביותר בעבודת תכנות צד לקוח. הסליידר מאפשר לכם תצוגה יפה של תמונות מתחלפות ויש סליידרים מתקדמים יותר המשלבים תנועה של טקסטים על גבי כל סליידר(תמונה). בפוסט הזה אלמד איך לבנות סליידר בסיסי בCSS מה שלא היה נהוג לפני שנים בודדות. ואולי עדיין לא נהוג בגלל גרסאות דפדפנים מסויימים אבל CSS הולך ומתקדם וכן הדפדפנים השונים ואם יש את האפשרות חשוב שנדע אותה (אגע בנושא זה עוד בהמשך הפוסט).
צפו בוידאו וראו כיצד עובד הסליידר ב- CSS.
אפשרויות שונות ליישום סליידר
ברוב המקרים אנחנו נמצא סליידרים שנכתבו ב JAVASCRIPT \ JQUERY , גם רוב ההסברים בנושא סליידרים הם בשפה הנ"ל, תוכלו לכתוב בעצמכם סליידר בJS , שזו משימה לא כלכך פשוטה למתחילים(תלוי ברמת הסליידר) אבל עדיין אפשרית וכן עובדת בכל הדפדפנים השונים.
מה שעוד אפשר לעשות זה להוריד סליידר קיים, להטמיע אותו באתר ולא תצטרכו לטבול את ידכם בקוד ויהיה לכם סליידר מקצועי מאוד.
מי שכן רוצה ללכלך את ידיו, אני מציע שבהתחלה יעשה את הסליידר בCSS. וזה מה שאלמד הפוסט בהמשך, רק לפני זה קצת רקע על אפשרות זו. CSS3 הנה הגרסה המתקדמת של CSS שהושקה באמצע 2012, מציעה לנו אפשרויות שונות של אנימציות ותלת מימד. בעזרת אפשרויות אלו נוכל לבנות סליידר בלי שום צורך בJS. עדיין אין הרבה הסברים בנושא זה מכוון שרוב המתכנתים הטובים לא יעשו סליידר בCSS וכן זה תחום חדש אז הפוסט הזה כנראה בין היחידים שיסבירו את האפשרות הזו לעומק.
כיצד מתחילים לבנות סליידר בCSS
ראשית עליכם לדעת:
ב CSS3 אנחנו נשתמש במספר רכיבים שונים:
- ANIMATION
- KEYFRAMES@
מי שלא מכיר את הרכיבים הללו יכול לגשת לפוסט הקודם שלי
בעזרת רכיבים אלו נוכל ליצור תנועה של אובייטקים. ממליץ לדעת כיצד הם עובדים ואז יהיה לכם מאוד קל להבין איך הסליידר מיושם.
סליידר ב CSS - שלב ראשון
השלב הראשון זה לבנות את תבנית הHTML . זוהי התבנית שבחרתי ליצור על מנת להציג לכם את הסליידר, אני בחרתי להציג את התבנית הזו (אפשר גם לעשות זאת בדרכים אחרות כמובן):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS בניית סליידר ב</title>
<link rel="stylesheet" type="text/css" href="myslide.css">
</head>
<body>
<div class="slider">
<img class="one" src="slide1.jpg" alt="slide" />
<img class="two" src="slide2.jpeg" alt="slide" />
<img class="three" src="slide3.jpeg" alt="slide" />
<img class="four" src="slide4.jpeg" alt="slide" />
</div>
</body>
</html>
כמו שאתם יכולים לראות אנחנו מקבלים כאן תצוגה של תמונות אחת מתחת לשניה, בשביל לסדר אותם יפה, אחת מתחת לשניה בכן במרכז הדף, נוסיף את העיצוב הזה:
body
{
margin: 0 auto;
width: 1080px;
text-align: center;
}
.slider
{
position: absolute;
width: 500px;
height: 300px;
overflow: hidden;
right: 37%;
}
.slider img
{
position: absolute;
right: 10%;
}
כל מה שנשאר לנו לעשות זה להוסיף את כמה שורות CSS עם רכיב האנימציה ולנסות לדייק בתזמונים של התמונות המתחלפות. זה הקוד שיש להוסיף בהמשך מסמך ה-CSS : חשוב לשים לב על פרקי הזמן של כל אנימציה. זהו משהו שאתם צריכים לדייק בו על מנת שהסליידר יהיה בתזמון נכון ולא יהיה בלגן בתמונות המתחלפות.
.four
{
opacity: 1;
-webkit-animation: slide_one 4s infinite;
animation: slide_one 4s infinite;
}
@keyframes slide_one
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes slide_one
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
.three
{
opacity: 1;
-webkit-animation: slide_two 4s linear 1s infinite;
animation: slide_two 4s linear 1s infinite;
}
@keyframes slide_two
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes slide_two
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
.two
{
opacity: 1;
-webkit-animation: slide_three 4s linear 2s infinite;
animation: slide_three 4s linear 2s infinite;
}
@keyframes slide_three
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes slide_three
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
.one
{
opacity: 1;
-webkit-animation: slide_four 4s linear 3s infinite;
animation: slide_four 4s linear 3s infinite;
}
@keyframes slide_four
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes slide_four
{
0% {opacity:1;}
25% {opacity:0;}
50% {opacity:0;}
75% {opacity:0;}
100% {opacity:1;}
}
יש לך מה להגיד? אשמח לתגובה