mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-02 09:25:47 +00:00
Merge pull request #16166 from overleaf/mf-homepage-typing-animation
Create a typing animation in homepage GitOrigin-RevId: 0eea5ebec60f942f99f1e4f50595c56799ab9398
This commit is contained in:
parent
f67d517582
commit
a79d115693
2 changed files with 67 additions and 6 deletions
|
@ -28,3 +28,56 @@ function realTimeEditsDemo() {
|
|||
nextFrame()
|
||||
}
|
||||
realTimeEditsDemo()
|
||||
|
||||
function homepageAnimation() {
|
||||
function createFrames(word, { buildTime, holdTime, breakTime }) {
|
||||
const frames = []
|
||||
let current = ''
|
||||
|
||||
// Build up the word
|
||||
for (const char of word) {
|
||||
current += char
|
||||
frames.push({ before: current, time: buildTime })
|
||||
}
|
||||
|
||||
// Hold the complete word
|
||||
frames.push({ before: current, time: holdTime })
|
||||
|
||||
// Break down the word
|
||||
for (let i = word.length - 1; i > 0; i--) {
|
||||
current = word.substring(0, i)
|
||||
frames.push({ before: current, time: breakTime })
|
||||
}
|
||||
|
||||
// Add the final frame with an empty string
|
||||
frames.push({ before: '', time: holdTime })
|
||||
|
||||
return frames
|
||||
}
|
||||
|
||||
const opts = {
|
||||
buildTime: 100,
|
||||
holdTime: 1000,
|
||||
breakTime: 100,
|
||||
}
|
||||
|
||||
const frames = [
|
||||
...createFrames('article', opts),
|
||||
...createFrames('theses', opts),
|
||||
...createFrames('reports', opts),
|
||||
...createFrames('presentations', opts),
|
||||
...createFrames('anything', opts),
|
||||
]
|
||||
|
||||
let index = 0
|
||||
function nextFrame() {
|
||||
const frame = frames[index]
|
||||
index = (index + 1) % frames.length
|
||||
|
||||
$('#home-animation-text').html(frame.before)
|
||||
setTimeout(nextFrame, frame.time)
|
||||
}
|
||||
|
||||
nextFrame()
|
||||
}
|
||||
homepageAnimation()
|
||||
|
|
|
@ -346,24 +346,32 @@
|
|||
.home-top-begin-text {
|
||||
display: flex;
|
||||
color: #5f5ff0;
|
||||
font-size: 65px;
|
||||
line-height: 80px;
|
||||
font-size: 4rem;
|
||||
line-height: 1.25;
|
||||
font-family: 'DM Mono', monospace;
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-top-parenthesis-text {
|
||||
color: #bbdbb8;
|
||||
font-size: 65px;
|
||||
line-height: 80px;
|
||||
font-size: 4rem;
|
||||
line-height: 1.25;
|
||||
font-family: 'DM Mono', monospace;
|
||||
display: inherit;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -454,7 +462,7 @@
|
|||
}
|
||||
|
||||
.tos-agreement-notice {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
|
||||
a {
|
||||
color: @green-60;
|
||||
|
@ -465,7 +473,7 @@
|
|||
}
|
||||
|
||||
.home-register-newsletter-checkbox {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
|
|
Loading…
Reference in a new issue