Блог

Есть ли способ заставить каждый раздел документа R Markdown загружаться только после того, как пользователь достигнет его?

Я спрашиваю, потому что я использую Highcharter, и при загрузке диаграмм у них появляется анимация. Эти анимации происходят при загрузке страницы, и поэтому пользователь не видит этого, поскольку каждый раздел загружается одновременно.

Я полагаю, это как-то связано с созданием пользовательского CSS? Я в основном хочу, чтобы раздел загружался после того, как пользователь прокрутил его.

Ниже приведен воспроизводимый пример того, к чему я дошел до сих пор. Если вы видите набор вкладок 2, анимация приводит к исчезновению диаграммы, но поскольку элемент уже загружен, на диаграмме нет анимации (т. Е. Перезагрузки строк).

     ---
title: "Minimal example"
output:
  html_document:
    toc: true
    toc_float:
      collapsed: false
      smooth_scroll: true
---


```{r, echo = FALSE}
aniview::use_aniview()
```


```{css, echo=FALSE}
p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 10s; /* Firefox < 16 */
        -ms-animation: fadein 10s; /* Internet Explorer */
         -o-animation: fadein 10s; /* Opera < 12.1 */
            animation: fadein 10s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
```

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tidyverse)
library(highcharter)

```


# scatter example

```{r, results='asis'}

x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('scatter', hcaes(x = x, y = y))
hc

```

# line example

```{r, results='asis'}

x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('line', hcaes(x = x, y = y))
hc

```
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

# Tabsets {.tabset .tabset-fade .tabset-pills}

## 1
```{r, results = 'asis'}
hc
```


## 2
::: {.aniview data-av-animation="slideInUp"}
```{r, results = 'asis'}
hc
```
:::

#  outside tabset


```{r, results = 'asis'}
x <- runif(10, 0, 10)
y <- runif(10, 0, 10)
data <- data.frame(x, y)
hc <- data %>% 
  hchart('scatter', hcaes(x = x, y = y))
hc
```
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  

Возможно, захочется заглянуть в документы Scrollama на R, которые используют JS. Это всего лишь макет, позволяющий понять, что выделенный раздел появляется только тогда, когда пользователь переходит к этому разделу.

     ---
title: "Scrollama Document"
output: rolldown::scrollama
---

```{css, 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;
}
```


# Introduction



## 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(cars, pch = 19)
plot(pressure, type = 'h')
```


# Images

Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a      giant     inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.

![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)


# Setup

You should call `rolldown::scrollama_setup()` at the end of a document. Turn off the `debug` option to get rid of the horizontal        line on     the page, and you probably also want `echo=FALSE` on this code chunk:

```{r}
rolldown::scrollama_setup(
  list(step = '.level1', offset = .2, debug = TRUE)
)
```