```{css, example, echo=FALSE} .level1 { min-height: 400px; border: 1px solid; margin-bottom: 4em; padding: 1em 2em 2em; } .is-active { background-color: yellow; } body { margin-bottom: 80vh; }
# Setting up A Scrollama document consists of "step elements". As you scroll down/up the document, a step element may enter or exit an offset threshold, which you can imagine as a horizontal line placed at a certain height of the viewport. For this document, the step elements are level-one sections. Every time a level-one section enters the offset threshold, a class `is-active` is added to it. When it exits the threshold, the class is removed. To better understand the offset threshold, you can turn on the `debug` option in `rolldown::scrollama_setup()` so you can see the horizontal line: ```r
Note that rolldown::scrollama_setup()
should be actually called at the end of a document.
Below is the CSS applied to this document. Basically we added borders to level-one sections, and background colors to "active" sections.
```{css, example, eval=FALSE}
## Level-two heading Level-two and below headings... ### Level-three ...are all contained in the same section. # Text Example text. # Plots You may include any number of plots in a section. ```r par(mar = c(4, 4, .5, .1)) plot(pressure, type = 'h', las = 1)
As mentioned in the beginning, you should call rolldown::scrollama_setup()
at the end of a document. If you know JavaScript, you may have noticed that scrollama_setup()
is a simple helper function to write out JavaScript like this:
(function() { var scroller = scrollama(); scroller.setup({"step": ".level1", "offset": 0.2}) .onStepEnter(res => { res.element.classList.add("is-active"); }) .onStepExit(res => { res.element.classList.remove("is-active"); }); window.addEventListener("resize", scroller.resize); })();
You certainly do not have to rely on this R helper function, and can write JavaScript directly in an R Markdown document. For example, if you want to use the class name current
instead of is-active
, you may set up Scrollama with a js
code chunk:
`r ''````{js, echo=FALSE}
(function() {
var scroller = scrollama();
scroller.setup({"step": ".level1", "offset": 0.2})
.onStepEnter(res => {
res.element.classList.add("current");
})
.onStepExit(res => {
res.element.classList.remove("current");
});
window.addEventListener("resize", scroller.resize);
})();
```
For more information about Scrollama, please check out its documentation at https://github.com/russellgoldenberg/scrollama.
rolldown::scrollama_setup( list(step = '.level1', offset = .2, debug = TRUE) )
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.