Discriptin:
This is an interactive "Animated Line and Card Expansion" component to enhance the user experience
on our website. The component will feature animated lines and an expanding hover state for information
cards.
This is produced by using React 18 and MUI, ensure compliance with ADA standards for accessibility, including screen reader support and keyboard navigation and implement the design responsively, with distinct behaviors for desktop, tablet, and mobile as specified
- As the user scrolls down the page, the lines on the section titled "Insurance" will animate.<br/>
- The animation consists of redrawing the light grey lines with a darker line, starting from the center line under "Insurance".<br/>
- The lines will progressively get darker upon scrolling, transitioning from Mid-Grey to BG Steel
- The card's size increases, specifically in height, which is observable by the increased padding compared to other cards.
- The arrow icon within the card will shift to the right by 8px.
- The background color of the card will transition from BG Grey to Parchment
- The "Active Insurance" title is not displayed.
- All lines within the section are removed.
- The "Insurance" and "Security Services" categories are presented with their respective cardsstacked vertically
Runs the app in the development mode.\
Open [http:https://localhost:3000](http:https://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
Start Jset testing
On the internet, download cypress.zip.
Open cypress.exe, then select the project folder.
Select testing mode to E2E testing.
Choose spec files to run.
You can see the testing result.
The Intersection Observer API lets code register a callback function that is executed whenever a particular element enters or exits an intersection with another element (or the viewport), or when the intersection between two elements changes by a specified amount.
Create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other:
let options = {
root: document.querySelector("#scrollArea"),
rootMargin: "0px",
threshold: 1.0,
};
let observer = new IntersectionObserver(callback, options);The options object passed into the IntersectionObserver() constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:
new IntersectionObserver(callback)
new IntersectionObserver(callback, options)
let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });let target = document.querySelector("#listItem");
observer.observe(target);Whenever the target meets a threshold specified for the IntersectionObserver, the callback is invoked. The callback receives a list of IntersectionObserverEntry objects and the observer:
let callback = (entries, observer) => {
entries.forEach((entry) => {
// Each entry describes an intersection change for one observed
// target element:
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
});
};{
"id": "animated-line-card-expansion",
"title": "Active Insurance",
"sections": [
{
"id": "insurance",
"title": "Insurance",
"cards": [
{
"id": "active-cyber-insurance",
"title": "Active Cyber Insurance",
"body": "Manage and transfer cyber risk with broad coverage..."
},
{
"id": "active-tech-eo",
"title": "Active Tech E&O",
"body": "Comprehensive and innovative errors and omissions coverage..."
}
// More cards...
]
},
{
"id": "security-services",
"title": "Security & Services",
"cards": [
// Cards for Security & Services...
]
}
]
}
.PNG)