fullPage: Setup a page.

In JohnCoene/fullPage: Three Families of Functions for Three Different Single Page 'Shiny' Apps

Description

Create a full scrolling page.

Usage

fullPage(..., opts = list(), menu = NULL, center = FALSE)

Arguments

...	any element.
opts	a list of options, see details.
menu	named vector of menu links.
center	horizontally center all sections.

Details

Valid opts:

• lockAnchors - boolean - whether anchors in the URL will have any effect at all in the library.

• navigation boolean - show a navigation bar made up of small circles.

• navigationPosition takes none, left or right.

• showActiveTooltip - vector i.e.:c("section 1", "section 2").

• slidesNavigation - boolean - show a navigation bar made up of small circles.

• slidesNavPosition - takes top or bottom.

• scrollingSpeed - integer - speed in milliseconds for the scrolling transitions.

• autoScrolling - boolean - set automatic scrolling.

• fitToSection - boolean

• fitToSectionDelay - integer

• scrollBar boolean - whether to show the scroll bar.

• easing - defines the transition effect to use for the vertical and horizontal scrolling. See jQuery UI http://api.jqueryui.com/easings/ and the https://matthewlein.com/tools/ceaser.

• easingcss3 - defines the transition effect to use in case of using css3 = TRUE. See https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp.

• css3 - boolean - defines whether to use JavaScript or CSS3 transforms to scroll within sections and slides.

• loopBottom - boolean - defines whether scrolling down in the last section should scroll to the first one or not.

• loopTop - boolean - defines whether scrolling up in the first section should scroll to the last one or not.

• loopHorizontal - boolean - defines whether horizontal sliders will loop after reaching the last or previous slide or not.

• continuousVertical - boolean - defines whether scrolling down in the last section or should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. Not compatible with loopTop, loopBottom, scrollBar = TRUE and autoScrolling = FALSE.

• continuousHorizontal - boolean - defines whether sliding right in the last slide should slide right to the first one or not, and if scrolling left in the first slide should slide left to the last one or not. Not compatible with loopHorizontal.

• scrollHorizontally - boolean - defines whether to slide horizontally within sliders by using the mouse wheel or trackpad. Ideal for story telling.

• interlockedSlides - boolean or vector (i.e.:1, 3, 5 for slides 1, 3, and 5) - determines whether moving one horizontal slider will force the sliding of sliders in other section in the same direction.

• dragAndMove - boolean - enables or disables the dragging and flicking of sections and slides by using mouse or fingers.

• offsetSections - provides a way to use non full screen sections based on percentage. Ideal to show visitors there's more content in the site by showing part of the next or previous section.

• resetSliders - defines whether or not to reset every slider after leaving its section.

• fadingEffect - defines whether to use a fading effect or not instead of the default scrolling one. Possible values are TRUE, FALSE, sections, slides.

• scrollOverflow - defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. When set to TRUE, your content will be wrapped by the plugin.

• scrollOverflowReset - When set to TRUE it scrolls up the content of the section/slide with scroll bar when leaving to another vertical section. This way the section/slide will always show the start of its content even when scrolling from a section under it.

• touchSensitivity - defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section / slide, defaults to 5.

• normalScrollElementTouchThreshold - defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device.

• bigSectionsDestination - defines how to scroll to a section which size is bigger than the viewport. By default fullPage.js scrolls to the top if you come from a section above the destination one and to the bottom if you come from a section below the destination one. Possible values are top, bottom or, NULL.

• keyboardScrolling - defines if the content can be navigated using the keyboard.

• animateAnchor - defines whether the load of the site when given an anchor will scroll with animation to its destination or will directly load on the given section.

• recordHistory - defines whether to push the state of the site to the browser's history. When set to true each section/slide of the site will act as a new page and the back and forward buttons of the browser will scroll the sections/slides to reach the previous or next state of the site. When set to FALSE, the URL will keep changing but will have no effect on the browser's history. This option is automatically turned off when using autoScrolling = FALSE.

• controlArrows - determines whether to use control arrows for the slides to move right or left.

• verticalCentered - vertically centering of the content within sections.

• sectionsColor - defines sections' background colour.

• paddingTop - defines the top padding for each section with a numerical value and its measure, i.e.: 10em.

• paddingBottom - defines the bottom padding for each section with a numerical value and its measure, i.e.: 10em.

• responsiveWidth - a normal scroll will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

• responsiveHeight - a normal scroll will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

• responsiveSlides - when set to TRUE slides will be turned into vertical sections when responsive mode is fired.

• parallax - defines whether or not to use the parallax backgrounds effects on sections / slides.

• parallaxOptions - list - allows to configure the parameters for the parallax backgrounds effect, see https://github.com/alvarotrigo/fullPage.js/wiki/Extension—Parallax

• lazyLoading -lazy loading is active by default which means it will lazy load any media element containing the attribute data-src.

Author(s)

John Coene, [e-mail]

See Also

https://github.com/alvarotrigo/fullPage.js/.

Examples

## Not run: 
# Run de demo
demo("fullPage", package = "fullPage")

# Or this
library(shiny)

options <- list(
  sectionsColor = c('#f2f2f2', '#4BBFC3', '#7BAABE'),
  parallax = TRUE
)

ui <- fullPage(
  menu = c("Full Page" = "link1",
           "Sections" = "link2",
           "Slides" = "section3",
           "backgrounds" = "section4",
           "Background Slides" = "section5",
           "Callbacks" = "section6"),
  opts = options,
  fullSection(
    center = TRUE,
    menu = "link1",
    tags$h1("fullPage.js meets Shiny")
  ),
  fullSection(
    menu = "link2",
      fullRow(
        fullColumn(
          h3("Column 1"),
          selectInput(
          "dd",
          "data points",
          choices = c(10, 20, 30)
         )
        ),
        fullColumn(
          plotOutput("hist")
        ),
        fullColumn(
          plotOutput("plot")
        )
      )
  ),
  fullSection(
    menu = "section3",
    fullSlide(
      fullContainer(
        center = TRUE,
        h3("With container"),
        plotOutput("slideplot2"),
        shiny::verbatimTextOutput("containerCode")
      )
    ),
    fullSlide(
      center = TRUE,
      h3("Without container"),
      plotOutput("slideplot1")
    )
  ),
  fullSectionPlot(
    menu = "section4",
    center = TRUE,
    "fp",
    h3("Background plots"),
    fullContainer(
      sliderInput(
        "fpInput",
        label = "Input",
        min = 10,
        max = 100,
        value = 74
      )
    )
  ),
  fullSection(
    menu = "section5",
    fullSlidePlot(
      "slideSectionPlot1",
      center = TRUE,
      h1("Slide background plot")
    ),
    fullSlidePlot(
      "slideSectionPlot2"
    )
  ),
  fullSection(
    menu = "section6",
    fullContainer(
      h3("Callbacks"),
      p("Get callbacks on slide origin, destination, derection."),
      p("Current slide:", verbatimTextOutput("slide"))
    )
  )
)

server <- function(input, output){

  output$plot <- renderPlot({
    hist(rnorm(input$dd, 1, 10))
  })

  output$hist <- renderPlot({
    hist(rnorm(input$dd, 1, 10))
  })

  output$slideplot1 <- renderPlot({
    plot(mtcars$mpg, mtcars$drat)
  })

  output$slideplot2 <- renderPlot({
    plot(mtcars$wt, mtcars$mpg)
  })

  output$fp <- renderPlot({
    par(bg = "lightgray")
    hist(rnorm(input$fpInput, 1, 10))
  })

  output$containerCode <- renderText({
    "fullSlide(
      fullContainer(...)
    )"
  })

  output$slideSectionPlot1 <- renderPlot({
    par(bg = "lightblue")
    hist(rnorm(50, 1, 20))
  })

  output$slideSectionPlot2 <- renderPlot({
    par(bg = "gray50")
    hist(rnorm(50, 1, 25))
  })

  output$slide <- renderPrint({
    input$slide_origin
  })
}

shinyApp(ui, server)

## End(Not run)

JohnCoene/fullPage documentation built on Sept. 3, 2021, 8:33 p.m.