more home screen demo
This commit is contained in:
parent
744dc5620b
commit
7e916b8bdf
1 changed files with 34 additions and 3 deletions
|
@ -218,8 +218,39 @@ pandora.ui.mainMenu = function() {
|
||||||
zIndex: 1000
|
zIndex: 1000
|
||||||
})
|
})
|
||||||
.appendTo(Ox.UI.$body),
|
.appendTo(Ox.UI.$body),
|
||||||
|
$reflectionImage = $('<img>')
|
||||||
|
.attr({
|
||||||
|
src: '/static/png/logo256.png'
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: '160px',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: '320px',
|
||||||
|
margin: 'auto',
|
||||||
|
opacity: 0,
|
||||||
|
MozTransform: 'scaleY(-1)',
|
||||||
|
WebkitTransform: 'scaleY(-1)'
|
||||||
|
})
|
||||||
|
.appendTo($screen),
|
||||||
|
$reflectionGradient = $('<div>')
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: '160px',
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: '320px',
|
||||||
|
height: '160px',
|
||||||
|
margin: 'auto',
|
||||||
|
backgroundImage: '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.8), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))'
|
||||||
|
})
|
||||||
|
.appendTo($screen),
|
||||||
$logo = $('<img>')
|
$logo = $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
|
id: 'logo',
|
||||||
src: '/static/png/logo256.png'
|
src: '/static/png/logo256.png'
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -233,7 +264,7 @@ pandora.ui.mainMenu = function() {
|
||||||
})
|
})
|
||||||
.bind({
|
.bind({
|
||||||
click: function() {
|
click: function() {
|
||||||
$screen.find('div').add('#screen > input').remove();
|
$screen.find(':not(#logo)').remove();
|
||||||
$logo.animate({
|
$logo.animate({
|
||||||
width: window.innerWidth + 'px'
|
width: window.innerWidth + 'px'
|
||||||
}, 500)
|
}, 500)
|
||||||
|
@ -346,7 +377,7 @@ pandora.ui.mainMenu = function() {
|
||||||
})
|
})
|
||||||
.appendTo($screen)
|
.appendTo($screen)
|
||||||
$screen.animate({opacity: 1}, 500, function() {
|
$screen.animate({opacity: 1}, 500, function() {
|
||||||
$screen.find('div').add('#screen > input').animate({opacity: 1}, 250)
|
$screen.find(':not(#logo)').animate({opacity: 1}, 250)
|
||||||
});
|
});
|
||||||
$logo.animate({width: '320px'}, 500);
|
$logo.animate({width: '320px'}, 500);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue