Skip to content

Commit 7094f44

Browse files
hakimelhakimel
committed
merge conflicts w preview & backgrounds
2 parents 8b355ea + 424f8ee commit 7094f44

14 files changed

Lines changed: 509 additions & 75 deletions

File tree

‎README.md‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A framework for easily creating beautiful presentations using HTML. [Check out t
55
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
66

77

8-
#### More reading::
8+
#### More reading:
99
- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.
1010
- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history.
1111
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
@@ -106,6 +106,9 @@ Reveal.initialize({
106106
// Transition speed
107107
transitionSpeed: 'default', // default/fast/slow
108108

109+
// Transition style for full page backgrounds
110+
backgroundTransition: 'default' // default/linear
111+
109112
});
110113
```
111114

@@ -211,18 +214,6 @@ Reveal.getCurrentSlide();
211214
Reveal.getIndices(); // { h: 0, v: 0 } }
212215
```
213216

214-
### States
215-
216-
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
217-
218-
Furthermore you can also listen to these changes in state via JavaScript:
219-
220-
```javascript
221-
Reveal.addEventListener( 'somestate', function() {
222-
// TODO: Sprinkle magic
223-
}, false );
224-
```
225-
226217
### Ready event
227218

228219
The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
@@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
245236
} );
246237
```
247238

239+
### States
240+
241+
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
242+
243+
Furthermore you can also listen to these changes in state via JavaScript:
244+
245+
```javascript
246+
Reveal.addEventListener( 'somestate', function() {
247+
// TODO: Sprinkle magic
248+
}, false );
249+
```
250+
251+
### Slide backgrounds
252+
253+
Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
254+
255+
```html
256+
<section data-background="#ff0000">
257+
<h2>All CSS color formats are supported, like rgba() or hsl().</h2>
258+
</section>
259+
<section data-background="http://example.com/image.png">
260+
<h2>This slide will have a full-size background image.</h2>
261+
</section>
262+
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
263+
<h2>This background image will be sized to 100px and repeated.</h2>
264+
</section>
265+
```
266+
267+
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call.
268+
269+
248270
### Internal links
249271

250272
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
@@ -282,7 +304,7 @@ Note that this does not work with the page and cube transitions.
282304

283305

284306
### Fragments
285-
Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
307+
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16
286308

287309
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
288310

@@ -583,11 +605,11 @@ The **basic setup** is for authoring presentations only. The **full setup** give
583605
584606
### Basic setup
585607
586-
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.g
608+
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
587609
588610
1. Download a copy of reveal.js from <https://github.com/hakimel/reveal.js/archive/master.zip>
589611
590-
2. Unizp and replace the example contents in index.html with your own
612+
2. Unzip and replace the example contents in index.html with your own
591613
592614
3. Open index.html in a browser to view it
593615

‎css/print/pdf.css‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717

1818
body {
1919
font-size: 18pt;
20-
width: auto;
21-
height: auto;
20+
width: 297mm;
21+
height: 229mm;
22+
margin: 0 auto !important;
2223
border: 0;
2324
padding: 0;
2425
float: none !important;
@@ -88,10 +89,8 @@ ul, ol, div, p {
8889

8990
left: auto;
9091
top: auto;
91-
margin-left: auto;
92-
margin-right: auto;
93-
margin-top: auto;
94-
padding: auto;
92+
margin: 0 !important;
93+
padding: 0 !important;
9594

9695
overflow: visible;
9796
display: block;
@@ -113,18 +112,18 @@ ul, ol, div, p {
113112
page-break-after: always !important;
114113

115114
visibility: visible !important;
116-
position: static !important;
115+
position: relative !important;
117116
width: 100% !important;
118-
height: auto !important;
119-
min-height: initial !important;
117+
height: 229mm !important;
118+
min-height: 229mm !important;
120119
display: block !important;
121-
overflow: visible !important;
120+
overflow: hidden !important;
122121

123122
left: 0 !important;
124123
top: 0 !important;
125-
margin-left: 0px !important;
126-
margin-top: 50px !important;
127-
padding: 20px 0px !important;
124+
margin: 0 !important;
125+
padding: 2cm 1cm 0 1cm !important;
126+
box-sizing: border-box !important;
128127

129128
opacity: 1 !important;
130129

@@ -139,9 +138,11 @@ ul, ol, div, p {
139138
transform: none !important;
140139
}
141140
.reveal section.stack {
142-
margin: 0px !important;
143-
padding: 0px !important;
141+
margin: 0 !important;
142+
padding: 0 !important;
144143
page-break-after: avoid !important;
144+
height: auto !important;
145+
min-height: auto !important;
145146
}
146147
.reveal section .fragment {
147148
opacity: 1 !important;
@@ -152,6 +153,17 @@ ul, ol, div, p {
152153
-ms-transform: none !important;
153154
transform: none !important;
154155
}
156+
.reveal section .slide-background {
157+
position: absolute;
158+
top: 0;
159+
left: 0;
160+
width: 100%;
161+
z-index: 0;
162+
}
163+
.reveal section>* {
164+
position: relative;
165+
z-index: 1;
166+
}
155167
.reveal img {
156168
box-shadow: none;
157169
}

‎css/reveal.css‎

Lines changed: 106 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1252,17 +1252,18 @@ body {
12521252
left: 0;
12531253
}
12541254

1255-
.no-transition {
1256-
-webkit-transition: none;
1257-
-moz-transition: none;
1258-
-ms-transition: none;
1259-
-o-transition: none;
1260-
transition: none;
1255+
.reveal .no-transition,
1256+
.reveal .no-transition * {
1257+
-webkit-transition: none !important;
1258+
-moz-transition: none !important;
1259+
-ms-transition: none !important;
1260+
-o-transition: none !important;
1261+
transition: none !important;
12611262
}
12621263

12631264

12641265
/*********************************************
1265-
* BACKGROUND STATES
1266+
* BACKGROUND STATES [DEPRECATED]
12661267
*********************************************/
12671268

12681269
.reveal .state-background {
@@ -1306,6 +1307,104 @@ body {
13061307
}
13071308

13081309

1310+
/*********************************************
1311+
*
1312+
*********************************************/
1313+
1314+
.reveal>.backgrounds {
1315+
position: absolute;
1316+
width: 100%;
1317+
height: 100%;
1318+
}
1319+
.reveal .slide-background {
1320+
position: absolute;
1321+
width: 100%;
1322+
height: 100%;
1323+
opacity: 0;
1324+
visibility: hidden;
1325+
1326+
background-color: rgba( 0, 0, 0, 0 );
1327+
background-position: 50% 50%;
1328+
background-repeat: no-repeat;
1329+
background-size: cover;
1330+
1331+
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
1332+
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
1333+
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
1334+
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
1335+
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
1336+
}
1337+
.reveal .slide-background.present {
1338+
opacity: 1;
1339+
visibility: visible;
1340+
}
1341+
1342+
.print-pdf .reveal .slide-background {
1343+
opacity: 1 !important;
1344+
visibility: visible !important;
1345+
}
1346+
1347+
/* Linear sliding transition style */
1348+
.reveal[data-background-transition=linear]>.backgrounds .slide-background {
1349+
opacity: 1;
1350+
1351+
-webkit-backface-visibility: hidden;
1352+
-moz-backface-visibility: hidden;
1353+
-ms-backface-visibility: hidden;
1354+
backface-visibility: hidden;
1355+
1356+
-webkit-transition-duration: 800ms;
1357+
-moz-transition-duration: 800ms;
1358+
-ms-transition-duration: 800ms;
1359+
-o-transition-duration: 800ms;
1360+
transition-duration: 800ms;
1361+
}
1362+
.reveal[data-background-transition=linear]>.backgrounds .slide-background.past {
1363+
-webkit-transform: translate(-100%, 0);
1364+
-moz-transform: translate(-100%, 0);
1365+
-ms-transform: translate(-100%, 0);
1366+
-o-transform: translate(-100%, 0);
1367+
transform: translate(-100%, 0);
1368+
}
1369+
.reveal[data-background-transition=linear]>.backgrounds .slide-background.future {
1370+
-webkit-transform: translate(100%, 0);
1371+
-moz-transform: translate(100%, 0);
1372+
-ms-transform: translate(100%, 0);
1373+
-o-transform: translate(100%, 0);
1374+
transform: translate(100%, 0);
1375+
}
1376+
1377+
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.past {
1378+
-webkit-transform: translate(0, -100%);
1379+
-moz-transform: translate(0, -100%);
1380+
-ms-transform: translate(0, -100%);
1381+
-o-transform: translate(0, -100%);
1382+
transform: translate(0, -100%);
1383+
}
1384+
.reveal[data-background-transition=linear]>.backgrounds .slide-background>.slide-background.future {
1385+
-webkit-transform: translate(0, 100%);
1386+
-moz-transform: translate(0, 100%);
1387+
-ms-transform: translate(0, 100%);
1388+
-o-transform: translate(0, 100%);
1389+
transform: translate(0, 100%);
1390+
}
1391+
1392+
1393+
/* Global transition speed settings */
1394+
.reveal[data-transition-speed="fast"]>.backgrounds .slide-background {
1395+
-webkit-transition-duration: 400ms;
1396+
-moz-transition-duration: 400ms;
1397+
-ms-transition-duration: 400ms;
1398+
transition-duration: 400ms;
1399+
}
1400+
.reveal[data-transition-speed="slow"]>.backgrounds .slide-background {
1401+
-webkit-transition-duration: 1200ms;
1402+
-moz-transition-duration: 1200ms;
1403+
-ms-transition-duration: 1200ms;
1404+
transition-duration: 1200ms;
1405+
}
1406+
1407+
13091408
/*********************************************
13101409
* RTL SUPPORT
13111410
*********************************************/

‎css/reveal.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -183,29 +183,12 @@ <h2>Themes</h2>
183183
</section>
184184

185185
<section>
186-
<section data-state="alert">
187-
<h2>Global State</h2>
188-
<p>
189-
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
190-
will be added as a class to the document element when the slide is open. This lets you
191-
apply broader style changes, like switching the background.
192-
</p>
193-
<a href="#" class="image navigate-down">
194-
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
195-
</a>
196-
</section>
197-
<section data-state="blackout">
198-
<h2>"blackout"</h2>
199-
<a href="#" class="image navigate-down">
200-
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
201-
</a>
202-
</section>
203-
<section data-state="soothe">
204-
<h2>"soothe"</h2>
205-
<a href="#" class="image navigate-next">
206-
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
207-
</a>
208-
</section>
186+
<h2>Global State</h2>
187+
<p>
188+
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
189+
will be added as a class to the document element when the slide is open. This lets you
190+
apply broader style changes, like switching the background.
191+
</p>
209192
</section>
210193

211194
<section data-state="customevent">
@@ -220,6 +203,26 @@ <h2>Custom Events</h2>
220203
</code></pre>
221204
</section>
222205

206+
<section>
207+
<section data-background="#007777">
208+
<h2>Slide Backgrounds</h2>
209+
<p>
210+
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
211+
</p>
212+
<a href="#" class="image navigate-down">
213+
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
214+
</a>
215+
</section>
216+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png">
217+
<h2>Image Backgrounds</h2>
218+
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
219+
</section>
220+
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" data-background-repeat="repeat" data-background-size="100px">
221+
<h2>Repeated Image Backgrounds</h2>
222+
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
223+
</section>
224+
</section>
225+
223226
<section>
224227
<h2>Clever Quotes</h2>
225228
<p>

0 commit comments

Comments
 (0)