More parallax sections?

Hello ashchiew,

For this you need to customize template-front-page.php

First you need to make Child Theme, It’s preety simple.

Then, copy paste the template-front-page.php file in Child theme directory and follow these steps.
1. Open the pasted file.
2. Copy & paste the HTML for full division box [Line:38 to 47] anywhere you want. like before

<?php  $ctameta = get_post_meta( $post->ID,'_skt_calltoaction_metabox',true );

or,

<!-- full-division-box -->

or,

<?php if(have_posts()) : ?>

or,

<!-- full-client-box -->

3. Change the id “full-division-box” and class “full-bg-image-fixed”, say “full-division-box2” and “full-bg-image-fixed2”

4. Replace the following line from the pasted code with your HTML

<?php if(sketch_get_option($invert_shortname."_para_content_left")) { echo sketch_get_option($invert_shortname."_para_content_left");} ?>

5. Write this CSS in child theme style.css

#full-division-box2 {
  overflow: hidden;
  position: relative;
}
.full-bg-image-fixed2 {
  background-image: url("url-to-your-image");
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
}

6. Finally, write this code in any custom JS plugin

jQuery(window).load(function(){
  jQuery('.full-bg-image-fixed1').parallax("center", 0.2);
});

Best,
Gunjan rai Kanungo

Ok, does this still work if I have to make up to 8 parallaxs?

yes, It will work without any problem. But for the more no. of sections write the CSS and js in following way

#full-division-box2, #full-division-box3, #full-division-box-n-th {
  ----
}
.full-bg-image-fixed2, .full-bg-image-fixed3 {
  ----
}
/* And to set different image to any section write this afterwards */
.full-bg-image-fixed3 {
  background-image: url("url-to-your-image");
}

jQuery(window).load(function(){
  jQuery('.full-bg-image-fixed2, .full-bg-image-fixed3, -n-th').parallax("center", 0.2);
});