feat: add animated background #3266
Conversation
radium-v
requested review from
chrisdholt,
janechu and
nicholasrice
as code owners
sites/fast-website/src/app/components/background-design/background-design.ts
Outdated
Show resolved
Hide resolved
sites/fast-website/src/app/components/background-design/background-design.ts
Show resolved
Hide resolved
| display: flex; | ||
| height: 100vh; |
There was a problem hiding this comment.
I noticed that the title of features is being cut off when it is scrolled to on edge, and in safari features is being rendered on top of the bottom of frameworks. If height is changed back to min-height it seems to fix these issues.
edge:
safari:
There was a problem hiding this comment.
I too was seeing sections overlap in Edge, Firefox, Chrome, Opera, and Safari. Changing height in .section fixes most of it. At 750px wide and below when the community section changes to single column it overlaps the footer. Perhaps an adjustment to the .community-section margin-bottom property for smaller screen widths. The animation looks great!
There was a problem hiding this comment.
I'll move the negative margin declarations into media queries to prevent issues on smaller screens, and change the height back to min-height.
There was a problem hiding this comment.
This is looking awesome now. I do still see some footer overlap at 750px and under when the community section goes to single column (except for Safari oddly enough), but everything else is looking great. Very smooth.
| ); | ||
|
|
||
| let last = window.performance.now(); | ||
| const performAnimation = () => { |
There was a problem hiding this comment.
Any reason not to use the timestamp provided to the rAF callback by the platform?
There was a problem hiding this comment.
This could be a lead to fixing some performance issues in Firefox. I'll switch and see if there's any impact.
There was a problem hiding this comment.
Turns out this was part of the culprit! Firefox reduces precision for performance.now() for security reasons: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#Reduced_time_precision
radium-v
force-pushed
the
users/jokreitl/site-bg-wave
branch
from
ca6f762 to
e7d5aa5
Compare
sites/fast-website/src/app/components/background-design/background-design.ts
Outdated
Show resolved
Hide resolved
radium-v
force-pushed
the
users/jokreitl/site-bg-wave
branch
from
e7d5aa5 to
dd37532
Compare
- Switch to ref directive to target canvas element - Use built-in rAF timing - Fix slow frametime rejection
radium-v
force-pushed
the
users/jokreitl/site-bg-wave
branch
from
dd37532 to
347f134
Compare
* Add animated background * fix footer logo collision * fix section height and account for header and footer * improve background animation - Switch to ref directive to target canvas element - Use built-in rAF timing - Fix slow frametime rejection
* Add animated background * fix footer logo collision * fix section height and account for header and footer * improve background animation - Switch to ref directive to target canvas element - Use built-in rAF timing - Fix slow frametime rejection
Description
This adds the animated background to the new homepage, adapted from Parker's original animation deliverable.
Issue type checklist
Is this a breaking change?
Adding or modifying component(s) in
@microsoft/fast-componentschecklistProcess & policy checklist