I am attempting to create a page where the content on the screen appears 3 seconds after the page loads. By the other posts I have seen on this website, I attempted the scripting below, though with no success (Everything appears at the same time).
First is the section I am attempting to delay, then is the whole pages script. Any guidance is very much appreciated. (I am hoping I am wording everything correctly this time so I don’t get another -1)
Section to delay:
JavaScript
x
23
23
1
<div class="content">2
<div id="fade">3
<h1>Main Text</h1>4
<h3>Secondary Text</h3>5
<a href="#about" class="btn">Read More</a>6
</div>7
</div>8
</section>9
10
11
<style>#fade p {12
opacity: 0;13
margin-top: 25px;14
font-size: 21px;15
text-align: center;16
}17
</style>18
19
<script>20
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);21
</script>22
23
And here is the entire page
JavaScript
1
167
167
1
<html>2
<head>3
<title>Untitled Document</title>4
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">5
</head>6
7
<body bgcolor="#000000" marginwidth="0" marginheight="0">8
9
10
11
12
13
<section class="showcase"> 14
<div class="video-container">15
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>16
</div>17
18
19
20
21
22
23
24
25
<div class="content">26
<div id="fade">27
<h1>Main Text</h1>28
<h3>Secondary Text</h3>29
<a href="#about" class="btn">Read More</a>30
</div>31
</div>32
</section>33
34
35
<style>#fade p {36
opacity: 0;37
margin-top: 25px;38
font-size: 21px;39
text-align: center;40
}41
</style>42
43
<script>44
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);45
</script>46
47
48
49
50
<style>51
52
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');53
54
:root {55
--primary-color: #3a4052;56
}57
58
* {59
box-sizing: border-box;60
margin: 0;61
padding: 0;62
}63
64
body {65
font-family: 'Open Sans', sans-serif;66
line-height: 1.5;67
}68
69
a {70
text-decoration: none;71
color: var(--primary-color);72
}73
74
h1 {75
font-weight: 300;76
font-size: 60px;77
line-height: 1.2;78
margin-bottom: 15px;79
}80
81
.showcase {82
height: 100vh;83
display: flex;84
align-items: center;85
justify-content: center;86
text-align: center;87
color: #fff;88
padding: 0 20px;89
}90
91
.video-container {92
position: absolute;93
top: 0;94
left: 0;95
width: 100%;96
height: 100%;97
overflow: hidden;98
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center99
center/cover;100
}101
102
.video-container video {103
min-width: 100%;104
min-height: 100%;105
position: absolute;106
top: 50%;107
left: 50%;108
transform: translate(-50%, -50%);109
object-fit: cover;110
}111
112
.video-container:after {113
content: '';114
z-index: 1;115
height: 100%;116
width: 100%;117
top: 0;118
left: 0;119
background: rgba(0, 0, 0, 0.5);120
position: absolute;121
}122
123
.content {124
z-index: 2;125
}126
127
.btn {128
display: inline-block;129
padding: 10px 30px;130
background: var(--primary-color);131
color: #fff;132
border-radius: 5px;133
border: solid #fff 1px;134
margin-top: 25px;135
opacity: 0.7;136
}137
138
.btn:hover {139
transform: scale(0.98);140
}141
142
#about {143
padding: 40px;144
text-align: center;145
}146
147
#about p {148
font-size: 1.2rem;149
max-width: 600px;150
margin: auto;151
}152
153
#about h2 {154
margin: 30px 0;155
color: var(--primary-color);156
}157
158
.social a {159
margin: 0 5px;160
}161
162
</style>163
164
</body>165
</html>166
167
Advertisement
Answer
Here is what I ended up changing it all to, to make it work. Hopefully this will help others that are looking to do this.
JavaScript
1
136
136
1
.content {2
-webkit-animation: 3s ease 0s normal forwards 1 fadein;3
animation: 3s ease 0s normal forwards 1 fadein;4
}5
6
@keyframes fadein {7
0% {8
opacity: 0;9
}10
66% {11
opacity: 0;12
}13
100% {14
opacity: 1;15
}16
}17
18
@-webkit-keyframes fadein {19
0% {20
opacity: 0;21
}22
66% {23
opacity: 0;24
}25
100% {26
opacity: 1;27
}28
}29
30
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');31
:root {32
--primary-color: #3a4052;33
}34
35
* {36
box-sizing: border-box;37
margin: 0;38
padding: 0;39
}40
41
body {42
font-family: 'Open Sans', sans-serif;43
line-height: 1.5;44
}45
46
a {47
text-decoration: none;48
color: var(--primary-color);49
}50
51
h1 {52
font-weight: 300;53
font-size: 60px;54
line-height: 1.2;55
margin-bottom: 15px;56
}57
58
.showcase {59
height: 100vh;60
display: flex;61
align-items: center;62
justify-content: center;63
text-align: center;64
color: #fff;65
padding: 0 20px;66
}67
68
.video-container {69
position: absolute;70
top: 0;71
left: 0;72
width: 100%;73
height: 100%;74
overflow: hidden;75
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center center/cover;76
}77
78
.video-container video {79
min-width: 100%;80
min-height: 100%;81
position: absolute;82
top: 50%;83
left: 50%;84
transform: translate(-50%, -50%);85
object-fit: cover;86
}87
88
.video-container:after {89
content: '';90
z-index: 1;91
height: 100%;92
width: 100%;93
top: 0;94
left: 0;95
background: rgba(0, 0, 0, 0.5);96
position: absolute;97
}98
99
.content {100
z-index: 2;101
}102
103
.btn {104
display: inline-block;105
padding: 10px 30px;106
background: var(--primary-color);107
color: #fff;108
border-radius: 5px;109
border: solid #fff 1px;110
margin-top: 25px;111
opacity: 0.7;112
}113
114
.btn:hover {115
transform: scale(0.98);116
}117
118
#about {119
padding: 40px;120
text-align: center;121
}122
123
#about p {124
font-size: 1.2rem;125
max-width: 600px;126
margin: auto;127
}128
129
#about h2 {130
margin: 30px 0;131
color: var(--primary-color);132
}133
134
.social a {135
margin: 0 5px;136
}JavaScript
1
10
10
1
<section class="showcase">2
<div class="video-container">3
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>4
</div>5
<div class="content">6
<h1>Main Text</h1>7
<h3>Secondary Text</h3>8
<a href="#about" class="btn">Read More</a>9
</div>10
</section>