פנס עוצמתי אש
חנוכה
בול הזמן המתאים
להאיר את כל הדברים הטובים
שהתחבאו.
הכנתי לך פנס
וואחד עוצמתי
מוזמנת להשתמש בו
ולהוציא בעזרתו לאור
את כל הפרויקטים
והלקוחות השווים שלך.
נראה לעולם את היכולות שלך 😊
קדימה —-
הוסיפי באלמנטור אלמנט HTML.
לאלמנט ה HTML הכניסי את הקוד הבא:
<div class='lights_container'>
<main>
<div class='items'>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אשכולות
</text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
למדם
</text>
<g clip-path='url(#clip-1)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-1.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
קופודיל
</text>
<g clip-path='url(#clip-2)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-2.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
פסיפס
</text>
<g clip-path='url(#clip-3)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-5.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
PICK A DROSHO
</text>
<g clip-path='url(#clip-4)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-4.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-5'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
חילוקא
</text>
<g clip-path='url(#clip-5)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-6.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-6'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
Heart of Marriage
</text>
<g clip-path='url(#clip-6)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-7.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-7'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אסתר מילר
</text>
<g clip-path='url(#clip-7)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-8.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-8'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
פנורמה
</text>
<g clip-path='url(#clip-8)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-9.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-9'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אתגר וחוויה
</text>
<g clip-path='url(#clip-9)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-10.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-10'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אמון הציבור
</text>
<g clip-path='url(#clip-10)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-11.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-11'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
לוח חם
</text>
<g clip-path='url(#clip-11)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה-12.png'></image>
</g>
</svg>
</div>
</div>
</main>
</div>
<script>
var items = []
, point = document.querySelector('svg').createSVGPoint();
function getCoordinates(e, svg) {
point.x = e.clientX;
point.y = e.clientY;
return point.matrixTransform(svg.getScreenCTM().inverse());
}
function Item(config) {
Object.keys(config).forEach(function (item) {
this[item] = config[item];
}, this);
this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));
this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));
}
Item.prototype = {
update: function update(c) {
this.clip.setAttribute('cx', c.x);
this.clip.setAttribute('cy', c.y);
},
mouseMoveHandler: function mouseMoveHandler(e) {
this.update(getCoordinates(e, this.svg));
},
touchMoveHandler: function touchMoveHandler(e) {
e.preventDefault();
var touch = e.targetTouches[0];
if (touch) return this.update(getCoordinates(touch, this.svg));
}
};
[].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {
items.push(new Item({
el: item,
svg: item.querySelector('svg'),
clip: document.querySelector('#clip-'+index+' circle'),
}));
});
</script>
<style>
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
circle {
transform-origin: 50% 50%;
transform: scale(0);
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svg-text {
fill: white;
text-anchor: middle;
font-size: 25px;
}
image {
transform: scale(1.1);
transform-origin: 50% 50%;
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.items {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 200px;
height: 150px;
margin: 5px;
cursor: pointer;
background-color: #3b3e46;
border-radius: 2px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.02), inset 0 0px 0px 1px rgba(0, 0, 0, 0.07);
transform: translateZ(0);
}
.item:hover circle,
.item:hover image {
transform: scale(1);
}
</style>
עכשיו,
התאימי את הקוד
לפרויקטים שאת רוצה להציג אצלך.
העבודה צריכה להיות עדינה ומדויקת
מחיקת תו בודד מיותר
יכולה להרוס את האלמנט כולו!
שימי לב על מבנה הקוד שחוזר על עצמו שוב ושוב
(הוא נמצא כמה פעמים ברצף – לפי מספר הפרויקטים
חוזר על עצמו עבור כל פרויקט):
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אשכולות
</text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://courses.goapp.co.il/wp-content/uploads/2022/12/לכידה.png'></image>
</g>
</svg>
</div>
דאגי שקטע הקוד הזה ישאר
כמספר הפרויקטים שאת רוצה להציג.
עכשיו –
עדכני כל קטע קוד כזה
(קטע קוד שמיועד להצגת פרויקט בודד)
מה שאת צריכה לעשות זה –
לשנות את שם הפרויקט (או הלקוח)
ואת ה URL לתמונה
זהו :)
הקסם מתחיל…
בהצלחה!
תמשיכי להוציא פרויקטים אלופים לאור
ולשתף אותי בהם
שלך,
רבקי
6 תגובות
אהבתי
תודה איטה :)
כיף שאהבת!
היי,
האם אפשר להוסיף קישורים לפרויקטים?
תודה.
רבקי אלופה!!
אפקט מהממם!
אם רוצים שכל קוביה תוביל גם לעמוד הפרויקט אז צריך לעטוף בתגיות A ולשנות את הקוד בהתאם… , כן?
וואו מושלם!
אפרת –
בדיוק :)
ד"ש!
חני –
אפרת בדיוק פירטה על זה
את יודעת לכתוב קוד HTML?
אביטל –
כיף לשמוע (לקרוא :)