github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-19 12:15:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16166 from overleaf/mf-homepage-typing-animation

Browse source 
Create a typing animation in homepage

GitOrigin-RevId: 0eea5ebec60f942f99f1e4f50595c56799ab9398
This commit is contained in:
M Fahru 2023-12-13 07:35:35 -07:00 • committed by Copybot
parent f67d517582
commit a79d115693
2 changed files with 67 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
services/web/frontend/js/pages/marketing/homepage.js
View file

@ -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()

20
services/web/frontend/stylesheets/app/homepage.less
View file

@ -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;