Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Andrew Seales
Kubernetes Presentation
Commits
9d119270
Commit
9d119270
authored
May 19, 2020
by
Hakim El Hattab
Browse files
auto-animate example in demo
parent
815557c1
Changes
7
Expand all
Hide whitespace changes
Inline
Side-by-side
css/layout.scss
0 → 100644
View file @
9d119270
/**
* Layout helpers.
*/
// Stretch an element vertically based on available space
.reveal
.stretch
,
.reveal
.r-stretch
{
max-width
:
none
;
max-height
:
none
;
}
.reveal
pre
.stretch
code
,
.reveal
pre
.r-stretch
code
{
height
:
100%
;
max-height
:
100%
;
box-sizing
:
border-box
;
}
// Stack multiple elements on top of each other
.reveal
.r-stack
{
display
:
grid
;
}
.reveal
.r-stack
>
*
{
grid-area
:
1
/
1
;
margin
:
auto
;
}
// Horizontal and vertical stacks
.reveal
.r-vstack
,
.reveal
.r-hstack
{
display
:
flex
;
}
.reveal
.r-vstack
{
flex-direction
:
column
;
}
.reveal
.r-hstack
{
flex-direction
:
row
;
}
.reveal
.items-center
{
align-items
:
center
;
}
.reveal
.justify-center
{
justify-content
:
center
;
}
\ No newline at end of file
css/reveal.scss
View file @
9d119270
...
...
@@ -6,6 +6,7 @@
* Copyright (C) Hakim El Hattab, https://hakim.se
*/
@import
'layout'
;
/*********************************************
* GLOBAL STYLES
...
...
@@ -213,30 +214,6 @@ html.reveal-full-page {
position
:
relative
;
}
// Layout helper: Stretch an element vertically based on available space
.reveal
.stretch
,
.reveal
.r-stretch
{
max-width
:
none
;
max-height
:
none
;
}
.reveal
pre
.stretch
code
,
.reveal
pre
.r-stretch
code
{
height
:
100%
;
max-height
:
100%
;
box-sizing
:
border-box
;
}
// Layout helper: Stack multiple elements on top of each other
.reveal
.r-stack
{
display
:
grid
;
}
.reveal
.r-stack
>
*
{
grid-area
:
1
/
1
;
margin
:
auto
;
}
/*********************************************
* CONTROLS
...
...
demo.html
View file @
9d119270
...
...
@@ -137,6 +137,32 @@
</p>
</section>
<section
data-auto-animate
data-auto-animate-easing=
"cubic-bezier(0.770, 0.000, 0.175, 1.000)"
>
<h2>
Auto-Animate
</h2>
<p>
Automatically animate matching elements across slides with
<a
href=
"https://revealjs.netlify.app/auto-animate/"
>
Auto-Animate
</a>
.
</p>
<div
class=
"r-hstack justify-center"
>
<div
data-id=
"box1"
style=
"background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"
></div>
<div
data-id=
"box2"
style=
"background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"
></div>
<div
data-id=
"box3"
style=
"background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"
></div>
</div>
</section>
<section
data-auto-animate
data-auto-animate-easing=
"cubic-bezier(0.770, 0.000, 0.175, 1.000)"
>
<div
class=
"r-hstack justify-center"
>
<div
data-id=
"box1"
data-auto-animate-delay=
"0"
style=
"background: cyan; width: 150px; height: 100px; margin: 10px;"
></div>
<div
data-id=
"box2"
data-auto-animate-delay=
"0.1"
style=
"background: magenta; width: 150px; height: 100px; margin: 10px;"
></div>
<div
data-id=
"box3"
data-auto-animate-delay=
"0.2"
style=
"background: yellow; width: 150px; height: 100px; margin: 10px;"
></div>
</div>
<h2
style=
"margin-top: 20px;"
>
Auto-Animate
</h2>
</section>
<section
data-auto-animate
data-auto-animate-easing=
"cubic-bezier(0.770, 0.000, 0.175, 1.000)"
>
<div
class=
"r-stack"
>
<div
data-id=
"box1"
style=
"background: cyan; width: 300px; height: 300px; border-radius: 200px;"
></div>
<div
data-id=
"box2"
style=
"background: magenta; width: 200px; height: 200px; border-radius: 200px;"
></div>
<div
data-id=
"box3"
style=
"background: yellow; width: 100px; height: 100px; border-radius: 200px;"
></div>
</div>
<h2
style=
"margin-top: 20px;"
>
Auto-Animate
</h2>
</section>
<section>
<h2>
Touch Optimized
</h2>
<p>
...
...
dist/reveal.css
View file @
9d119270
This diff is collapsed.
Click to expand it.
dist/reveal.esm.js
View file @
9d119270
/*!
* reveal.js 4.0.0-
dev (Mon
May 1
8
2020)
* reveal.js 4.0.0-
rc.1 (Tue
May 1
9
2020)
* https://revealjs.com
* MIT licensed
*
...
...
dist/reveal.js
View file @
9d119270
/*!
* reveal.js 4.0.0-
dev (Mon
May 1
8
2020)
* reveal.js 4.0.0-
rc.1 (Tue
May 1
9
2020)
* https://revealjs.com
* MIT licensed
*
...
...
gulpfile.js
View file @
9d119270
...
...
@@ -260,7 +260,7 @@ gulp.task('serve', () => {
],
gulp
.
series
(
'
css-themes
'
))
gulp
.
watch
([
'
css/
reveal
.scss
'
,
'
css/
*
.scss
'
,
'
css/print/*.{sass,scss,css}
'
],
gulp
.
series
(
'
css-core
'
))
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment