הנושאים החמים
הנושאים החמים
חנוכה
בול הזמן המתאים
להאיר את כל הדברים הטובים
שהתחבאו.
הכנתי לך פנס
וואחד עוצמתי
מוזמנת להשתמש בו
ולהוציא בעזרתו לאור
את כל הפרויקטים
והלקוחות השווים שלך.
נראה לעולם את היכולות שלך
קדימה —-
הוסיפו באלמנטור אלמנט HTML.
לאלמנט ה HTML הכניסי את הקוד הבא:
עכשיו,
התאימו את הקוד
לפרויקטים שאתם רוצים להציג אצלכם.
העבודה צריכה להיות עדינה ומדויקת
מחיקת תו בודד מיותר
יכולה להרוס את האלמנט כולו!
שימו לב על מבנה הקוד שחוזר על עצמו שוב ושוב
(הוא נמצא כמה פעמים ברצף – לפי מספר הפרויקטים
חוזר על עצמו עבור כל פרויקט):
דאגו שקטע הקוד הזה ישאר
כמספר הפרויקטים שאתם רוצה להציג.
עכשיו –
עדכנו כל קטע קוד כזה
(קטע קוד שמיועד להצגת פרויקט בודד)
מה שצריך לעשות זה –
לשנות את שם הפרויקט (או הלקוח)
ואת ה URL לתמונה
זהו
הקסם מתחיל…
בהצלחה!
תמשיכו להוציא פרויקטים אלופים לאור
איך יצא?
בול הזמן המתאים
להאיר את כל הדברים הטובים
שהתחבאו.
הכנתי לך פנס
וואחד עוצמתי
מוזמנת להשתמש בו
ולהוציא בעזרתו לאור
את כל הפרויקטים
והלקוחות השווים שלך.
נראה לעולם את היכולות שלך
קדימה —-
הוסיפו באלמנטור אלמנט HTML.
לאלמנט ה 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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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://appupgo.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>עכשיו,
התאימו את הקוד
לפרויקטים שאתם רוצים להציג אצלכם.
העבודה צריכה להיות עדינה ומדויקת
מחיקת תו בודד מיותר
יכולה להרוס את האלמנט כולו!
שימו לב על מבנה הקוד שחוזר על עצמו שוב ושוב
(הוא נמצא כמה פעמים ברצף – לפי מספר הפרויקטים
חוזר על עצמו עבור כל פרויקט):
HTML:
<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://appupgo.co.il/wp-content/uploads/2022/12/לכידה.png'></image>
</g>
</svg>
</div>דאגו שקטע הקוד הזה ישאר
כמספר הפרויקטים שאתם רוצה להציג.
עכשיו –
עדכנו כל קטע קוד כזה
(קטע קוד שמיועד להצגת פרויקט בודד)
מה שצריך לעשות זה –
לשנות את שם הפרויקט (או הלקוח)
ואת ה URL לתמונה
זהו
הקסם מתחיל…
בהצלחה!
תמשיכו להוציא פרויקטים אלופים לאור
איך יצא?
