בסרטון הבא נראה כמה דוגמאות לאפקטים מגניבים עם תמונות.
הקודים שבסרטון:
לאפקט הראשון,
.my-img:hover{
--flex-grow: 1;
--flex-shrink: 0;
}
.my-img{
transition: 0.5s;
}
לאפקט השני,
.my-section:hover{
--flex-grow: 1;
--flex-shrink: 0;
}
.my-section{
transition: 0.5s;
}
.my-inner{
opacity: 0;
transition: 0.5s;
transition-delay: 1s;
}
.my-section:hover .my-inner{
opacity: 1;
}
לאפקט השני עם אנימצייה קטנה לתוכן,
.my-section:hover{
--flex-grow: 1;
--flex-shrink: 0;
}
.my-section{
transition: 0.5s;
}
.my-inner{
opacity: 0;
transition: 0.5s;
transition-delay: 1s;
transform: translatey(50px);
}
.my-section:hover .my-inner{
opacity: 1;
transform: translatey(0);
}
לאפקט השלישי (את הקוד הזה מכניסים בתוך ווידג’ט מסוג html בתחתית העמוד),
<style>
.bg-img{
opacity: 0;
transition: 0.5s;
}
.bg-img.active{
opacity: 1;
}
.my-icon{
transform: translate(0px,200px);
transition: 0.5s;
}
.my-icon:hover{
transform: translate(0px,0px);
}
</style>
בקוד הבא יש להוסיף בתחילת הקוד ובסופו את התגיות <script> </script>
document.querySelector(".my-icon1").onmouseover = function(){
document.querySelector(".bg-img1").classList.add("active");
};
document.querySelector(".my-icon1").onmouseleave = function(){
document.querySelector(".bg-img1").classList.remove("active");
};
document.querySelector(".my-icon2").onmouseover = function(){
document.querySelector(".bg-img2").classList.add("active");
};
document.querySelector(".my-icon2").onmouseleave = function(){
document.querySelector(".bg-img2").classList.remove("active");
};
document.querySelector(".my-icon3").onmouseover = function(){
document.querySelector(".bg-img3").classList.add("active");
};
document.querySelector(".my-icon3").onmouseleave = function(){
document.querySelector(".bg-img3").classList.remove("active");
};
document.querySelector(".my-icon4").onmouseover = function(){
document.querySelector(".bg-img4").classList.add("active");
};
document.querySelector(".my-icon4").onmouseleave = function(){
document.querySelector(".bg-img4").classList.remove("active");
};
7 תגובות
משום מה הסרטון בעמוד הזה לא מופיע…
תרענן את העמוד
והסרטון יעלה!
רוני תודה רבה ההדרכות שאתה מעלה פשוט מדהימות!!!
מדהים!
איך מתאימים כזה דבר למובייל? אפשרי בכלל?
באפקט השלישי איפה אני אמור להוסיף את התמונות המוסתרות?
תודה רבה ממש מגניב!!!
קצת הסתבכתי עם האחרון הוא לא עובד לי אפשר טיפה יותר פרוט
הדרכה יפה!
באתר של בן עמי הם הצליחו לעשות שהתמונה הגדולה במעבר עכבר גם גדלה עם אפקט קן ברנס בעדינות,
וגם- התמונות כפי שהן מופיעות בעמודות- ממוקדמות בצורה מאוד מדויקת לפי המיקום של התמונה הגדולה כשהיא נפתחת לכל האורך.
יש מצב להרחבה קטנה על שתי הנקודות האלו?
עובד מושלם!!
תודה!