auto-animate example in demo
This commit is contained in:
Hakim El Hattab
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
|
||||
*/
|
||||
|
||||
@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
|
||||
|
|
|
|||
26
demo.html
26
demo.html
|
|
@ -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>
|
||||
|
|
|
|||
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
|
||||
* 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
|
||||
* MIT licensed
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue