You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.8 KiB
75 lines
1.8 KiB
|
|
$(document).ready(()=>{
|
|
|
|
const monitoring = $('.monitoring')
|
|
const phone = monitoring.find('.phone')
|
|
const clouds = monitoring.find('.cloud')
|
|
const content = phone.find('.content')
|
|
const action = content.find('.button')
|
|
const firstChild = content.find('.cloud').first()
|
|
|
|
const delay = 1200
|
|
let timer = 0
|
|
let cloudCount = 0
|
|
|
|
const people = monitoring.find('.people')
|
|
const luca = monitoring.find('.people.luca')
|
|
const sarah = monitoring.find('.people.sarah')
|
|
const fabio = monitoring.find('.people.fabio')
|
|
const maria = monitoring.find('.people.maria')
|
|
const lucia = monitoring.find('.people.lucia')
|
|
const paolo = monitoring.find('.people.paolo')
|
|
|
|
luca.css({'top': '425px','left': '370px'})
|
|
sarah.css({'top': '415px','left': '390px'}).fadeIn()
|
|
maria.css({'top': '180px','left': '135px'})
|
|
fabio.css({'top': '150px','left': '110px'}).fadeIn()
|
|
lucia.css({'top': '340px','left': '250px'}).fadeIn()
|
|
paolo.css({'top': '240px','left': '370px'}).fadeIn()
|
|
|
|
setTimeout(()=>{
|
|
paolo.fadeOut(800)
|
|
}, delay)
|
|
|
|
setTimeout(()=>{
|
|
lucia.fadeOut(800)
|
|
}, delay*2)
|
|
|
|
setTimeout(()=>{
|
|
fabio.fadeOut(800)
|
|
}, delay*3)
|
|
|
|
setTimeout(()=>{
|
|
|
|
clouds.each((index,elem)=>{
|
|
const el = $(elem)
|
|
|
|
if(!el.hasClass('scroll')){
|
|
$('#notify1')[0].play()
|
|
el.fadeIn(500)
|
|
}
|
|
})
|
|
}, delay*6)
|
|
|
|
|
|
|
|
action.on('click', (e)=>{
|
|
|
|
const elem = $(e.currentTarget)
|
|
const show = $('#' + elem.data('cloud'))
|
|
let offset = 0
|
|
|
|
$('#notify1')[0].play()
|
|
|
|
show.fadeIn(400,()=>{
|
|
if(show.hasClass('scroll')){
|
|
offset = show.offset().top - content.offset().top - 20
|
|
firstChild.animate({'margin-top': '-' + offset},400)
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|