library(shiny)
ui <- fluidPage(
tags$head(
include_flip_box_css()
),
tags$h1("Shiny Apps"),
flip_box_grp(
flip_box(),
flip_box(front_img_url = "https://s25.postimg.cc/hj4c4qnov/cta-3.png"),
flip_box(front_img_url = "https://s25.postimg.cc/l2q9ujy4f/cta-4.png")
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Last active
May 10, 2022 21:49
-
-
Save jimbrig/40405099cedce8350a8994265acef6ea to your computer and use it in GitHub Desktop.
[flip_box.R] Create a rotating card flip box with R shiny! #shiny #webdev #css #html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
library(shiny) | |
ui <- fluidPage( | |
tags$head( | |
include_flip_box_css() | |
), | |
tags$h1("Shiny Apps"), | |
flip_box_grp( | |
flip_box(), | |
flip_box(front_img_url = "https://s25.postimg.cc/hj4c4qnov/cta-3.png"), | |
flip_box(front_img_url = "https://s25.postimg.cc/l2q9ujy4f/cta-4.png") | |
) | |
) | |
server <- function(input, output) {} | |
shinyApp(ui = ui, server = server) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
font-family: sans-serif; | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
.text-center { | |
text-align: center; | |
} | |
.color-white { | |
color: #fff; | |
} | |
.box-container { | |
align-items: center; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-around; | |
padding: 35px 15px; | |
width: 100%; | |
} | |
@media screen and (min-width:1380px) { | |
.box-container { | |
flex-direction: row | |
} | |
} | |
.box-item { | |
position: relative; | |
-webkit-backface-visibility: hidden; | |
width: 415px; | |
margin-bottom: 35px; | |
max-width: 100%; | |
} | |
.flip-box { | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
perspective: 1000px; | |
-webkit-perspective: 1000px; | |
} | |
.flip-box-front, | |
.flip-box-back { | |
background-size: cover; | |
background-position: center; | |
border-radius: 8px; | |
min-height: 475px; | |
-ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
-webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.flip-box-front { | |
-ms-transform: rotateY(0deg); | |
-webkit-transform: rotateY(0deg); | |
transform: rotateY(0deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box:hover .flip-box-front { | |
-ms-transform: rotateY(-180deg); | |
-webkit-transform: rotateY(-180deg); | |
transform: rotateY(-180deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box-back { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
-ms-transform: rotateY(180deg); | |
-webkit-transform: rotateY(180deg); | |
transform: rotateY(180deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box:hover .flip-box-back { | |
-ms-transform: rotateY(0deg); | |
-webkit-transform: rotateY(0deg); | |
transform: rotateY(0deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box .inner { | |
position: absolute; | |
left: 0; | |
width: 100%; | |
padding: 60px; | |
outline: 1px solid transparent; | |
-webkit-perspective: inherit; | |
perspective: inherit; | |
z-index: 2; | |
transform: translateY(-50%) translateZ(60px) scale(.94); | |
-webkit-transform: translateY(-50%) translateZ(60px) scale(.94); | |
-ms-transform: translateY(-50%) translateZ(60px) scale(.94); | |
top: 50%; | |
} | |
.flip-box-header { | |
font-size: 34px; | |
} | |
.flip-box p { | |
font-size: 20px; | |
line-height: 1.5em; | |
} | |
.flip-box-img { | |
margin-top: 25px; | |
} | |
.flip-box-button { | |
background-color: transparent; | |
border: 2px solid #fff; | |
border-radius: 2px; | |
color: #fff; | |
cursor: pointer; | |
font-size: 20px; | |
font-weight: bold; | |
margin-top: 25px; | |
padding: 15px 20px; | |
text-transform: uppercase; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#' Flip Box | |
#' | |
#' Rotating flip box card widget. | |
#' | |
#' @param front_img_url,front_title,front_text,front_bttn_img_url Contents for front of card. | |
#' @param back_img_url,back_title,back_text,back_bttn_text,back_bttn_href Contents for back of card. | |
#' | |
#' @return HTML widget | |
#' @export | |
#' | |
#' @name flip_box | |
#' | |
#' @seealso [shinyjs::inlineCSS()] | |
#' | |
#' @examples | |
#' \dontrun{ | |
#' library(shiny) | |
#' | |
#' ui <- fluidPage( | |
#' tags$head( | |
#' include_flip_box_css() | |
#' ), | |
#' tags$h1("Shiny Apps"), | |
#' flip_box_grp( | |
#' flip_box(), | |
#' flip_box(front_img_url = "https://s25.postimg.cc/hj4c4qnov/cta-3.png"), | |
#' flip_box(front_img_url = "https://s25.postimg.cc/l2q9ujy4f/cta-4.png") | |
#' ) | |
#' ) | |
#' | |
#' server <- function(input, output) {} | |
#' | |
#' shinyApp(ui = ui, server = server) | |
#' } | |
flip_box <- function(front_img_url = "https://s25.postimg.cc/frbd9towf/cta-2.png", | |
front_title = "My Application", | |
front_text = "My app is awesome!", | |
front_bttn_img_url = "https://s25.postimg.cc/65hsttv9b/cta-arrow.png", | |
back_img_url = front_img_url, | |
back_title = front_title, | |
back_text = "Add description here", | |
back_bttn_text = "Learn More", | |
back_bttn_href = "https://github.com/jimbrig") { | |
tags$div( | |
class = "box-item", | |
tags$div( | |
class = "flip-box", | |
tags$div( | |
class = "flip-box-front text-center", | |
style = paste0("background-image: url('", front_img_url, "');"), | |
tags$div( | |
class = "inner color-white", | |
tags$h3( | |
class = "flip-box-header", | |
front_title | |
), | |
tags$p( | |
front_text | |
), | |
tags$img( | |
src = front_bttn_img_url, | |
alt = "", | |
class = "flip-box-img" | |
) | |
) | |
), | |
tags$div( | |
class = "flip-box-back text-center", | |
style = paste0("background-image: url('", back_img_url, "');"), | |
tags$div( | |
class = "inner color-white", | |
tags$h3( | |
class = "flip-box-header", | |
back_title | |
), | |
tags$p( | |
back_text | |
), | |
tags$a( | |
href = back_bttn_href, | |
class = "flip-box-button", | |
back_bttn_text | |
) | |
) | |
) | |
) | |
) | |
} | |
#' @desribeIn flip_box | |
flip_box_grp <- function(...) { | |
tags$div(class = "box-container", ...) | |
} | |
#' @desribeIn flip_box | |
include_flip_box_css <- function() { | |
shinyjs::inlineCSS( | |
flip_box_css | |
) | |
} | |
flip_box_css <- " | |
html { | |
font-family: sans-serif; | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
.text-center { | |
text-align: center; | |
} | |
.color-white { | |
color: #fff; | |
} | |
.box-container { | |
align-items: center; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-around; | |
padding: 35px 15px; | |
width: 100%; | |
} | |
@media screen and (min-width:1380px) { | |
.box-container { | |
flex-direction: row | |
} | |
} | |
.box-item { | |
position: relative; | |
-webkit-backface-visibility: hidden; | |
width: 415px; | |
margin-bottom: 35px; | |
max-width: 100%; | |
} | |
.flip-box { | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
perspective: 1000px; | |
-webkit-perspective: 1000px; | |
} | |
.flip-box-front, | |
.flip-box-back { | |
background-size: cover; | |
background-position: center; | |
border-radius: 8px; | |
min-height: 475px; | |
-ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
-webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1); | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.flip-box-front { | |
-ms-transform: rotateY(0deg); | |
-webkit-transform: rotateY(0deg); | |
transform: rotateY(0deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box:hover .flip-box-front { | |
-ms-transform: rotateY(-180deg); | |
-webkit-transform: rotateY(-180deg); | |
transform: rotateY(-180deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box-back { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
-ms-transform: rotateY(180deg); | |
-webkit-transform: rotateY(180deg); | |
transform: rotateY(180deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box:hover .flip-box-back { | |
-ms-transform: rotateY(0deg); | |
-webkit-transform: rotateY(0deg); | |
transform: rotateY(0deg); | |
-webkit-transform-style: preserve-3d; | |
-ms-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.flip-box .inner { | |
position: absolute; | |
left: 0; | |
width: 100%; | |
padding: 60px; | |
outline: 1px solid transparent; | |
-webkit-perspective: inherit; | |
perspective: inherit; | |
z-index: 2; | |
transform: translateY(-50%) translateZ(60px) scale(.94); | |
-webkit-transform: translateY(-50%) translateZ(60px) scale(.94); | |
-ms-transform: translateY(-50%) translateZ(60px) scale(.94); | |
top: 50%; | |
} | |
.flip-box-header { | |
font-size: 34px; | |
} | |
.flip-box p { | |
font-size: 20px; | |
line-height: 1.5em; | |
} | |
.flip-box-img { | |
margin-top: 25px; | |
} | |
.flip-box-button { | |
background-color: transparent; | |
border: 2px solid #fff; | |
border-radius: 2px; | |
color: #fff; | |
cursor: pointer; | |
font-size: 20px; | |
font-weight: bold; | |
margin-top: 25px; | |
padding: 15px 20px; | |
text-transform: uppercase; | |
} | |
" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment