//- Download the Free scene from https://www.mockupcloud.com/free/kitchen-ready-header-free-scene
.text-container
h1.animated.slow.fadeInDown Stand Out
h5.animated.slow.fadeInUp HERO / HEADER IMAGE
a.animated.slow.fadeIn.link-btn(href="https://www.mockupcloud.com/free/kitchen-ready-header-free-scene") Free Download
#scene.main-bg(style='background: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0.4) 100%), url(https://i.ibb.co/rcdHbJY/background.jpg) no-repeat center center fixed;')
div.obj-cont(v-if='items!=null' v-for='item in items' :id="`${item.name}`" :class="`${item.name}-cont`" :style="{ 'left': item.left.toString() + '%', 'top': item.top.toString() + 'em' }")
img.animated.slow.fadeIn.shadow.obj(:src="`${item.links[0].link}`" :class="[item.name, item.animation]" :style="{ 'width': item.width.toString() + '%', 'z-index': item.zIndex }")
img.animated.slow.fadeIn.no-shadow.obj(:src="`${item.links[1].link}`" :class="[item.name, item.animation]" :style="{ 'width': item.width.toString() + '%', 'z-index': item.zIndex.toString() }")
View Compiled
new Vue(
el: '#scene'
data: items: [
{
name: 'bi-fold-brochure',
top: 31,
left: 16,
width: 37,
zIndex: 2,
animation: 'fadeInUp',
links: [
{ link: 'https://i.ibb.co/TH1Ydjt/bi-fold-brochure-shadow.png'}
{ link: 'https://i.ibb.co/0cKmsmV/bi-fold-brochure.png'}
]
}
{
name: 'coffee',
top: 1,
left: 63,
width: 20,
zIndex: 1,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/0B7rqqL/coffee-shadow.png'}
{ link: 'https://i.ibb.co/bWWDhz2/coffee.png'}
]
}
{
name: 'cup',
top: 24,
left: 55,
width: 31,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/gTMqzPK/cup-shadow.png'}
{ link: 'https://i.ibb.co/S36yTWL/cup.png'}
]
}
{
name: 'cup-coffee',
top: 23.5,
left: 54.5,
width: 32,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/G9Y09Sw/cup-coffee.png'}
{ link: 'https://i.ibb.co/G9Y09Sw/cup-coffee.png'}
]
}
{
name: 'plate-doughnut-1',
top: -13,
left: 16,
width: 40,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/86Q2QH1/plate-doughnut-1-shadow.png'}
{ link: 'https://i.ibb.co/1vH4GmR/plate-doughnut-1.png'}
]
}
{
name: 'plate-doughnut-2',
top: -13,
left: 16,
width: 40,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/Gkq19rK/plate-doughnut-2-shadow.png'}
{ link: 'https://i.ibb.co/9c1jgrF/plate-doughnut-2.png'}
]
}
{
name: 'plate-doughnut-3',
top: -13,
left: 16,
width: 40,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/qkYmD62/plate-doughnut-3-shadow.png'}
{ link: 'https://i.ibb.co/WxM1JbC/plate-doughnut-3.png'}
]
}
{
name: 'plate',
top: -12,
left: 16,
width: 39,
zIndex: 1,
animation: 'fadeInLeft',
links: [
{ link: 'https://i.ibb.co/hMHFYLs/plate-shadow.png'}
{ link: 'https://i.ibb.co/949KgRn/plate.png'}
]
}
{
name: 'saucer-milk',
top: 5,
left: 51,
width: 19,
zIndex: 2,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/17TPxxR/saucer-milk.png'}
{ link: 'https://i.ibb.co/17TPxxR/saucer-milk.png'}
]
}
{
name: 'saucer',
top: 5,
left: 51,
width: 19,
zIndex: 1,
animation: 'fadeInDown',
links: [
{ link: 'https://i.ibb.co/rGGz8kq/saucer-shadow.png'}
{ link: 'https://i.ibb.co/TLVJNhd/saucer.png'}
]
}
{
name: 'sauser',
top: 23,
left: 21,
width: 18,
zIndex: 1,
animation: 'fadeInLeft',
links: [
{ link: 'https://i.ibb.co/gPXLB4C/sauser-shadow.png'}
{ link: 'https://i.ibb.co/zhM2F5L/sauser.png'}
]
}
{
name: 'spoon',
top: 20,
left: 74,
width: 10,
zIndex: 1,
animation: 'fadeInRight',
links: [
{ link: 'https://i.ibb.co/Qnn48bp/spoon-shadow.png'}
{ link: 'https://i.ibb.co/r480c48/spoon.png'}
]
}
{
name: 'tea-plate',
top: 23.5,
left: 54.5,
width: 32,
zIndex: 1,
animation: 'fadeInUp',
links: [
{ link: 'https://i.ibb.co/dp7BXqL/tea-plate-shadow.png'}
{ link: 'https://i.ibb.co/89t2kxH/tea-plate.png'}
]
}
])
a = 9
## Removing the resizing border while moving the object
$('.obj-cont').draggable
start: ->
$(this).find(".obj").css("z-index", a++);
return
drag: ->
return
stop: ->
return
View Compiled
