diff --git a/README.md b/README.md index d341ec4..e88991a 100644 --- a/README.md +++ b/README.md @@ -6,58 +6,60 @@ # Project Links ---- - -| Project Name | Links | -| ----------------------------- | -------------------------------------------------------- | -| Background Slider | https://pulkit203.github.io/Background-Slider/ | -| Bubble Animation | https://iamtushar11.github.io/Bubble-animation/ | -| 3D-Image-Rotation Animation | https://pulkit203.github.io/3d-image-rotation/ | -| Car Moving Animation | https://pulkit203.github.io/Car-moving-animation/ | -| Clock-Animation | https://pulkit203.github.io/Clock-Animation/ | -| Drive Parallax Animation | https://pulkit203.github.io/Drive-Parallex/ | -| 2D to 3D animation | https://pulkit203.github.io/3d-image-Animation/ | -| Hamburger Animation | https://pulkit203.github.io/Hamburger-Menu/ | -| Loading Animation | https://pulkit203.github.io/Loading-Animation/ | -| Lamp Animation | https://iamtushar11.github.io/lamp-Animation/ | -| No Image Animation | https://iamtushar11.github.io/See-the-Pointer/ | -| Mode Toggler Animation | https://pulkit203.github.io/Mode-Toggler/ | -| Progress Animation | https://pulkit203.github.io/Progress-Animation/ | -| Progress Steps Animation | https://pulkit203.github.io/progress-steps/ | -| Rocket Travelling Animation | https://pulkit203.github.io/Rocket-Travelling/ | -| Rotating Navigation Animation | https://pulkit203.github.io/Rotating-Navigation/ | -| Shooting Stars Animation | https://pulkit203.github.io/Shooting-Stars/ | -| Solar Rotation Animation | https://pulkit203.github.io/Solar-rotation/ | -| Spring Animation | https://pulkit203.github.io/spiral-animation/ | -| Testimonial Animation | https://pulkit203.github.io/Testimonial/ | -| Water Animation | https://pulkit203.github.io/Water-animation/ | -| Wave Animation | https://pulkit203.github.io/Wave-Animation/ | -| Menu Hover effect Animation | https://lavishbansal17.github.io/Menu-Hover-Effect/ | -| Button Animation | https://palaksharma23.github.io/AnimatedButton/ | -| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | -| Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | -| Modal Animation | https://pulkit203.github.io/Modal-Animation/ | -| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | -| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | -| Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | -| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ | -| Hamburger Animation | https://pulkit203.github.io/Hamburger-Animtion/ | -| Drop Effect | https://palaksharma23.github.io/Drop-Effect/ | +| Project Name | Links | +| ----------------------------- | ----------------------------------------------------------- | +| Background Slider | https://pulkit203.github.io/Background-Slider/ | +| Bubble Animation | https://iamtushar11.github.io/Bubble-animation/ | +| 3D-Image-Rotation Animation | https://pulkit203.github.io/3d-image-rotation/ | +| Car Moving Animation | https://pulkit203.github.io/Car-moving-animation/ | +| Clock-Animation | https://pulkit203.github.io/Clock-Animation/ | +| Drive Parallax Animation | https://pulkit203.github.io/Drive-Parallex/ | +| 2D to 3D animation | https://pulkit203.github.io/3d-image-Animation/ | +| Hamburger Animation | https://pulkit203.github.io/Hamburger-Menu/ | +| Loading Animation | https://pulkit203.github.io/Loading-Animation/ | +| Lamp Animation | https://iamtushar11.github.io/lamp-Animation/ | +| No Image Animation | https://iamtushar11.github.io/See-the-Pointer/ | +| Mode Toggler Animation | https://pulkit203.github.io/Mode-Toggler/ | +| Progress Animation | https://pulkit203.github.io/Progress-Animation/ | +| Progress Steps Animation | https://pulkit203.github.io/progress-steps/ | +| Rocket Travelling Animation | https://pulkit203.github.io/Rocket-Travelling/ | +| Rotating Navigation Animation | https://pulkit203.github.io/Rotating-Navigation/ | +| Shooting Stars Animation | https://pulkit203.github.io/Shooting-Stars/ | +| Solar Rotation Animation | https://pulkit203.github.io/Solar-rotation/ | +| Spring Animation | https://pulkit203.github.io/spiral-animation/ | +| Testimonial Animation | https://pulkit203.github.io/Testimonial/ | +| Water Animation | https://pulkit203.github.io/Water-animation/ | +| Wave Animation | https://pulkit203.github.io/Wave-Animation/ | +| Menu Hover effect Animation | https://lavishbansal17.github.io/Menu-Hover-Effect/ | +| Button Animation | https://palaksharma23.github.io/AnimatedButton/ | +| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | +| Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | +| Modal Animation | https://pulkit203.github.io/Modal-Animation/ | +| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | +| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | +| Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | +| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ | +| Hamburger Animation | https://pulkit203.github.io/Hamburger-Animtion/ | +| Drop Effect | https://palaksharma23.github.io/Drop-Effect/ | +| Scroll Animation | https://pulkit203.github.io/Scroll-Animation/ | +| Shiny Button Hover Effect | https://lavishbansal17.github.io/Shiny-Button-Hover-Effect/ | |Glowing Effect In Two Modes|https://palaksharma23.github.io/Glowing-effect-in-light-and-night-mode/| ---- + + ![Project Intro Gif](./Gif.gif) # Follow these steps to contribute - 1.fork the repo. -
+
2.create a new branch
3.Create a new project
4.add developer name (linked to your github profile) and Date at footer
+5.add a readme.md file and add a image of your project in it.
6. Open Pull Request
diff --git a/ScrollAnimation/Script.js b/ScrollAnimation/Script.js new file mode 100644 index 0000000..65a1e8a --- /dev/null +++ b/ScrollAnimation/Script.js @@ -0,0 +1,17 @@ +const boxes = document.querySelectorAll(".box"); +const revelFunction = () => { + console.log(window.screen.availHeight); + var fixHeight = window.screen.availHeight; + fixHeight > 700 ? (fixHeight -= 200) : (fixHeight += 250); + boxes.forEach((Element) => { + const box = Element.getBoundingClientRect(); + if (box.top < fixHeight) { + Element.classList.add("revel"); + } else { + Element.classList.remove("revel"); + } + }); +}; +window.addEventListener("scroll", revelFunction); + +revelFunction(); diff --git a/ScrollAnimation/index.html b/ScrollAnimation/index.html new file mode 100644 index 0000000..418d65b --- /dev/null +++ b/ScrollAnimation/index.html @@ -0,0 +1,91 @@ + + + + + + + + Scroll Animation + + +

Scroll Animation

+

Scroll Page to see the magic

+
ðŸĨģ
+
😃
+
😎
+
ðŸĨ°
+
😝
+
ðŸĪĐ
+
ðŸĪŠ
+
😇
+
ðŸĪ“
+
ðŸĪ—
+
ðŸĪŦ
+
😍
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨ°
+
😝
+
ðŸĪĐ
+
ðŸĪŠ
+
😇
+
ðŸĪ“
+
ðŸĪ—
+
ðŸĪŦ
+
😍
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨ°
+
😝
+
ðŸĪĐ
+
ðŸĪŠ
+
😇
+
ðŸĪ“
+
ðŸĪ—
+
ðŸĪŦ
+
😍
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨ°
+
😝
+
ðŸĪĐ
+
ðŸĪŠ
+
😇
+
ðŸĪ“
+
ðŸĪ—
+
ðŸĪŦ
+
😍
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨģ
+
😃
+
😎
+
ðŸĨ°
+
😝
+
ðŸĪĐ
+
ðŸĪŠ
+
😇
+
ðŸĪ“
+
ðŸĪ—
+
ðŸĪŦ
+
😍
+
ðŸĨģ
+
😃
+
😎
+ + + + diff --git a/ScrollAnimation/pro.png b/ScrollAnimation/pro.png new file mode 100644 index 0000000..c02a364 Binary files /dev/null and b/ScrollAnimation/pro.png differ diff --git a/ScrollAnimation/readme.md b/ScrollAnimation/readme.md new file mode 100644 index 0000000..44438d6 --- /dev/null +++ b/ScrollAnimation/readme.md @@ -0,0 +1,3 @@ +# Scroll Animation + + diff --git a/ScrollAnimation/style.css b/ScrollAnimation/style.css new file mode 100644 index 0000000..3bc586e --- /dev/null +++ b/ScrollAnimation/style.css @@ -0,0 +1,59 @@ +* { + margin: 0; + padding: 0; +} +body { + font-family: sans-serif; + text-align: center; + color: white; + background-color: #4a403a; + width: 100vw; + overflow-x: hidden !important; + overflow-y: auto; +} +.box { + overflow: hidden; + width: fit-content; + height: fit-content; + text-align: center; + font-size: 5rem; + margin: 5rem auto; + opacity: 0; + transform: translateX(-100vw); + -webkit-transform: translateX(-100vw); + -moz-transform: translateX(-100vw); + -ms-transform: translateX(-100vw); + -o-transform: translateX(-100vw); + transition: 0.3s; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -ms-transition: 0.3s; + -o-transition: 0.3s; + -webkit-box-reflect: below -20px linear-gradient(transparent, transparent, rgba(255, 255, 255, 0.363)); +} +.box:nth-child(even) { + transform: translateX(100vw); + -webkit-transform: translateX(100vw); + -moz-transform: translateX(100vw); + -ms-transform: translateX(100vw); + -o-transform: translateX(100vw); +} +.revel { + opacity: 1; + transform: translateX(0) !important; + -webkit-transform: translateX(0) !important; + -moz-transform: translateX(0) !important; + -ms-transform: translateX(0) !important; + -o-transform: translateX(0) !important; +} +@media (max-width: 800px) { + html { + overflow-x: hidden; + } +} +footer { + position: absolute; + bottom: 5px; + left: 5px; + color: white; +} diff --git a/Shiny Button Hover Effect/image.png b/Shiny Button Hover Effect/image.png new file mode 100644 index 0000000..50db635 Binary files /dev/null and b/Shiny Button Hover Effect/image.png differ diff --git a/Shiny Button Hover Effect/index.html b/Shiny Button Hover Effect/index.html new file mode 100644 index 0000000..93a9137 --- /dev/null +++ b/Shiny Button Hover Effect/index.html @@ -0,0 +1,25 @@ + + + + + + + Shiny Button Hover Effect + + + + Shiny Button + Shiny Button + + + diff --git a/Shiny Button Hover Effect/readme.md b/Shiny Button Hover Effect/readme.md new file mode 100644 index 0000000..dbadca8 --- /dev/null +++ b/Shiny Button Hover Effect/readme.md @@ -0,0 +1,2 @@ +# Shiny Button Hover Effect + \ No newline at end of file diff --git a/Shiny Button Hover Effect/style.css b/Shiny Button Hover Effect/style.css new file mode 100644 index 0000000..c643c6d --- /dev/null +++ b/Shiny Button Hover Effect/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + font-family: consoles; +} +body { + display: flex; + justify-content: center; + min-height: 100vh; + align-items: center; + flex-direction: column; + background: #19011d; +} +a { + position: relative; + padding: 15px 30px; + margin: 10px; + background: #35003d; + color: #fff; + text-decoration: none; + letter-spacing: 1px; + border: 1px solid #000; + transition: 0.5s; + overflow: hidden; +} +a:hover { + background: #a41ee9; +} +a:nth-child(2):hover { + background: #ff3c7f; +} +a::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, #fff, transparent); + transition: 0.5s; +} +a:hover::before { + left: 100%; +} +footer { + background: none !important; + position: absolute; + color: yellow; + bottom: 1rem; + left: 5rem; +} +footer a { + background: none; +} +footer a::before { + background: none; +} +footer a:hover { + background: none; +}