There are two styles that need to be developed:
1. Take Action Box Out Scroll
For both Desktop and Mobile the box out should appear when the use has reached 50% of the main content block.
For Desktop It should fade up and sit on the right hand side as the user scrolls (It does not move). It fades out just before the user reaches the end of the content block.
For Mobile it slides up from the bottom of the page. It remains there (in a sticky state) until the end of the content block or if the user closes it using the 'Not Now' text button. On click it closes. It does not disappear on scroll up.
2. Take Action Box Out at the bottom of the content area.
This version sits at the end of the content piece. It acts as a block of content. It does not have any animation or 'Not Now' close buttons.
There are no Tags.
Will has included measurements, however, you can also get measurements from within Sketch.
Related docs: recommended wireframes & animations
Comments from Will:
Animated version - tablet:
- The image should have white margins around if we want to be consistent with the mobile version.
- The text title can be slightly wider as we have more space.
- Shouldn't the CTA button have the same right margin as per the rest of the blocks on the page?
Static version - mobile:
- The "want to do more" title should be above the block as per the
desktop & tablet versions.