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:
