Tenho um página simples com poucos elementos: logomarca, abaixo tem o slogan, abaixo tem um ul com ícones de rede social e uma seta que disparará algum script.
Eu gostaria de manter centralizado todos esses elementos no centro da tela, vertical e horizontalmente. Exceto a seta, que deve ficar centralizada horizontalmente, mas no rodapé da página.
Acontece que existem muitas resoluções e eu gostaria que esses elementos ficassem sempre centralizados de acordo com cada resolução do usuário que acessar. Até aí tudo bem.
Eu preciso que, quando o usuário clicar na seta pra baixo, mover a logo para o topo e à esquerda da página. Assim como descer a seta para que fique invisível na tela do usuário, mover os ícones de rede social para o rodapé, mas à direita, e que os outros elementos recebam fadeOut.
Porém, para que os elementos possam ser movidos, precisam de "position:absolute/fixed". Como eu poderia fazer com que os elementos fiquem posicionados como eu quero e movê-los, com animate, para onde quero?
Segue um pedaço do código HTML:
<div id="logo-container">
<img id="logo" src="http://<?= $base?>img/logo.png" />
</div>
<div id="etc">
<h3>Slogam</h3>
<hr class="intro-divider">
<h4>Compartilhe</h4>
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/SBootstrap"><i class="fa fa-twitter fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/google-plus-ico.png" /></span></a>
</li>
<li>
<a href=""><i class="fa fa-github fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/facebook-ico.png" /></span></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name"><img src="http://<?= $base?>img/twitter-ico.png" /></span></a>
</li>
</ul>
</div>
<div id="seta">
<a href=""><img src="http://<?= $base?>img/seta-baixo-ico.png" /></a>
</div>