The Parallax component creates a full-width multi-layered image component where the background image will move slightly as you scroll.
Developer Documentation
Official documentation is archived here:
https://web.archive.org/web/20170625190026/http://aesopstoryengine.com/help/content-component/
Note: there are several options mentioned above that are not available with the current version of the Parallax block.
Examples
This is an Aesop Parallax block with Background Movement Type set to On, giving a subtle sliding effect when the page is scrolled.
Caption option is also set.
Dolor morbi non arcu risus quis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Enim diam vulputate ut pharetra. Integer feugiat scelerisque varius morbi enim nunc faucibus. Feugiat scelerisque varius morbi enim nunc faucibus a. In nisl nisi scelerisque eu ultrices vitae auctor eu. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Pharetra pharetra massa massa ultricies mi quis. Leo duis ut diam quam nulla. Habitant morbi tristique senectus et netus et. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper.
Aesop Parallax block with Background Movement Type set to Off. This is a basic full-width image without parallax effect.
Best to use an Aesop Image block instead, if you don’t want parallax, but included here for the sake of completeness.
Senectus et netus et malesuada fames ac. Arcu odio ut sem nulla pharetra diam. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Ornare lectus sit amet est placerat in egestas. Sapien faucibus et molestie ac. Ornare arcu odio ut sem. Cursus mattis molestie a iaculis. Diam vulputate ut pharetra sit amet aliquam id. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Volutpat sed cras ornare arcu dui vivamus arcu. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Lacus vel facilisis volutpat est velit.
Aesop Parallax block with Background Movement Type set to Fixed, giving a more extreme effect where the image remains in a fix position as the page scrolls.
Aliquam sem et tortor consequat id porta nibh. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id neque aliquam vestibulum morbi blandit cursus risus at. Luctus accumsan tortor posuere ac. Enim ut tellus elementum sagittis vitae et leo duis ut. Orci nulla pellentesque dignissim enim. Augue mauris augue neque gravida in fermentum et sollicitudin. Integer eget aliquet nibh praesent tristique magna sit amet. Risus nec feugiat in fermentum posuere urna. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Consectetur adipiscing elit pellentesque habitant morbi.
Aesop Parallax block with Height Set (100px). As above, but with Image Height option set to 100px.
There are a couple of other options:
- Image Lightbox doesn’t seem to work, unfortunately
- Enable Floater Element allows you add text on top of the image. It doesn’t look great in Novella, only shows the text if Image Height is set, and it’s fiddly to enter text in a single-line box. I wouldn’t bother with this
Elementum curabitur vitae nunc sed velit. Mi eget mauris pharetra et ultrices neque ornare. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. At in tellus integer feugiat scelerisque varius. Nibh tortor id aliquet lectus proin nibh nisl. Tortor posuere ac ut consequat semper viverra. At tellus at urna condimentum mattis pellentesque id. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Libero justo laoreet sit amet cursus sit. Et odio pellentesque diam volutpat. Dictumst quisque sagittis purus sit amet volutpat consequat. Sit amet nulla facilisi morbi tempus iaculis urna. Hendrerit dolor magna eget est. In ornare quam viverra orci. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Donec et odio pellentesque diam volutpat commodo sed egestas. Mi in nulla posuere sollicitudin. Id interdum velit laoreet id donec ultrices tincidunt arcu. Quis lectus nulla at volutpat.