auto-animate example in demo
parent
815557c1d8
commit
9d11927066
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
|
@ -6,6 +6,7 @@
|
||||||
* Copyright (C) Hakim El Hattab, https://hakim.se
|
* Copyright (C) Hakim El Hattab, https://hakim.se
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import 'layout';
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
|
@ -213,30 +214,6 @@ html.reveal-full-page {
|
||||||
position: relative;
|
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
|
* CONTROLS
|
||||||
|
|
26
demo.html
26
demo.html
|
@ -137,6 +137,32 @@
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
<section>
|
||||||
<h2>Touch Optimized</h2>
|
<h2>Touch Optimized</h2>
|
||||||
<p>
|
<p>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* reveal.js 4.0.0-dev (Mon May 18 2020)
|
* reveal.js 4.0.0-rc.1 (Tue May 19 2020)
|
||||||
* https://revealjs.com
|
* https://revealjs.com
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* reveal.js 4.0.0-dev (Mon May 18 2020)
|
* reveal.js 4.0.0-rc.1 (Tue May 19 2020)
|
||||||
* https://revealjs.com
|
* https://revealjs.com
|
||||||
* MIT licensed
|
* MIT licensed
|
||||||
*
|
*
|
||||||
|
|
|
@ -260,7 +260,7 @@ gulp.task('serve', () => {
|
||||||
], gulp.series('css-themes'))
|
], gulp.series('css-themes'))
|
||||||
|
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'css/reveal.scss',
|
'css/*.scss',
|
||||||
'css/print/*.{sass,scss,css}'
|
'css/print/*.{sass,scss,css}'
|
||||||
], gulp.series('css-core'))
|
], gulp.series('css-core'))
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue