diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2023-10-03 07:59:00 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2023-10-03 07:59:00 +0800 |
| commit | 9a4c2220d310a9bc7b7a01943bf925ed38265665 (patch) | |
| tree | 91f1d6023768325a2f121f5635893026a04b3836 | |
| parent | 1fa9398c10636b884800422c04b34b1362760aa1 (diff) | |
added more features & fixed border(radius)bug from vanilla tilt
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | pages/repo/github/repos.html | 5 | ||||
| -rw-r--r-- | src/css/index.css | 2 | ||||
| -rw-r--r-- | src/css/style.css | 4 | ||||
| -rw-r--r-- | src/js/tilt.conf.js | 5 |
5 files changed, 16 insertions, 3 deletions
@@ -17,7 +17,7 @@ <div class="wrapper"> <section class="indexPage"> <div class="window slowScroll animate slideInTop animate--fast"> - <div data-tilt> + <div class='tilt'> <div class="placeholder" id="infos"> <div class="text fastScroll"> <h2>Hello! This is</h2> @@ -34,5 +34,6 @@ <script src="/src/js/index.js"></script> <script src="/src/js/tilt.js"></script> + <script src="/src/js/tilt.conf.js"></script> </body> </html> diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html index 6c637606..575f0cf4 100644 --- a/pages/repo/github/repos.html +++ b/pages/repo/github/repos.html @@ -20,7 +20,7 @@ <script>includeHeader();</script> <!-- main Github Functions --> - <main class="container" data-tilt data-tilt-glare> + <main class="container tilt"> <h1>All Of My Projects</h1> <section class="intro"> <div class="user-info animate animation--fast slideInTop"></div> @@ -32,10 +32,11 @@ <section class="repos"> <input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects" /> - <ul class="repo-list animate slideInTop"></ul> + <ul class="repo-list animate slideInTop tilt"></ul> </section> </main> <script src="/src/js/tilt.js" /> + <script src="/src/js/tilt.conf.js"></script> </body> </html> diff --git a/src/css/index.css b/src/css/index.css index 4666c95b..5ba0659a 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -25,6 +25,8 @@ display: flex; justify-content: center; align-items: center; + /* transform-style: preserve-3d; */ + /* perspective: 1000px; */ } .window .placeholder { diff --git a/src/css/style.css b/src/css/style.css index 71e9adaa..a4e608fb 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -101,6 +101,10 @@ body { transition: all 0.3s } +.js-tilt-glare { + border-radius: 18px; +} + /* topbar styles ========================================== */ header { diff --git a/src/js/tilt.conf.js b/src/js/tilt.conf.js new file mode 100644 index 00000000..d0ef14ad --- /dev/null +++ b/src/js/tilt.conf.js @@ -0,0 +1,5 @@ +VanillaTilt.init(document.querySelectorAll(".tilt"),{ + glare: true, + reverse: true, + "max-glare": 0.5, +}) |