Animation positioning

[mika]

Hi guys,

I’m building this responsive site (concrete5 + bootstrap3 theme) with animation on its first block. –> testi2.aada.fi

I made this animation with Animatron and i placed its code in header
block.

My problem is that animation goes to background under other blocks as well and top positioning is chancing when screen size changes and would like animation always sit on its own place with same
distance from top..

This is only css that i got from Animatron:

body.no-iframe .anm-wrapper {
top:500px;
left: 50%;
display: block;
position: absolute;
}

Can someone give me a hint?

// Mika

[Paulie_D]

You’d have to demo it in Codepen so we can help much further but my first thought is z-index.

[mika]

Oh, sorry..

here’s codepen

http://codepen.io/anon/pen/GgWmWo

// Mika

[Paulie_D]

Your Codepen seems to be working fine.

Clouds move behind the people…what’s wrong with it?

[mika]

Sorry,

here’s link of actual site i’m working on

testi2.aada.fi

See how animation is positioning.

// Mika

[Paulie_D]

Still not seeing the issue.

Please describe in greater detail what is supposed to happen and what is actually happening because your initial description is very unclear.

[mika]

Thx for answer Paulie_D,

For short i need to make my concrete5 block stretch like animation does.

I added animation codes into my concrete5 block and it works nice but problem is that it works as a background for my block.

Now I need to make my block stretch according background animation height because now animation goes under other 3 content block as well that are next in my frontpage after my “animation block”.

testi2.aada.fi

This is my code for animation block in php file:

`
<div class=”full-home-carousel”>’;
$a = new Area(‘Header Image’);
$a->display($c);
echo ‘</div>’;

`
See other links in my first messages.

Should i make section around my DIV to make its height stretch?

// Mika

[Paulie_D]

Until we can see the full HTML/CSS & JS in a Codepen I don’t think we can help you.

[mika]

HI Paulie_D,

thx for reply and patience.

**

Here is my Codepen script for animation (all that i got)
http://codepen.io/anon/pen/GgWmWo

**

Here’s CSS class that Animatron gave me for animation.

`
body.no-iframe .anm-wrapper {
top:500px;
left: 50%;
display: block;
position: absolute;
}

`

This is demosite
testi2.aada.fi

Here’s a image about layout of the page wher u see how i want animation placed.

http://testi2.aada.fi/packages/bootstrap/themes/bootstrap/images/toiska_etusivu.png

// Mika

[Paulie_D]

Unfortunately, without seeing their underlying HTML/CSS/JS (which is part of the Animatron embed) I don’t think we can help.

Perhaps you should try their support team.

[Author]

Posts