Title: | Animate 'shiny' Elements when They Scroll into View using the 'scrollrevealjs' Library |
---|---|
Description: | Allows the user to animate 'shiny' elements when scrolling to view them. The animations are activated using the 'scrollrevealjs' library. See <https://scrollrevealjs.org/> for more information. |
Authors: | Mohamed El Fodil Ihaddaden [aut, cre], Julian Lloyd [ctb, cph] (scrollreveal.js library developer) |
Maintainer: | Mohamed El Fodil Ihaddaden <[email protected]> |
License: | MIT + file LICENSE |
Version: | 0.2.0 |
Built: | 2024-11-18 04:53:59 UTC |
Source: | https://github.com/feddelegrand7/scrollrevealr |
Animate elements when scrolling to view them
scroll_reveal( target, duration = 1000, delay = 100, distance = "20px", origin = "bottom", reset = TRUE )
scroll_reveal( target, duration = 1000, delay = 100, distance = "20px", origin = "bottom", reset = TRUE )
target |
The elements to animate as they scroll into view |
duration |
The duration of the animation in milliseconds. Defaults to 1000 ms |
delay |
The desired delay in milliseconds before triggering the animation. Defaults to 100 ms |
distance |
Controls how far elements move when revealed. Defaults to 20px |
origin |
Specifies what direction elements come from when revealed ("top", "bottom", "right", "left"). Defaults to "bottom" |
reset |
logical, should the function animate the element each time it scrolls into view or only once. Defaults to TRUE. |
An animated shiny element
if (interactive()) { ui <- fluidPage( h1("TIME"), br(), br(), h1("SPACE"), br(), br(), h1("PIZZA"), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), # Using the scroll_reveal() function scroll_reveal(target = "h1", duration = 2000, distance = "100px"), ) server <- function(input, output) { } shinyApp(ui = ui, server = server) }
if (interactive()) { ui <- fluidPage( h1("TIME"), br(), br(), h1("SPACE"), br(), br(), h1("PIZZA"), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), br(), # Using the scroll_reveal() function scroll_reveal(target = "h1", duration = 2000, distance = "100px"), ) server <- function(input, output) { } shinyApp(ui = ui, server = server) }
Create an HTML dependency for scrollreveal.js
scrollreveal_dep()
scrollreveal_dep()