Responsivity

When designing a modern website, making sure that it is correctly displayed on every device used to be a difficult task. Luckily Scrollsequence has been designed to make it as easy as possible. The application is using JavaScript to determine if the device is landscape, or portrait.

You can have individual settings for Desktop and Mobile display of the image sequence.
These settings can be different for every scene in sequence. So if your animation character changes between scenes, you can adapt the responsivity to it.

Image Scale

• Scale to Fill: Scale to fill is the default setting. The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit.
• Scale to Fit: The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.

Image Alignment

• Horizontal Alignment: Center is default horizontal alignment. Apart from that you can align your images left and right.
• Vertical Alignment: Center is default vertical alignment. Apart from that you can align your images top and bottom.

Window Resize

Each time there is a window resize event, the image gets rendered again to respect the new window size. This ensures 100% responsivity of your webpage according to W3 standards.

Hide Scrollsequence On Mobile, Tablet Or Operating Systems

If you wish to prevent Scrollsequence to load on some devices or operating systems, use the hide shortcode parameter that can have multiple options:

isMobile | isNotMobile | isLaptop | isNotLaptop | isPhone | isNotPhone | isiOs | isNotiOS | isAndroidOs | isNotAndroidOS

You can combine the options too.

Examples

Mobile:

• [scrollsequence id="your_ssq_id_here" hide="isMobile"] – hide on mobile (phones and laptops)
• [scrollsequence id="your_ssq_id_here" hide="isNotMobile"] – hide on devices that are not mobile

Tablet:

• [scrollsequence id="your_ssq_id_here" hide="isTablet"] – hide on tablet
• [scrollsequence id="your_ssq_id_here" hide="isNotTablet"] – hide on devices that are not tablet

Phone:

• [scrollsequence id="your_ssq_id_here" hide="isPhone"] – hide on phone
• [scrollsequence id="your_ssq_id_here" hide="isNotPhone"] – hide on devices that are not phone

iOS:

• [scrollsequence id="your_ssq_id_here" hide="isiOs"] – hide on iOS
• [scrollsequence id="your_ssq_id_here" hide="isNotiOs"] – hide on devices that are not iOS

Android:

• [scrollsequence id="your_ssq_id_here" hide="isAndroidOs"] – hide on Android
• [scrollsequence id="your_ssq_id_here" hide="isNotAndroidOs"] – hide on devices that are not Android

Combinations (experimental - not recommended):

• [scrollsequence id="your_ssq_id_here" hide="isiOs isAndroidOs"] – hide on iOS and Android

Note 1:
There is also a new Show Development Information option to show Device Detect debug information on the page. So when a Scrollsequence is hidden, you can debug why.

Note 2:
Please note that Chrome dev tools (F12) results in isMobile === true, so if you hide on mobile, you can not debug scrollsequence in dev tool unless you change this behavior.