From 1fd2213192d22880706440e7f724bdc6db966ee0 Mon Sep 17 00:00:00 2001 From: Juan Marin Noguera Date: Tue, 22 Aug 2023 17:56:56 +0200 Subject: Añadida presentación MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- present/examples/auto-animate.html | 225 +++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 present/examples/auto-animate.html (limited to 'present/examples/auto-animate.html') diff --git a/present/examples/auto-animate.html b/present/examples/auto-animate.html new file mode 100644 index 0000000..199810e --- /dev/null +++ b/present/examples/auto-animate.html @@ -0,0 +1,225 @@ + + + + + + + reveal.js - Auto Animate + + + + + + + + + + +
+ +
+
+

Auto-Animate Example

+

This will fade out

+ + 

+						function Example() {
+						  const [count, setCount] = useState(0);
+						}
+
+
+
+

Auto-Animate Example

+

This will fade out

+

This element is unmatched

+ + 

+						function Example() {
+						  New line!
+						  const [count, setCount] = useState(0);
+						}
+
+
+ +
+

Line Height & Letter Spacing

+
+
+

Line Height & Letter Spacing

+
+ +
+
+ 

+							import React, { useState } from 'react';
+
+							function Example() {
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    ...
+							  );
+							}
+
+
+
+ 

+							function Example() {
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    <div>
+							      <p>You clicked {count} times</p>
+							      <button onClick={() => setCount(count + 1)}>
+							        Click me
+							      </button>
+							    </div>
+							  );
+							}
+
+
+
+ 

+							function Example() {
+							  // A comment!
+							  const [count, setCount] = useState(0);
+
+							  return (
+							    <div>
+							      <p>You clicked {count} times</p>
+							      <button onClick={() => setCount(count + 1)}>
+							        Click me
+							      </button>
+							    </div>
+							  );
+							}
+
+
+
+ +
+
+

Swapping list items

+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • One
    • +
  • Three
    • +
+
+
+

Swapping list items

+
    +
  • Two
    • +
  • Three
    • +
  • One
    • +
+
+
+ +
+

SLIDE 1

+

Animate Anything

+
+
+
+
+
+
+

SLIDE 2

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+
+

SLIDE 3

+

With Auto Animate

+
+
+
+
+
+ +
+

data-auto-animate-id="a"

+

A1

+
+
+

data-auto-animate-id="a"

+

A1

+

A2

+
+
+

data-auto-animate-id="b"

+

B1

+
+
+

data-auto-animate-id="b"

+

B1

+

B2

+
+ +
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+ Slide 4
+
A
+
+
+ +
+ +
+ + + + + + + -- cgit v1.2.3