Shuttle Image Sequence Animation Full Settings

This article deconstructs the various settings and options used on our homepage.

Rocket Animation can be purchased here: https://www.istockphoto.com/de/video/space-shuttle-start-4-k-ultra-high-definition-3840-x-2160-gm874016710-244034591

Shortcode: [scrollsequence margintop="-400px" marginbottom="-712px" id="5747"]

Note: You ID will be different on your WP installation.

Options:

Scrollsequence Settings:

Fixed Content Editor:

<div id="bfcm-container">
<p id="pa1">Freemius WordPress Plugin</p>

<h1 id="ha1" style="font-weight: lighter;">Cinematic Scroll Animation</h1>
<p id="pa2">Take any video and transform it into immersive web experience using our WordPress plugin. Image sequence animation plays and rewinds on scroll. Easy integration into any page with just a few clicks! Out now on WordPress repository.</p>

</div>
<div id="bf-cta-get"></div>

Animation Settings:

Custom CSS:

#site-header{
background-color:transparent!important;
}

#bfcm-container {
position:relative;
top:100px;
}

#bf-cta-get{
position:absolute;
bottom: 2vw;
right: 2vw;
}

#ha1{
color: rgb(255, 138, 5)!important;
padding-left:2vw;
margin-top:5px;
}
#pa1{
color: white!important;
padding-left:2vw;
font-weight:lighter;
}

#strongcode {
background-color:rgba(255, 138, 5,0.4);
}

#pa2{
color: white!important;
padding-left:2vw;
max-width:600px;

}

.ssq-white {
text-shadow: 0 0 8px
rgb(94,81,255);
color:white;
}

.site-title.faux-heading {
color:white!important;
}

.sub-menu.active{
color:black!important;
}

ul.primary-menu.reset-list-style > li > a {
color: white!important;
}

Settings: