You can publish multiple Fastr Experiences on a single page to create a parallax scrolling effect, where certain elements of the page will scroll above or below others. Below are a few live examples for your reference:
This effect is achieved by creating several Experiences in Fastr and combining them using the custom code provided below. You're welcome to try building a parallax page using this code. If you have any questions or need assistance, please feel free to contact our support team at support@getfastr.com.
The code can be customized to fit the parallax design you're looking for. However, we recommend having some working knowledge of HTML/CSS to modify the code effectively.
Parallax Code for Experiences:
<style><!--
.sticky-wrapper-top {
top: 0px !important;
overflow:hidden !important;
position:sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
-webkit-overflow-scrolling: touch !important;
}
.sticky-wrapper {
position:sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
-webkit-overflow-scrolling: touch;
overflow:hidden;
}
.page-container {
overflow: inherit !important;
transform: none;
}
.page {
padding: 0 !important;
margin: 0 auto !important;
}
.page-width {
padding: 0 !important;
margin: 0 auto !important;
}
--></style>
<div>
<div id="zmags-container-1">
<div class="sticky-wrapper-top">
INSERT THE CODE SCRIPT HERE
</div>
<div class="sticky-wrapper-top">
INSERT THE CODE SCRIPT HERE
</div>
<div class="sticky-wrapper-top">
INSERT THE CODE SCRIPT HERE
</div>
<div class="sticky-wrapper-top">
INSERT SCRIPT CODE HERE
</div>
<div class="sticky-wrapper-top">
INSERT THE CODE SCRIPT HERE
</div>
Parallax Code for Example Three:
You need to host the background images online and enter their URLs in the code.
<style><!--
.page-container {
overflow: inherit !important;
transform: none;
}
.page {
padding: 0 !important;
margin: 0 auto !important;
}
.page-width {
padding: 0 !important;
margin: 0 auto !important;
}
.content {
position: relative;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#parallax-background{
top: 88px
position:fixed;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.zmags-container{
width:100% !important;
margin:auto !important;
height:auto !important;
background: transparent !important;
overflow:auto !important;
position: relative !important;
}
#background-image-1 {
background-image: url('https://img.creator-prod.zmags.com/assets/images/64f9db0ab6fc7c5ba77adc97.jpeg?im=Resize,width=2560');
}
#background-image-2 {
background-image: url('https://img.creator-prod.zmags.com/assets/images/64f9db6eb6fc7c5ba77adcc6.jpeg?im=Resize,width=2560');
}
#background-image-3 {
background-image: url('https://img.creator-prod.zmags.com/assets/images/64f9db716df9f10f760dc9ef.jpeg?im=Resize,width=2560');
}
.parallax {
position: relative;
height: 800px;
width:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
.parallax {
height: 500px;
width:100%;
display: block;
background-repeat: no-repeat;
background-position: center;
background-attachment: local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
@media only screen and (min-width: 767px) {
.page-main {
max-width: 100% !important;
overflow: inherit !important;
}
.sticky-wrapper-top {
top: 0px !important;
overflow:hidden !important;
position:sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
-webkit-overflow-scrolling: touch !important;
}
.sticky-wrapper {
position:sticky !important;
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
-webkit-overflow-scrolling: touch;
overflow:hidden;
}
.sticky-wrapper-top-left {
top: 0px !important;
overflow: hidden !important;
position: sticky !important;
width: 50%;
float: left;
/* height: 100px; */
position: -webkit-sticky !important;
position: -moz-sticky !important;
position: -ms-sticky !important;
position: -o-sticky !important;
-webkit-overflow-scrolling: touch !important;
}
.right {
margin-left: 50%;
width: 50%;
position: relative;
}
}
--></style>
<div>
<div id="zmags-container-1">
<div class="sticky-wrapper-top"><script src="https://cas.zma.gs/618cca81ad04231fbca49cee/ssr/containers/c088f3a4-a2e4-48f8-9bab-16268161ee05/init.js"></script></div>
<div class="sticky-wrapper-top"><script src="https://cas.zma.gs/618cca81ad04231fbca49cee/ssr/containers/6b01e84a-ab70-43c0-ae40-2510ad27decd/init.js"></script></div>
<div class="parallax" id="background-image-1"></div>
<div class="sticky-wrapper-top-left"><script src="https://cas.zma.gs/618cca81ad04231fbca49cee/ssr/containers/3bb0bbac-0a30-485b-a317-ce3cfca823b4/init.js"></script></div>
<div class="right"><script src="https://cas.zma.gs/618cca81ad04231fbca49cee/ssr/containers/e288c37d-5494-4b2f-a024-0e7c272d8973/init.js"></script></div>
<div class="parallax" id="background-image-2"></div>
<script src="https://cas.zma.gs/618cca81ad04231fbca49cee/ssr/containers/3bb0bbac-0a30-485b-a317-ce3cfca823b4/init.js"></script>
<div class="parallax" id="background-image-3"></div>
<script src="https://cas.zma.gs/644a6a816df9f10f76de3b8c/ssr/containers/C3_uo8ntpc48lqcev60pa38f/init.js"></script></div>
</div>
Comments
0 comments
Please sign in to leave a comment.