First commit!

nxvvvv · Jan 10, 2021 · 7287ad6 · 7287ad6
commit 7287ad6
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+*.bak
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Navaneeth K M
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# Cool effect for Images.
+
+[![MIT](https://img.shields.io/badge/License-MIT-blue.svg?maxAge=3600, "License")](https://github.com/navaneethkm004/imf-effect/blob/master/LICENSE) [![Send Message to Author](https://img.shields.io/static/v1?style=flat&logo=twitter&label=Message&color=1da1f2&link=https%3A%2F%2Ftwitter.com%2Fmessages%2Fcompose%3Frecipient_id%714816987336089600&link=https%3A%2F%2Ftwitter.com%2Fmessages%2Fcompose%3Frecipient_id%714816987336089600&message=%40NavaneethKM004&maxAge=3600, "Send Message to Author")](https://twitter.com/messages/compose?recipient_id=714816987336089600)<br>
+
+## What's this?
+Cool image effect for images script for websites.
+
+[![Run on Repl.it](https://repl.it/badge/github/navaneethkm004/imf-effect)](https://repl.it/github/navaneethkm004/imf-effect)
+
+## Author
+
+[![Follow @NavaneethKM004](https://img.shields.io/twitter/follow/NavaneethKM004?label=Follow&style=social&maxAge=3600, "Follow")](https://twitter.com/intent/follow?screen_name=NavaneethKM004)<br>
+[Navaneeth K M (a.k.a NKM)（@NavaneethKM004）](https://twitter.com/NavaneethKM004)<br>
+[Send Message to Author](https://twitter.com/messages/compose?recipient_id=714816987336089600)
+
+## License
+
+This repo is under the MIT License.<br>
+See [LICENSE](https://github.com/navaneethkm004/imf-effect/blob/master/LICENSE) File.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Navaneeth K M</title>
+        <link href="style.css" rel="stylesheet" type="text/css" />
+
+        <link href='https://fonts.googleapis.com/css?family=IBM Plex Sans Condensed' rel='stylesheet'>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
+
+    </head>
+    <body>
+
+        <div class='mainChild' style='height: 200vh'>
+            <img src="test.png" class="logo">
+
+        </div>
+
+        <div class='load'></div>
+        <div class='hidden'></div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "img-effect",
+  "version": "1.0.0",
+  "description": "A simple image effect for websites!",
+  "main": "script.js",
+  "scripts": {
+    "test": "npm start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navaneethkm004/img-effect.git"
+  },
+  "author": "Navaneeth K M",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/navaneethkm004/img-effect/issues"
+  },
+  "homepage": "https://github.com/navaneethkm004/img-effect#readme"
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,54 @@
+$.fn.parallax = function(resistance, mouse) {
+  $el = $(this);
+  TweenLite.to($el, 0.2, {
+    x: -((mouse.clientX - window.innerWidth / 2) / resistance),
+    y: -((mouse.clientY - window.innerHeight / 2) / resistance)
+  });
+};
+
+$(document).mousemove(function(e) {
+  $(".mainChild").parallax(-30, e);
+  $(".logo").parallax(10, e);
+});
+
+$(window).scroll(() => {
+    if ($(".hidden").inView() && $('.hidden').height() > 0) {
+        loadIn();
+    }
+})
+
+loadIn();
+function loadIn() {
+    $('.load').animate({
+        width: '20%'
+    }, 100, () => {
+        var w = $('.hidden').height();
+        $('.hidden').height(`${w - 30}px`);
+        var pos = $('.hidden').offset().top;
+        $('.hidden').css({top: `${pos + 30}px`});
+        $('.load').width('90%');
+        var pos = $('.load').offset().top;
+        $('.load').css({top: `${pos + 30}px`});
+
+        if ($(".hidden").inView() && $('.hidden').height() > 0) {
+            loadIn();
+        }
+        if ($('.hidden').height() <= 0) {
+            $('.load').hide();
+        }
+    })
+}
+
+$.fn.inView = function(){
+    //Window Object
+    var win = $(window);
+    //Object to Check
+    obj = $(this);
+    //the top Scroll Position in the page
+    var scrollPosition = win.scrollTop();
+    //the end of the visible area in the page, starting from the scroll position
+    var visibleArea = win.scrollTop() + win.height();
+    //the end of the object to check
+    var objEndPos = (obj.offset().top);
+    return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,71 @@
+
+body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+
+.logo {
+  position: absolute;
+  top: 100px;
+  left: calc(50% - 150px);
+  width: 300px;
+  height: auto;
+  z-index: 2;
+  opacity: 0.8;
+}
+
+
+
+
+
+:root {
+  --main-bg-color: #0e1525;
+  --primary-color: #1d2333;
+}
+
+body {
+    background-color: var(--main-bg-color);
+    font-family: 'IBM Plex Sans Condensed';
+    margin: 0 0;
+    height: 220vh;
+    overflow-y: auto;
+}
+
+.topBar {
+    background-color: var(--primary-color);
+    width: 100vw;
+    height: 60px;
+    margin-bottom: 8px;
+}
+
+
+.mainChild {
+    border-radius: 9px;
+    background-color: var(--primary-color);
+    width: 80%;
+    height: 80%;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+}
+
+.hidden {
+    width: 100%;
+    background-color: white;
+    height: calc(220vh - 30px);
+    position: absolute;
+    top: 30px;
+    z-index: 9999;
+    display: block;
+}
+.load {
+    width: 100%;
+    background-color: white;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 30px;
+    z-index: 9999;
+}
diff --git a/test.png b/test.png