├── README.md
├── estilos.css
├── img
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
└── thumb.png
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Como Animar elementos al Scrollear | Animate on Scroll (Javascript)
2 | ### [Tutorial: https://youtu.be/wu_M_V-Hehg](https://youtu.be/wu_M_V-Hehg)
3 |
4 | 
5 |
6 | Por: [FalconMasters](http://www.falconmasters.com)
--------------------------------------------------------------------------------
/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background: #DCDFD9;
9 | font-family: 'Readex Pro', sans-serif;
10 | color: #1b3231;
11 | }
12 |
13 | .hero {
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | min-height: 35vh;
18 | font-size: 36px;
19 | text-transform: uppercase;
20 | }
21 |
22 | .container {
23 | width: 90%;
24 | max-width: 1200px;
25 | margin: 100px auto;
26 | display: flex;
27 | flex-direction: column;
28 | position: relative;
29 | }
30 |
31 | .container::after {
32 | content: "";
33 | width: 2px;
34 | height: 100%;
35 | background: #1b3231;
36 | position: absolute;
37 | top: 0;
38 | left: calc(50% - 1px);
39 | z-index: 1;
40 | }
41 |
42 | .evento {
43 | display: flex;
44 | justify-content: space-between;
45 | margin-bottom: 200px;
46 | position: relative;
47 | }
48 |
49 | .evento::after {
50 | content: "";
51 | display: block;
52 | width: 14px;
53 | height: 14px;
54 | border-radius: 100px;
55 | background: #DCDFD9;
56 | border: 2px solid #1b3231;
57 | position: absolute;
58 | z-index: 2;
59 | top: calc(50% - 9px);
60 | left: calc(50% - 9px);
61 | }
62 |
63 | .fecha {
64 | display: flex;
65 | align-items: center;
66 | justify-content: start;
67 | width: calc(42% + 20px);
68 | font-size: 32px;
69 | font-weight: normal;
70 | }
71 |
72 | .foto {
73 | width: 42%;
74 | border: 10px solid #fff;
75 | position: relative;
76 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
77 | }
78 |
79 | .foto::after {
80 | content: "";
81 | display: block;
82 | border: 20px solid transparent;
83 | border-left: 20px solid #fff;
84 | position: absolute;
85 | right: -50px;
86 | top: calc(50% - 20px);
87 | }
88 |
89 | .foto img {
90 | width: 100%;
91 | vertical-align: top;
92 | }
93 |
94 | .evento:nth-child(even) {
95 | flex-direction: row-reverse;
96 | }
97 |
98 | .evento:nth-child(even) .fecha {
99 | justify-content: end;
100 | }
101 |
102 | .evento:nth-child(even) .foto::after {
103 | content: "";
104 | border: 20px solid transparent;
105 | border-right: 20px solid #fff;
106 | right: initial;
107 | left: -50px;
108 | }
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/1.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/2.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/3.jpg
--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/4.jpg
--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/5.jpg
--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/6.jpg
--------------------------------------------------------------------------------
/img/thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/tutorial-animate-on-scroll/def86f00004f70afdff463fa3c18162210fd8b04/img/thumb.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Animación al Scrollear
14 |
15 |
16 |
17 |
Mis Viajes
18 |
19 |
20 |
21 |
22 |
23 |
24 |
9 de Enero de 2021
25 |
26 |
27 |
28 |
29 |
30 |
3 de Febrero de 2021
31 |
32 |
33 |
34 |
35 |
36 |
7 de Junio de 2022
37 |
38 |
39 |
40 |
41 |
42 |
18 de Agosto de 2023
43 |
44 |
45 |
46 |
47 |
48 |
26 de Noviembre de 2024
49 |
50 |
51 |
52 |
53 |
54 |
7 de Diciembre de 2021
55 |
56 |