├── GIF.gif ├── LICENSE ├── ReadME.md ├── assets ├── favicon.ico ├── icons │ ├── blackWidow.png │ ├── captainAmerica.png │ ├── hawkeye.png │ ├── hulk.png │ ├── ironMan.png │ └── thor.png ├── scripts │ └── script.js └── stylesheets │ └── style.css └── index.html /GIF.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/GIF.gif -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Faisal Akhtar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ReadME.md: -------------------------------------------------------------------------------- 1 | # Animated URLs 2 | 3 | :sparkles:Animating URL links:sparkles: 4 | 5 | [![license](https://img.shields.io/github/license/faisalAkhtar/animated-url)](LICENSE) 6 | 7 | [Live Demo](https://faisalakhtar.github.io/animated-url/#iron-man) 8 | 9 | ![GIF](GIF.gif) 10 | 11 | Made with :heart: and JavaScript:sparkles: 12 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/favicon.ico -------------------------------------------------------------------------------- /assets/icons/blackWidow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/blackWidow.png -------------------------------------------------------------------------------- /assets/icons/captainAmerica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/captainAmerica.png -------------------------------------------------------------------------------- /assets/icons/hawkeye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/hawkeye.png -------------------------------------------------------------------------------- /assets/icons/hulk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/hulk.png -------------------------------------------------------------------------------- /assets/icons/ironMan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/ironMan.png -------------------------------------------------------------------------------- /assets/icons/thor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/faisalAkhtar/animated-url/a5192deb006c21633dbface652ffed3a3f22f65a/assets/icons/thor.png -------------------------------------------------------------------------------- /assets/scripts/script.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | let deadlock = false // Using deadlock to prevent user from clicking again while one link is being updated 3 | document.querySelectorAll("a").forEach(a => { 4 | a.onclick = function (e) { 5 | e.preventDefault() // Preventing default action (directly jumping to the section in this case) 6 | 7 | if (deadlock) return 8 | deadlock = true 9 | 10 | let speed = 50, 11 | h = location.href, // the current page-link 12 | l = h.lastIndexOf("/"), 13 | c = h.substring(l + 1), // the trailing-url string, which contains the id of section 14 | i = 0, 15 | buildDown, 16 | buildUp 17 | 18 | if (c == "#iron-man" || c == "#captain-america" || c == "#thor" || // checking if the trailing-url string is one of the section-ids 19 | c == "#black-widow" || c == "#hulk" || c == "#hawkeye") { 20 | buildDown = setInterval(function () { // breaking the url, letter by letter 21 | i++ 22 | history.replaceState({}, 'Faisal', c.substring(0, c.length - i)) // using replaceState webAPI, so the user-history is not crying for help...lol 23 | if (i == c.length) { 24 | clearInterval(buildDown) // when complete url is broken down, stop the iteration and start again 25 | 26 | h = a.href, // after the breaking down is done, initializing variables to build-up the url to new-id 27 | l = h.lastIndexOf("/"), 28 | c = h.substring(l + 1), 29 | i = 0 30 | 31 | buildUp = setInterval(function () { // putting letter by letter into the url 32 | i++ 33 | document.querySelector(c).scrollIntoView() // also scrolling down to the desired section programatically here, because we stopped the default functionality and the user is going to be so mad if we don't do this...lol 34 | history.replaceState({}, 'Faisal', c.substring(0, i)) // using replaceState webAPI and putting parts of string 35 | if (i == c.length) { 36 | deadlock = false 37 | clearInterval(buildUp) // when the string is complete, stop iteration 38 | } 39 | }, speed) 40 | } 41 | }, speed) 42 | } else { // if not one of the section-ids, then start from the beginning 43 | h = a.href, // initializing variables for building-up only, no breaking-down here 44 | l = h.lastIndexOf("/"), 45 | c = h.substring(l + 1), 46 | i = 0 47 | document.querySelector(c).scrollIntoView() 48 | 49 | buildUp = setInterval(function () { // here we directly replace state, and hence, whatever the trailing-url might be, will be instantly broken-down and we will start afresh, considering the edge condition: no string 50 | i++ 51 | history.replaceState({}, 'Faisal', c.substring(0, i)) 52 | if (i == c.length) { 53 | deadlock = false 54 | clearInterval(buildUp) 55 | } 56 | }, speed) 57 | } 58 | 59 | } 60 | }) 61 | })(); 62 | -------------------------------------------------------------------------------- /assets/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box 3 | } 4 | 5 | ::-webkit-scrollbar { 6 | width: 6px; 7 | height: 6px; 8 | background-color: #000011; 9 | } 10 | 11 | ::-webkit-scrollbar-thumb { 12 | background: #AD262D; 13 | border-radius: 6px; 14 | } 15 | 16 | html { 17 | scroll-behavior: smooth; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | nav { 25 | position: fixed; 26 | width: 100%; 27 | margin: 0; 28 | padding: 0; 29 | box-shadow: 0 5px 15px #222222; 30 | } 31 | 32 | nav>a { 33 | width: 16.666%; 34 | float: left; 35 | text-align: center; 36 | } 37 | 38 | nav img { 39 | width: 100%; 40 | max-width: 120px; 41 | } 42 | 43 | .iron-man { 44 | background-color: #AD262D; 45 | } 46 | 47 | .captain-america { 48 | background-color: #FFFFFF; 49 | } 50 | 51 | .thor { 52 | background-color: #D1D1D1; 53 | } 54 | 55 | .black-widow { 56 | background-color: #000000; 57 | } 58 | 59 | .hulk { 60 | background-color: #428B22; 61 | } 62 | 63 | .hawkeye { 64 | background-color: #59487F; 65 | } 66 | 67 | section { 68 | height: 150vh; 69 | position: relative; 70 | z-index: -1; 71 | } 72 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated URLs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 27 | 28 | 29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | --------------------------------------------------------------------------------