Below, you’ll find a detailed guide on how to add the Scrollsequence Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Scrollsequence Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Scrollsequence Plugin and the shortcodes it provides:
Scrollsequence – Cinematic Scroll Image Animation Plugin
"Scrollsequence – Cinematic Scroll Image Animation Plugin is a dynamic tool that adds life to your site with cinematic image animations during scrolls. Enhance user experience with this plugin."
Included Shortcodes:
- [scrollsequence]
Scrollsequence [scrollsequence] Shortcode
The Scrollsequence shortcode is a dynamic tool that allows users to create engaging scroll animations on their WordPress site. It extracts attributes like ID, margin top and bottom, and hide, then retrieves relevant data from the database. The shortcode also handles mobile detection, ensuring the animations display correctly across various devices.
Shortcode: [scrollsequence]
Parameters
Here is a list of all possible scrollsequence shortcode parameters and attributes:
id– Unique identifier of the scroll sequencemargintop– Top margin of the scroll sequencemarginbottom– Bottom margin of the scroll sequencehide– Determines if the scroll sequence is hidden or not
Examples and Usage
Basic example – This example shows how to use the shortcode to display a scroll sequence by referencing the ID of the post.
[scrollsequence id=2 /]Advanced examples
Using the shortcode to display a scroll sequence with custom top and bottom margins. The ‘margintop’ and ‘marginbottom’ attributes control the spacing above and below the scroll sequence, respectively.
[scrollsequence id=2 margintop=10 marginbottom=20 /]Using the shortcode to hide the scroll sequence on mobile devices. The ‘hide’ attribute is set to ‘ismobile’, which means the scroll sequence will not be displayed on mobile devices.
[scrollsequence id=2 hide='ismobile' /]Using the shortcode to display a scroll sequence with a specific ID, custom margins, and hidden on mobile devices. This example combines all the attributes we’ve discussed so far.
[scrollsequence id=2 margintop=10 marginbottom=20 hide='ismobile' /]PHP Function Code
In case you have difficulties debugging what causing issues with [scrollsequence] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'scrollsequence', array( $this, 'scrollsequence_shortcode' ) );Shortcode PHP function:
function scrollsequence_shortcode( $atts )
{
// Extract atts
extract( shortcode_atts( array(
'id' => get_the_id(),
'margintop' => 0,
'marginbottom' => 0,
'hide' => false,
), $atts ) );
// Get info from database
$ssqInputZeroObject = array(
'debug' => carbon_get_post_meta( $id, 'scrollsequence_debug_multi' ),
'show_footer' => carbon_get_post_meta( $id, 'scrollsequence_show_footer' ),
'show_sidebar' => carbon_get_post_meta( $id, 'scrollsequence_show_sidebar' ),
'preloadPercentage' => esc_attr( get_option( 'ssq_option_preload_percentage', 0.12 ) ),
'ssqFyiId' => $id,
'siteUrl' => get_option( 'siteurl' ),
);
$ssqInputObject = array(
'ssqId' => $id,
'bodyBgColor' => carbon_get_post_meta( $id, 'scrollsequence_bodybgcolor' ),
'imageOpacity' => carbon_get_post_meta( $id, 'scrollsequence_image_opacity' ),
'scrub' => (double) carbon_get_post_meta( $id, 'scrollsequence_scrub' ),
'forceFullWidth' => carbon_get_post_meta( $id, 'scrollsequence_image_full_width' ),
'zIndex' => carbon_get_post_meta( $id, 'scrollsequence_image_zindex' ),
'triggerStart' => carbon_get_post_meta( $id, 'scrollsequence_trigger_start' ),
'triggerEnd' => carbon_get_post_meta( $id, 'scrollsequence_trigger_end' ),
'canvasDPR' => esc_attr( get_option( 'ssq_option_canvas_dpr', 'quality' ) ),
);
// Rename info from database in JS format
$ssqInputObject['page'] = array();
$ssqPageFromUI = carbon_get_post_meta( $id, 'scrollsequence_page' );
foreach ( $ssqPageFromUI as $x => $val ) {
$ssqInputObject['page'][$x]['alignX']['desktop'] = $ssqPageFromUI[$x]['scrollsequence_p_alignx_desktop'];
$ssqInputObject['page'][$x]['alignX']['mobile'] = $ssqPageFromUI[$x]['scrollsequence_p_alignx_mobile'];
$ssqInputObject['page'][$x]['alignY']['desktop'] = $ssqPageFromUI[$x]['scrollsequence_p_aligny_desktop'];
$ssqInputObject['page'][$x]['alignY']['mobile'] = $ssqPageFromUI[$x]['scrollsequence_p_aligny_mobile'];
// $ssqInputObject['page'][$x]['pageDuration']= (float)$ssqPageFromUI[$x]['scrollsequence_p_duration'];
$ssqInputObject['page'][$x]['imgDur'] = (double) $ssqPageFromUI[$x]['scrollsequence_p_imgdur'];
$ssqInputObject['page'][$x]['scaleTo']['desktop'] = $ssqPageFromUI[$x]['scrollsequence_p_scaleto_desktop'];
$ssqInputObject['page'][$x]['scaleTo']['mobile'] = $ssqPageFromUI[$x]['scrollsequence_p_scaleto_mobile'];
// Loop Through Anim
$ssqInputObject['page'][$x]['animEl'] = array();
// in case of empty
foreach ( $ssqPageFromUI[$x]['ssqnce_anim'] as $z => $animvar ) {
$ssqInputObject['page'][$x]['animEl'][$z] = $ssqPageFromUI[$x]['ssqnce_anim'][$z];
}
}
// If there is "hide" parameter -> enqueue mobile detect script and act based on parameter values.
if ( $hide ) {
$showDetectNotice = in_array( "detectdebug", carbon_get_post_meta( $id, 'scrollsequence_debug_multi' ) );
//echo '<!--Scrollsequence - Hide Parameter Exists: -->';
require_once 'mobile_detect/mobile_detect.php';
$detect = new Mobile_Detect();
// var_dump($detect);
// Any mobile device (phones or tablets).
if ( $detect->isMobile() && str_contains( strtolower( $hide ), 'ismobile' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isMobile </div>';
}
if ( !$detect->isMobile() && str_contains( strtolower( $hide ), 'isnotmobile' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isNotMobile </div>';
}
// Any tablet device.
if ( $detect->isTablet() && str_contains( strtolower( $hide ), 'istablet' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isTablet </div>';
}
if ( !$detect->isTablet() && str_contains( strtolower( $hide ), 'isnottablet' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isNotTablet </div>';
}
// Exclude tablets.
if ( $detect->isMobile() && !$detect->isTablet() && str_contains( strtolower( $hide ), 'isphone' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isPhone </div>';
}
if ( !($detect->isMobile() && !$detect->isTablet()) && str_contains( strtolower( $hide ), 'isnotphone' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isNotPhone </div>';
}
// Check for a specific platform with the help of the magic methods:
if ( $detect->isiOS() && str_contains( strtolower( $hide ), 'isios' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isiOs </div>';
}
if ( !$detect->isiOS() && str_contains( strtolower( $hide ), 'isnotios' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isNotiOs </div>';
}
if ( $detect->isAndroidOS() && str_contains( strtolower( $hide ), 'isandroidos' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isAndroidOs </div>';
}
if ( !$detect->isAndroidOS() && str_contains( strtolower( $hide ), 'isnotandroidos' ) ) {
return '<div class="scrollsequence-mobile-detect-message" ' . (( $showDetectNotice ? '' : 'style="display:none' )) . '"> Scrollsequence Debug - MobileDetect: Hide because device isNotAndroidOs </div>';
}
}
// FREE
foreach ( $ssqPageFromUI as $x => $val ) {
// Loop Through IMAGES
$ssqInputObject['page'][$x]['imagesFull'] = array( plugin_dir_url( __DIR__ ) . 'public/img/noimg.jpg' );
//if empty
if ( function_exists( 'get_rocket_cdn_url' ) ) {
foreach ( $ssqPageFromUI[$x]['scrollsequence_p_images'] as $y => $imgvar ) {
$ssqInputObject['page'][$x]['imagesFull'][$y] = get_rocket_cdn_url( wp_get_attachment_image_src( $ssqPageFromUI[$x]['scrollsequence_p_images'][$y], 'full' )[0] );
}
} else {
foreach ( $ssqPageFromUI[$x]['scrollsequence_p_images'] as $y => $imgvar ) {
$ssqInputObject['page'][$x]['imagesFull'][$y] = wp_get_attachment_image_src( $ssqPageFromUI[$x]['scrollsequence_p_images'][$y], 'full' )[0];
}
}
$ssqInputObject['page'][$x]['imagesFull'] = array_splice( $ssqInputObject['page'][$x]['imagesFull'], 0, 100 );
}
// Calculate lengths, spacers and absSpacers (SC is calculated in JS)
$ssqInputObject['pageLength'] = count( $ssqInputObject['page'] );
$ssqInputObject['scSpacer'] = 0;
$pageAbsSpacerTotal = 0;
foreach ( $ssqPageFromUI as $x => $val ) {
$ssqInputObject['page'][$x]['imagesLength'] = count( $ssqInputObject['page'][$x]['imagesFull'] );
$ssqInputObject['page'][$x]['animElLength'] = count( $ssqInputObject['page'][$x]['animEl'] );
$ssqInputObject['page'][$x]['pageSpacer'] = $ssqInputObject['page'][$x]['imagesLength'] * $ssqInputObject['page'][$x]['imgDur'];
$ssqInputObject['scSpacer'] = $ssqInputObject['scSpacer'] + $ssqInputObject['page'][$x]['pageSpacer'];
$ssqInputObject['page'][$x]['pageAbsBegin'] = $pageAbsSpacerTotal;
$pageAbsSpacerTotal = $pageAbsSpacerTotal + $ssqInputObject['page'][$x]['pageSpacer'];
$ssqInputObject['page'][$x]['pageAbsEnd'] = $pageAbsSpacerTotal;
}
// Sticky JS/CSS or Static - Deal with all here early on. - Since 1.3.0
$stickyOptionFromSettings = get_option( 'ssq_option_position_sticky', 'sticky-js' );
// second argument must be the same as default value, it needs to be here to cover if null
if ( carbon_get_post_meta( $id, 'scrollsequence_position' ) == 'sticky' && $stickyOptionFromSettings == 'sticky-js' ) {
// sticky js
$ssqInputObject['position'] = 'sticky-js';
$stickyStyle = 'position:relative;box-sizing: border-box;';
$ssqDomSpacer = $ssqInputObject['scSpacer'];
$ssqWrapStylePosition = '';
$absoluteScrollsequenceStyle = '';
} else {
if ( carbon_get_post_meta( $id, 'scrollsequence_position' ) == 'sticky' && $stickyOptionFromSettings == 'sticky-css' ) {
// sticky css
$ssqInputObject['position'] = 'sticky-css';
$stickyStyle = 'position: -webkit-sticky;position:sticky;top:0;box-sizing: border-box;';
$ssqDomSpacer = $ssqInputObject['scSpacer'];
$ssqWrapStylePosition = '';
$absoluteScrollsequenceStyle = '';
} else {
if ( carbon_get_post_meta( $id, 'scrollsequence_position' ) == 'absolute' && $stickyOptionFromSettings == 'sticky-js' ) {
// sticky js
$ssqInputObject['position'] = 'sticky-js';
$stickyStyle = 'position:relative;box-sizing: border-box;';
$ssqDomSpacer = $ssqInputObject['scSpacer'];
$ssqWrapStylePosition = 'position:absolute;';
$absoluteScrollsequenceStyle = 'style="display:block;position:relative;"';
} else {
if ( carbon_get_post_meta( $id, 'scrollsequence_position' ) == 'absolute' && $stickyOptionFromSettings == 'sticky-css' ) {
// sticky css
$ssqInputObject['position'] = 'sticky-css';
$stickyStyle = 'position: -webkit-sticky;position:sticky;top:0;box-sizing: border-box;';
$ssqDomSpacer = $ssqInputObject['scSpacer'];
$ssqWrapStylePosition = 'position:absolute;';
$absoluteScrollsequenceStyle = 'style="display:block;position:relative;"';
} else {
// static
//$ssqInputObject['carbongetpostmetascrollsequenceposition'] = carbon_get_post_meta( $id, 'scrollsequence_position');
//$ssqInputObject['get_optionssqoptionpositionsticky'] =$stickyOptionFromSettings;
$ssqInputObject['position'] = 'static';
$stickyStyle = 'position:relative;box-sizing: border-box; ';
$ssqDomSpacer = 0;
$ssqWrapStylePosition = '';
$absoluteScrollsequenceStyle = 'style="display:block;position:relative;"';
}
}
}
}
// Localize/Inline Script
static $ssqScCount = 0 ;
if ( !$ssqScCount ) {
// First run we need to declare variable and input
$inlineData = 'var ssqInput={};
ssqInput=' . json_encode( $ssqInputZeroObject ) . ';
ssqInput.sc=[];
ssqInput.sc[' . $ssqScCount . ']=' . json_encode( $ssqInputObject ) . ';';
} else {
// All other runs just input
$inlineData = 'ssqInput.sc[' . $ssqScCount . ']=' . json_encode( $ssqInputObject ) . ';';
}
wp_enqueue_script( 'scrollsequence-lib' );
// Prepare for returning onlyonece HTML
if ( !$ssqScCount ) {
// First run
$onlyonceHtml = '
<style>
.scrollsequence-pages-wrap {height:100vh}
.scrollsequence-page {position:absolute;display:none}
.gsap-marker-scroller-start {z-index:999999!important;}
</style>
<noscript>
<style>
.scrollsequence-wrap {height:initial!important;}
.scrollsequence-pages-wrap {height:initial}
.scrollsequence-page {position:relative;opacity:initial;display:block ;visibility:initial}
</style>
</noscript>
<div style="position: fixed;z-index:99999;bottom:50px;left: 100px;background:#383131b0;color:white; padding: 0.5rem; display:none" class="ssq-alert-container" id="ssqalert" >
</div>
';
} else {
$onlyonceHtml = '';
}
//all other runs
// Style for each SC
$customCssVar = '';
if ( !empty(carbon_get_post_meta( $id, 'scrollsequence_custom_css' )) ) {
$customCssVar = '
<style>
' . carbon_get_post_meta( $id, 'scrollsequence_custom_css' ) . '
</style>
';
}
// end of if not empty
// Prepare for returning pages html
$pagesHtml = array();
foreach ( $ssqPageFromUI as $p => $pagevar ) {
/**
* Filter Stuff
* Since 1.1.2.
* Inspired from: https://wordpress.stackexchange.com/questions/134582/apply-filtersthe-content-content-alternative
* List of standard filters for the_content
* source: https://core.trac.wordpress.org/browser/tags/5.7.2/src/wp-includes/default-filters.php#L131
* search for "the_content" to find what things are applied as standard
*/
$filterSsqPageContent = do_blocks( $ssqPageFromUI[$p]['scrollsequence_p_wysiwyg'] );
// priority 9 // Introduced 5.0
$filterSsqPageContent = wptexturize( $filterSsqPageContent );
// Introduced 0.71
$filterSsqPageContent = wpautop( $filterSsqPageContent );
// Introduced 0.71
$filterSsqPageContent = do_shortcode( $filterSsqPageContent );
// Introduced 2.5
$filterSsqPageContent = shortcode_unautop( $filterSsqPageContent );
// Introduced in 2.9
$filterSsqPageContent = prepend_attachment( $filterSsqPageContent );
// Introduced in 2.0
// $filterSsqPageContent = wp_filter_content_tags($filterSsqPageContent); // Introducted in 5.5 - cannot use (yet)
// $filterSsqPageContent = wp_replace_insecure_home_url($filterSsqPageContent); // Introducted WP 5.7 - cannot use (yet)
$filterSsqPageContent = convert_smilies( $filterSsqPageContent );
// priority 20? // Introduced longtimeago
// Page HTML
$pagesHtml[$p] = '
<div class="scrollsequence-page" id="ssq-page-' . $ssqScCount . '-' . $p . '" style="box-sizing: border-box;height:100vh;width:100%;overflow:hidden!important;">
' . $filterSsqPageContent . '
</div>
';
}
// return
$returnvar = '
<!-- Scrollsequence WP Plugin -->
<scrollsequence ' . $absoluteScrollsequenceStyle . '>
' . $onlyonceHtml . $customCssVar . '
<section class="scrollsequence-wrap ssq-wrap-' . $ssqScCount . ' " id="ssq-uid-' . get_the_id() . '-' . $ssqScCount . '-' . $id . '" style="' . $ssqWrapStylePosition . ';height: calc(100vh + ' . $ssqDomSpacer . 'px);padding:0;margin:0; margin-top:' . $margintop . ';margin-bottom:' . $marginbottom . '; width:100%; max-width:initial;box-sizing: border-box;border:-1px dashed blue;">
<div class="scrollsequence-sticky" style="' . $stickyStyle . '">
<canvas class="scrollsequence-canvas" style="position:absolute;"></canvas>
<div class="scrollsequence-pages-wrap" style="position:relative; margin:0; padding:0; box-sizing: border-box;">
' . implode( " ", $pagesHtml ) . '
</div>
</div><!-- .scrollsequence-sticky -->
</section><!-- .scrollsequence-wrap -->
' . '<script class="scrollsequence-input-script">
' . $inlineData . '
</script>
</scrollsequence>
';
// Free
$ssqScCount++;
if ( $ssqScCount <= 1 ) {
return $returnvar;
} else {
return '<section><h5 style="border:2px solid; padding:20px">' . __( 'For performance reasons only one shortcode is allowed in Scrollsequence FREE.', 'scrollsequence' ) . '<br><br> <a href="' . admin_url( 'admin.php?page=scrollsequence-pricing' ) . '">' . __( 'Upgrade to PRO version for unlimited shortcodes.', 'scrollsequence' ) . '</a> </h5></section>';
}
// end of else count other than zero
// end of free
}
Code file location:
scrollsequence/scrollsequence/admin/class-scrollsequence-admin.phpConclusion
Now that you’ve learned how to embed the Scrollsequence Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply