Sticky Slides

Steps to create:

  1. Add a link to sticky-slides.css and optionally aos.css toward the top of the page, such as Page Properties -> Advanced -> Head Content -> Head HTML
  2. Add a link to sticky-slides.js and optionally aos.js and <script>AOS.init()</script> toward the bottom of the page, such as in an HTML snippet.
  3. Add a photo component to the page. Set the size to "Superhero" (only visible for some users). Edit the photo's properties in CRXDE:
    1. Add a node under the image called "customize" (default type of nt:unstructured is ok)
    2. Add a property "wrapper" to the node with value <div class="sticky-background sticky-slide"> (or just <div class="sticky-background"> if the image should not begin with its own blank slide)
  4. Add a title and/or text component to the page after the image. Edit properties in CRXDE:
    1. Add a node under the title/text node called "customize"
    2. Add a property "wrapper" to the node with value <div class="sticky-slide transparent-blue"> (or classes other than transparent-blue if you have defined other slide styles)
  5. Copy and paste image, text and title components on the page to create and edit several slides
    1. The custom CSS on the image slides makes the un-editable. You may want to keep two tabs open to edit and preview the page, one with ?nocustom=1 and one with ?wcmmode=disabled
  6. To add AOS effects to slides:
    1. Change the text/title component wrapper to something like <div class="sticky-slide transparent-blue"><div><div data-aos="fade-up">
    2. The extra <div> is necessary so that AOS's CSS does not break the full width/height and centered behavior of the slides. Also, this makes the AOS effect start at the beginning of the text rather than the beginning of the slide (when the text isn't even visible and the effect won't be noticed)
  7. To add more customizations to a slide, such as extra styles and JS for more AOS effects:
    1. Add a "script" property to add JS immediately after the component. (Do not include <script> tags in the property value.)
    2. Add a "style" property to add CSS immediately before the component. (Do not include <style> tags in the property value.)
    3. Add a "beforeHtml" or "afterHtml" property to add more HTML before or after the component.
    4. Customize the wrapper, such as adding an ID to help target scripts and styles. The wrapper tags are automatically closed after the component. (beforeHtml and afterHtml are not, so could be used to span several components).
    5. Most of this could be done in HTML snippets, too.
    6. We could add a "Customize" property to some dialogs, possibly only visible for some users, if this is useful.
    7. "customize" nodes can be added to any component on any page.
  8. To tweak image cropping:
    1. Use dialog box "Crop focus midpoint" (only visible to some users) or CRXDE property "imageCropMidX" to adjust horizontal crop. Use a value between 0 (left-most) and 100 (right-most). The default if 50 (centered).
    2. Use CRXDE property "imageCropMidY" to adjust vertical crop. Use a value between 0 (top-most) and 100 (bottom-most). The default if 50 (centered). We could expose this property in the dialog box if desired.
    3. The "superhero" image is cropped to a portrait (1280x1920) or landscape (2000x1330 or 4000x2660) shape before being centered in the exact screen size. The crop midpoints are used for the initial portrait/landscape crop but not the final screen size fit. The effect of this is that only the imageCropMidX is in effect for portrait (typically mobile) screens and only the imageCropMidY is in effect for landscape (typically desktop) screens.
    4. The crop tool within the image dialog box can be used with the crop points. The cropping is performed before the crop points are factored in (the crop tool always behaves as if the cropped image were the uploaded image).
  9. To make a text slide (rather than a blank/image-only slide) be the first slide for a background:
    1. Do not include class sticky-slide on the background image's wrapper.
    2. To make a slide for just the background add an empty slide (<div class="sticky-slide"></div>) to the beforeHtml or afterHtml of the slide that should follow or preceed the image-only slide. Note, you can't make an empty slide (or any slide) with an HTML snippet alone because the snippet's content is always wrapped with an extra div that won't have the sticky-slide class.
  10. To have several components on one slide using a Content Optimization Container:
    1. Create a Content Optimization Container component
    2. Add slide components within it. Do not add special "customize" nodes to these components (and do not copy/paste ones that have this).
    3. In CRXDE, add a customize node to the appendaround component that begins the Content Optimization Container. Add a "beforeHtml" property to the customize node with value <div class="sticky-slide transparent-blue"> (or other custom classes). Note, do not use the wrapper property because it will end the wrapper in the wrong order.
    4. Add another customize node to the appendaround component that ends the COC with property "afterHtml" and value </div>
    5. Note, you cannot use the wrapper field in the COC dialog box because the wrapper is added inside some nested divs and it must be a sibling of the other sticky slide elements.
  11. To have several components on one slide using shared content:
    1. Create an unstructured shared content page with the content for a single slide.
    2. Add a reference component to the sticky-slides page
    3. In CRXDE, add a customize node to the reference components with a property named "wrapper" and a value of <div class="sticky-slide transparent-blue"> (or other custom classes)
    4. It will not work to have several slides in one shared content page or to include several shared content slides with a list display-full component because the HTML nesting will not be right (though we could work on this).
    5. It probably would work fine to include a whole sticky slideshow from shared content.
kids.

Sticky slides can be a title

Or they can be body text.

Body text can be formatted!

computers.

This can be combined with the AOS library.

For easy, fancy transitions.

More customization

  • can
  • have
  • more
  • effects
street people.

Fine tune cropping

newspaper.
skyline.

Group of components

With some text.

Shared Content

You can also include shared content as a slide.