add animation to text and images

PranavBarthwal · Jun 10, 2024 · 2357918 · 2357918
1 parent ec323bc
commit 2357918
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -12,11 +12,22 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="./src/main.jsx"></script>
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init(
+        {
+          duration: 1000, 
+          easing: 'ease', 
+          once: false, 
+        }
+      );
+    </script>
 </body>
 
 </html>
diff --git a/src/components/Apod/Apod.jsx b/src/components/Apod/Apod.jsx
@@ -39,13 +39,13 @@ function Apod() {
   return (
 
     <>
-      <h1 align="center" className={Styles['section_title'] + " " + Styles['section_title_mobile']} id="apod">Astronomy Picture of The Day</h1 >
+      <h1 align="center" className={Styles['section_title'] + " " + Styles['section_title_mobile']} id="apod" data-aos="zoom-in-up" data-aos-easing="ease-in-out">Astronomy Picture of The Day</h1 >
 
       <div className="container my-5 overflow-x-hidden">
 
         <div className="row mx-1 p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg" id="class_removal">
 
-          <div className="col-lg-7 p-3 p-lg-5 pt-lg-3">
+          <div className="col-lg-7 p-3 p-lg-5 pt-lg-3" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
 
             <h2 id="title" className="display-7 fw-bold lh-1 text-light">{apodInfo.title ? apodInfo.title : "APoD Title"}</h2>
 
@@ -55,7 +55,7 @@ function Apod() {
 
           </div>
 
-          <div className={Styles["apod_img_container"]}>
+          <div className={Styles["apod_img_container"]} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div className={Styles["img"]}>
               {
                 apodInfo.media_type == "video" ?

diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
@@ -71,12 +71,12 @@ function ContactForm() {
 
   return (
     <>
-      <h1 align="center" className={Styles["section_title"]} id="contact">Contact Us</h1>
+      <h1 align="center" className={Styles["section_title"]} id="contact" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Contact Us</h1>
       <div className={Styles["contact-form"]}>
-        <div className={Styles["left"]}>
+        <div className={Styles["left"]} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
           <img src={img} className={Styles["contact_img"]} alt="Contact Image" style={{ maxWidth: "100%" }} />
         </div>
-        <div className={Styles["right"]}>
+        <div className={Styles["right"]} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
           <form className={Styles["form"]}>
             <div className="mb-3">
               <input type="text" autoComplete='off' className={Styles["form-control"] + " " + "form-control"} id="exampleInputName" name='name' value={contactInfo.name} onChange={handleChange} placeholder="Enter your name" />

diff --git a/src/components/DisplayDetails/DisplayDetails.jsx b/src/components/DisplayDetails/DisplayDetails.jsx
@@ -7,42 +7,42 @@ function DisplayDetails({ roverInfo }) {
   return (
     <div id={Styles['container']}>
 
-      <div id={Styles['rover-img']}>
+      <div id={Styles['rover-img']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <img src={roverInfo.url ? roverInfo.url : img}
           alt="Rover" />
       </div>
 
       <div id={Styles['rover-info']}>
 
-        <div className={Styles['rover-info-items']}><h4>Rover Name</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Rover Name</h4>
           <p className="roverName">
             {roverInfo.roverName ? roverInfo.roverName : "...."}
           </p></div>
 
-        <div className={Styles['rover-info-items']}><h4>Earth Date</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Earth Date</h4>
           <p className="date">
             {roverInfo.earthDate ? roverInfo.earthDate : "...."}
           </p>
         </div>
 
-        <div className={Styles['rover-info-items']}><h4>Launch Date</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Launch Date</h4>
           <p className="launch">
             {roverInfo.launchDate ? roverInfo.launchDate : "...."}
           </p>
         </div>
 
-        <div className={Styles['rover-info-items']}><h4>Land Date</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Land Date</h4>
           <p className="land">
             {roverInfo.landingDate ? roverInfo.landingDate : "...."}
           </p>
         </div>
 
-        <div className={Styles['rover-info-items']}><h4>Camera</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Camera</h4>
           <p className="camera">
             {roverInfo.cameraName ? roverInfo.cameraName : "...."}
           </p></div>
 
-        <div className={Styles['rover-info-items']}><h4>Status</h4>
+        <div className={Styles['rover-info-items']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><h4>Status</h4>
           <p className="status">
             {roverInfo.status ? roverInfo.status : "...."}
           </p></div>

diff --git a/src/components/ProjectCard/ProjectCard.jsx b/src/components/ProjectCard/ProjectCard.jsx
@@ -4,7 +4,7 @@ import { Parser } from 'html-to-react'
 
 function ProjectCard({ projectId, title, acronym, description, startDate, endDate, lastUpdated, status }) {
     return (
-        <div className={Styles['card']}>
+        <div className={Styles['card']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <h1 >
                 <span className={Styles['title']}>Project Id:</span> {projectId}
             </h1>

diff --git a/src/pages/About/About.jsx b/src/pages/About/About.jsx
@@ -59,16 +59,16 @@ function About() {
             </section>
 
             <section id={Styles.section_2}>
-                <h1><u>Our Vision </u></h1>
-                <div>
+                <h1 data-aos="fade-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Our Vision </u></h1>
+                <div data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <p>Explore the cosmos with CosmoXplore and stay informed about the innovations driving humanity's journey into the final frontier. Join us in discovering the beauty and mysteries of space, one photo and breakthrough at a time.As an open source organization, we are committed to transparency, collaboration, and community-driven development.</p>
                     <img src={vision} width='400px' height='400px' />
                 </div>
             </section>
 
             <section id={Styles.section_3}>
-                <h1><u>Our Methods</u></h1>
-                <div>
+                <h1 data-aos="fade-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Our Methods</u></h1>
+                <div data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                     <img src={method} width='400px' height='400px' />
                     <p>Our platform brings you stunning Astronomy Picture of the Day (APOD) images, fascinating photos of Mars, and updates on the latest technological breakthroughs at NASA. Utilizing NASA's open API, we deliver a seamless and engaging experience for space enthusiasts and curious minds alike.</p>
                 </div>
@@ -77,8 +77,8 @@ function About() {
             <section id={Styles.section_4}>
 
                 <div id={Styles.founder}>
-                    <h1><u>Our Founder</u></h1>
-                    <div>
+                    <h1 data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Our Founder</u></h1>
+                    <div data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                         <img src={founder.avatar_url} />
                         <h3>{founder.login}</h3>
                         <div id={Styles.social}>
@@ -89,12 +89,12 @@ function About() {
                 </div>
 
                 <div id={Styles.contributors}>
-                    <h2><u>Our Contributors</u></h2>
+                    <h2 data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Our Contributors</u></h2>
 
                     <div id={Styles.cards}>
                         {
                             pageinatedContributors.map((user, idx) => (
-                                <div key={idx} className={Styles.card}>
+                                <div key={idx} className={Styles.card} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                                     <img src={user.avatar_url} />
                                     <h3>{user.login}</h3>
                                     <div id={Styles.social}>

diff --git a/src/pages/MarsRover/MarsRover.jsx b/src/pages/MarsRover/MarsRover.jsx
@@ -119,13 +119,13 @@ function MarsRover() {
             <hr />
 
             <section id={Styles['section-2']}>
-                <h1 className={Styles['section_title']}>Mars Rovers</h1>
+                <h1 className={Styles['section_title']} data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="900" data-aos-offset="170" data-aos-easing="ease-in-out">Mars Rovers</h1>
                 <div id={Styles['rover-wrapper']}>
 
                     <div className={Styles['rover-card']}>
-                        <h1><u>Curiosity</u></h1>
+                        <h1 data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Curiosity</u></h1>
                         <div className={Styles['rover']}>
-                            <div className={Styles['rover-left']}>
+                            <div className={Styles['rover-left']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                                 <div className={Styles['rover-model']}>
                                     <Curiosity />
                                 </div>
@@ -134,14 +134,14 @@ function MarsRover() {
                                     <h3>Landing Date: 06 August, 2012</h3>
                                 </div>
                             </div>
-                            <p>Launched in 2011, NASA's Curiosity rover is a Mars Science Laboratory mission currently exploring Gale Crater.Its primary mission is to determine past Martian habitability and search for potential biosignatures.  Curiosity transmits data and imagery back to Earth, furthering our understanding of the Red Planet's geology and past environment.<br /><a href="https://en.wikipedia.org/wiki/Curiosity_(rover)" target="_blank" >learn more here</a>👈</p>
+                            <p data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Launched in 2011, NASA's Curiosity rover is a Mars Science Laboratory mission currently exploring Gale Crater.Its primary mission is to determine past Martian habitability and search for potential biosignatures.  Curiosity transmits data and imagery back to Earth, furthering our understanding of the Red Planet's geology and past environment.<br /><a href="https://en.wikipedia.org/wiki/Curiosity_(rover)" target="_blank" >learn more here</a>👈</p>
                         </div>
                     </div>
 
                     <div className={Styles['rover-card']}>
-                        <h1><u>Perseverance</u></h1>
+                        <h1 data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Perseverance</u></h1>
                         <div className={Styles['rover']}>
-                            <div className={Styles['rover-left']}>
+                            <div className={Styles['rover-left']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                                 <div className={Styles['rover-model']}>
                                     <Perseverance />
                                 </div>
@@ -150,14 +150,14 @@ function MarsRover() {
                                     <h3>Landing Date: 18 February, 2021</h3>
                                 </div>
                             </div>
-                            <p>The Perseverance rover, a robotic astrobiology vehicle launched by NASA in 2020, is currently investigating Mars' Jezero Crater.Perseverance's primary mission is to collect rock samples and analyze the Martian geological makeup, all while searching for potential biosignatures indicative of past microbial life.<br /><a href="https://en.wikipedia.org/wiki/Perseverance_(rover)" target="_blank" >learn more here</a>👈</p>
+                            <p data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">The Perseverance rover, a robotic astrobiology vehicle launched by NASA in 2020, is currently investigating Mars' Jezero Crater.Perseverance's primary mission is to collect rock samples and analyze the Martian geological makeup, all while searching for potential biosignatures indicative of past microbial life.<br /><a href="https://en.wikipedia.org/wiki/Perseverance_(rover)" target="_blank" >learn more here</a>👈</p>
                         </div>
                     </div>
 
                     <div className={Styles['rover-card']}>
-                        <h1><u>Sprit & Opportunity</u></h1>
+                        <h1 data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out"><u>Sprit & Opportunity</u></h1>
                         <div className={Styles['rover']}>
-                            <div className={Styles['rover-left']}>
+                            <div className={Styles['rover-left']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                                 <div className={Styles['rover-model']}>
                                     <SpritOpp />
                                 </div>
@@ -166,7 +166,7 @@ function MarsRover() {
                                     <h3>Landing Date: 03 January, 2004</h3>
                                 </div>
                             </div>
-                            <p>NASA's Mars Exploration Rover (MER) mission, launched in 2003, deployed twin rovers, Spirit and Opportunity, to investigate the Martian surface.  These rovers, designed for a 90-day mission, far exceeded expectations. Spirit explored Gusev Crater, searching for past water activity, while Opportunity roamed Meridiani Planum, analyzing mineral deposits.<br /><a href="https://en.wikipedia.org/wiki/Mars_Exploration_Rover" target="_blank" >learn more here</a>👈</p>
+                            <p data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">NASA's Mars Exploration Rover (MER) mission, launched in 2003, deployed twin rovers, Spirit and Opportunity, to investigate the Martian surface.  These rovers, designed for a 90-day mission, far exceeded expectations. Spirit explored Gusev Crater, searching for past water activity, while Opportunity roamed Meridiani Planum, analyzing mineral deposits.<br /><a href="https://en.wikipedia.org/wiki/Mars_Exploration_Rover" target="_blank" >learn more here</a>👈</p>
                         </div>
                     </div>
 
@@ -176,7 +176,7 @@ function MarsRover() {
             <hr />
 
             <section id={Styles['section-3']}>
-                <h1 className={Styles['section_title']}>Mars Images</h1>
+                <h1 className={Styles['section_title']} data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Mars Images</h1>
 
                 <div id={Styles['calender']}>
                     <input