0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

more home screen demo

Browse source
This commit is contained in:
rolux 2011-06-04 08:20:40 +00:00
parent 744dc5620b
commit 7e916b8bdf
1 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
static/js/pandora/ui/menu.js
View file

@ -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)
@ -242,7 +273,7 @@ pandora.ui.mainMenu = function() {
}); });
} }
}) })
.appendTo($screen), .appendTo($screen),
$input = Ox.Input({ $input = Ox.Input({
width: 156 width: 156
}) })
@ -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);