Move center element to corner

Navigation
0

I have a simple page with few elements: logo, below has the slogan, below has a ul with social network icons and an arrow that will trigger some script.

I'd like to keep all these elements centered in the center of the screen, vertically and horizontally. Except the arrow, which should be centered horizontally, but in the page footer.

It turns out that there are many resolutions and I would like these elements to always be centralized according to each user's resolution that they access. So far so good.

I need to, when the user clicks the down arrow, move the logo to the top and left of the page. As well as lowering the arrow so that it becomes invisible on the user's screen, move the social network icons to the footer, but to the right, and let the other elements receive fadeOut.

However, for elements to be moved, they need "position: absolute / fixed". How could I make the elements position as I want and move them, with animate, to where I want?

Here is a piece of 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>
    
asked by anonymous 05.04.2015 / 20:59

1 answer

1

As far as I understand, your problem is that you need position:absolute/fixed to do the animation and can not centralize the elements using these properties.
If so, I suggest a solution where you can centralize elements with position: absolute 

#elemento{
 position: absolute;
 left: 50%;
 margin-left: -150px; /*Sempre a metade da largura do elemento*/
 width: 300px;
 height: 300px;
}

<div id="elemento">
</div>
    
06.04.2015 / 00:52
Show products by category parameter in a more optimized way Listview fill the entire screen