Efecto créditos de una película en un div
Publicado por Marta (32 intervenciones) el 25/02/2021 21:31:56
Buenas, he encontrado por internet el efecto como si fueran los créditos de una película, es decir, va subiendo el texto.
Me gustaría que este efecto, en lugar de darse en una posición concreta (position:absolute) se diera dentro de un div. Y no hay manera de conseguirlo.
Alguien podría darme una pista? Gracias
El código html es este y funciona. Pero a mi me gustaría añadir un div de 300px al inicio (antes de <div class='wrapper') y que los créditos no pasaran por encima de este div. Es decir, sólo quiero este efecto dentro del <div class='wrapper'>
y el css, este:
Me gustaría que este efecto, en lugar de darse en una posición concreta (position:absolute) se diera dentro de un div. Y no hay manera de conseguirlo.
Alguien podría darme una pista? Gracias
El código html es este y funciona. Pero a mi me gustaría añadir un div de 300px al inicio (antes de <div class='wrapper') y que los créditos no pasaran por encima de este div. Es decir, sólo quiero este efecto dentro del <div class='wrapper'>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<div class='wrapper'>
<div class='movie'>
Welcome</div>
<div class='job'>
Myscript2010</div>
<div class='name'>
LEARN EDITING SCRIPT</div>
<div class='job'>
WITH CODE</div>
<div class='name'>
CSS HTML EFFECT</div>
<div class='job'>
SOURCES CODE</div>
<div class='name'>
CODEPEN GITHUB</div>
<div class='job'>
SOURCE NEXT</div>
<div class='name'>
ALL SOURCES CODE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SHINE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ROTATE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SLIDE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT HOVER</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSISI</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TOOLTIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT RADIAL</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT MULTIPLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ANIMATED</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT EXPANDING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSFORMS</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OVERLAY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LOADING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT CIRCLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT NAPIGATION</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT DROPDOWN</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LIGHTING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ZOOM</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SCALE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OPACITY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLASHING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFCET SMOKE</div>
<div class='job'>
CODE EDITED BY.</div>
<div class='name'>
MYSCRIPT2010</div>
<div class='job'>
</div>
<div class='name'>
CIBEBER CIMAHI</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
@
</div>
<div class='name'>
@</div>
y el css, este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html, body {
height: 100%;
}body {background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%);
overflow: hidden;}.wrapper {
position: absolute;top: 100%;
left: 50%;
width: 400px;margin-left: -200px;
font: 300 30px/1 'Open Sans Condensed', sans-serif;
text-align: center;
text-transform: uppercase;
color: #fff;
animation: 60s credits linear infinite;}.movie {
margin-bottom: 50px;
font-size: 50px;
}.job {
margin-bottom: 5px;
font-size: 18px;
}.name {
margin-bottom: 50px;
font-size: 35px;
}@keyframes credits {0% {
top: 100%;
}100% {
top: -500%;
}}Valora esta pregunta
0
