Add file

Code-With-Abhishek-Kumar · Jul 16, 2024 · 5a0503c · 5a0503c
1 parent 782d95f
commit 5a0503c
Show file tree

Hide file tree

Showing 11 changed files with 403 additions and 0 deletions.
diff --git a/GSAP/01_Day_Introduction/01_Starter_Code/index.html b/GSAP/01_Day_Introduction/01_Starter_Code/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Gsap 01 Introduction</title>
+</head>
+<body>
+
+
+
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/GSAP/01_Day_Introduction/01_Starter_Code/script.js b/GSAP/01_Day_Introduction/01_Starter_Code/script.js
diff --git a/GSAP/01_Day_Introduction/01_Starter_Code/style.css b/GSAP/01_Day_Introduction/01_Starter_Code/style.css
diff --git a/GSAP/01_Day_Introduction/readme.md b/GSAP/01_Day_Introduction/readme.md
@@ -0,0 +1,103 @@
+# What is Gsap
+
+- The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables you to create high-performance animations for the web.
+
+- A "library" refers to a collection of pre-written code modules or functions that provide specific functionalities. Libraries are designed to be reusable and aim to simplify the development process by offering commonly used operations or tools that developers can incorporate into their own projects without having to write everything from scratch.
+
+
+- GSAP (GreenSock Animation Platform) ek powerful JavaScript library hai jo aapko web ke liye high-performance animations create karne mein madad karti hai.
+
+- "Library" programming mein ek collection hoti hai pre-written code modules ya functions ki jo specific functionalities provide karti hai. Libraries ko reuse kiya ja sakta hai aur inka aim hota hai development process ko simplify karna, jisse developers apne projects mein commonly used operations ya tools ko incorporate kar sake bina sab kuch khud se likhe.
+
+
+
+## Key Features
+
+`Smooth Animations`
+
+- GSAP ensures animations run seamlessly, enhancing user experience.
+
+-  GSAP ensure karta hai ki animations seamlessly chalein aur user experience ko enhance karein.
+
+`Flexibility`
+
+- Supports a wide range of animations from simple transitions to complex sequences.
+
+- Ismein ek wide range ki animations support hoti hai, simple transitions se lekar complex sequences tak.
+
+
+`Ease of Use`
+
+- Provides an intuitive API for easy integration and management of animations.
+
+-  Iska intuitive API developers ko provide karta hai jisse animations ko integrate aur manage karna aasaan hota hai.
+
+
+`Compatibility`
+
+- Works well with HTML elements, SVGs, and WebGL for 3D animations.
+
+- Yeh HTML elements, SVGs, aur 3D animations ke liye WebGL ke saath acche se kaam karta hai.
+
+
+`Plugin Ecosystem`
+
+- Extensive plugins available for adding specialized effects and behaviors effortlessly.
+
+-  Iska extensive plugin ecosystem developers ko allow karta hai ki wo bina kisi complexity ke specialized effects aur behaviors add kar sakein.
+
+
+## Why Use GSAP?
+
+
+`Performance`
+
+- Optimized for speed and efficiency, ensuring smooth animations even under heavy load.
+
+
+- GSAP speed aur efficiency ke liye optimized hai, jo ki heavy load ke bawajood bhi smooth animations ensure karta hai.
+
+`Cross-browser Support`
+
+- Eliminates compatibility issues across major browsers.
+
+- Yeh major browsers mein compatibility issues ko eliminate karta hai.
+
+`Community and Support:`
+
+
+- Active community and comprehensive documentation provide resources and solutions for developers.
+
+
+ -  Iska active community aur comprehensive documentation developers ko resources aur solutions provide karti hai.
+
+## Getting Started
+
+### Installation
+
+
+- Include GSAP in your HTML file:
+
+````javascript
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
+
+
+````
+
+
+## Example Usage
+
+- Animate elements using GSAP's methods:
+
+
+````javascript
+gsap.to('.element', {
+  duration: 1,
+  x: 100,
+  opacity: 0.5,
+  ease: 'power1.out'
+});
+
+
+
+````
diff --git a/GSAP/02_Day_Gsap.to()/01_Starter_Code/index.html b/GSAP/02_Day_Gsap.to()/01_Starter_Code/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Gsap 01 Introduction</title>
+</head>
+<body>
+
+<main>
+<div class="box" id="box1"></div>
+<div class="box" id="box2"></div>
+<div class="box" id="box3"></div>
+
+</main>
+
+
+
+<!--  Go to Google and search Gsap cdn -->
+<!--  Go to cdnjs.com -->
+<!--  Copy First One -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/GSAP/02_Day_Gsap.to()/01_Starter_Code/readme.md b/GSAP/02_Day_Gsap.to()/01_Starter_Code/readme.md
@@ -0,0 +1,116 @@
+# Animated Boxes with GSAP
+
+This project demonstrates how to animate boxes using GSAP (GreenSock Animation Platform). Each box on the webpage moves horizontally and changes color when the page loads.
+
+## Setup
+
+### HTML (`index.html`)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css"> <!-- Linking a file that styles our webpage -->
+    <title>Gsap 01 Introduction</title>
+</head>
+<body>
+
+<main>
+    <!-- Three colored boxes on our webpage -->
+    <div class="box" id="box1"></div>
+    <div class="box" id="box2"></div>
+    <div class="box" id="box3"></div>
+</main>
+
+<!-- Linking a tool called GSAP that helps with animations -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+
+<!-- Linking a file that contains code to animate our boxes -->
+<script src="./script.js"></script>
+</body>
+</html>
+
+
+```
+
+### CSS (`style.css`)
+
+
+````css
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+main {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 15px;
+    height: 100vh;
+    background-color: black;
+}
+
+.box {
+    width: 300px;
+    height: 200px;
+}
+
+#box1 {
+    background-color: yellow;
+}
+
+#box2 {
+    background-color: green;
+}
+
+#box3 {
+    background-color: red;
+}
+
+
+
+````
+
+### JavaScript (`script.js`)
+
+````javascript
+
+// Animates the first box to move right and change color to sky blue
+gsap.to("#box1", {
+    x: 1200,
+    backgroundColor: "skyblue",
+    duration: 2
+});
+
+// Animates the second box to move right, taking longer, and change color to orange
+gsap.to("#box2", {
+    x: 1100,
+    backgroundColor: "orange",
+    duration: 2.5
+});
+
+// Animates the third box to move right and change color to light green
+gsap.to("#box3", {
+    x: 1200,
+    backgroundColor: "lightgreen",
+    duration: 2
+});
+
+
+````
+
+
+## Explanation
+
+
+- HTML (index.html): Defines the structure of the webpage with three colored boxes (box1, box2, box3). CSS and JavaScript files are linked to style and animate the boxes.
+
+- CSS (style.css): Sets initial styles for the boxes and the main container (main), including dimensions, spacing, and background colors.
+
+- JavaScript (script.js): Uses GSAP to animate each box (#box1, #box2, #box3) by changing their horizontal position (x coordinate) and background color (backgroundColor) over specified durations (2 seconds for box1 and box3, 2.5 seconds for box2).
diff --git a/GSAP/02_Day_Gsap.to()/01_Starter_Code/script.js b/GSAP/02_Day_Gsap.to()/01_Starter_Code/script.js
@@ -0,0 +1,21 @@
+// Animates the element with ID "box1"
+gsap.to("#box1", {
+    x: 1200,                // Moves the element horizontally to x = 1200 pixels
+    backgroundColor: "skyblue",  // Changes the background color to sky blue
+    duration: 2             // Animation duration is 2 seconds
+  });
+
+  // Animates the element with ID "box2"
+  gsap.to("#box2", {
+    x: 1100,                // Moves the element horizontally to x = 1100 pixels
+    backgroundColor: "orange",   // Changes the background color to orange
+    duration: 2.5           // Animation duration is 2.5 seconds
+  });
+
+  // Animates the element with ID "box3"
+  gsap.to("#box3", {
+    x: 1200,                // Moves the element horizontally to x = 1200 pixels
+    backgroundColor: "lightgreen", // Changes the background color to light green
+    duration: 2             // Animation duration is 2 seconds
+  });
+
diff --git a/GSAP/02_Day_Gsap.to()/01_Starter_Code/style.css b/GSAP/02_Day_Gsap.to()/01_Starter_Code/style.css
@@ -0,0 +1,44 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+main{
+    width: 100vw;
+    display: flex;
+   justify-content: center;
+flex-direction: column;
+    gap: 15px;
+    height: 100vh;
+    background-color: black;
+}
+
+
+.box{
+
+    width: 300px;
+    height: 200px;
+
+}
+
+
+
+#box1{
+
+
+    background-color: yellow;
+}
+
+#box2{
+
+
+    background-color: green;
+}
+
+#box3{
+
+
+    background-color: red;
+}
diff --git a/GSAP/02_Day_Gsap.to()/readme.md b/GSAP/02_Day_Gsap.to()/readme.md
@@ -0,0 +1,3 @@
+# gsap.to()
+
+
diff --git a/JavaScript/Audio Element/readme.md b/JavaScript/Audio Element/readme.md
@@ -0,0 +1,4 @@
+# HTML Audio Element
+
+
+- The HTML `<audio>` element is used to play an audio file on a web page.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# HTML Audio Element


		- The HTML `<audio>` element is used to play an audio file on a web page.