├── .eslintrc ├── .gitignore ├── .stylelintrc ├── README.MD ├── package-lock.json ├── package.json ├── posthtml.json ├── src ├── images │ ├── logo.png │ ├── stripes.png │ └── wave.svg ├── index.html ├── js │ └── main.js └── scss │ ├── _curvy.scss │ ├── _global.scss │ ├── _gradient.scss │ ├── _stripes.scss │ ├── _stripes2.scss │ ├── _textBorder.scss │ ├── _variables.scss │ ├── _wave.scss │ └── index.scss └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "rules": { 16 | "semi": ["error", "always"], 17 | "quotes": ["error", "double"] 18 | } 19 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .package-lock.json 2 | .git 3 | /dist 4 | /node_modules 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | "rules": { 2 | "block-no-empty": true, 3 | "color-hex-case": "lower", 4 | "color-hex-length": "short", 5 | "color-no-invalid-hex": true, 6 | "declaration-colon-space-after": "always", 7 | "max-empty-lines": 2 8 | } -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Hover Effect Ideas 2 | 3 | This repo was created with the [static-website-template](https://github.com/wwebdev/static-website-template). 4 | 5 | You can see the hover effects in action on [https://wweb.dev/resources/creative-hover-effects](https://wweb.dev/resources/creative-hover-effects). 6 | 7 | 8 | ## Getting Started 9 | 10 | 1. Install dependencies 11 | ``` 12 | npm install 13 | ``` 14 | 15 | 2. Build resources 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | 3. Watch for changes 21 | ``` 22 | npm run watch 23 | ``` 24 | 25 | 26 | ## License 27 | [MIT](https://choosealicense.com/licenses/mit/) 28 | 29 | 30 | --- 31 | 32 | *created by [Vincent Will](https://wweb.dev/)* 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static-website-template", 3 | "version": "1.0.1", 4 | "description": "template for static website", 5 | "author": "Vincent Will ", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Vincenius/static-website-template" 10 | }, 11 | "scripts": { 12 | "clean": "rimraf dist/*", 13 | "css:autoprefixer": "postcss -u autoprefixer -r dist/*.css", 14 | "css:scss": "node-sass -o dist src/scss", 15 | "css:lint": "stylelint src/scss/*.scss --syntax scss", 16 | "build:css": "npm run css:lint && npm run css:scss && npm run css:autoprefixer", 17 | "build:js": "webpack --mode=production", 18 | "build:html": "posthtml -c posthtml.json", 19 | "build:images": "imagemin src/images/**/* --out-dir=dist/images", 20 | "build": "run-s build:*", 21 | "serve": "browser-sync start --server \"dist\" --files \"dist\"", 22 | "watch:css": "onchange \"src/scss\" -- npm run build:css", 23 | "watch:html": "onchange \"src/*.html\" -- npm run build:html", 24 | "watch:images": "onchange \"src/images\" -- npm run build:images", 25 | "watch:js": "onchange \"src/js\" -- webpack --mode=development", 26 | "watch": "run-p serve watch:*" 27 | }, 28 | "devDependencies": { 29 | "@babel/preset-env": "^7.8.4", 30 | "autoprefixer": "^9.7.4", 31 | "babel-loader": "^8.0.6", 32 | "browser-sync": "^2.26.7", 33 | "eslint": "^6.8.0", 34 | "eslint-loader": "^3.0.3", 35 | "htmlnano": "^0.2.5", 36 | "imagemin-cli": "^5.1.0", 37 | "node-sass": "^4.13.1", 38 | "npm-run-all": "^4.1.5", 39 | "onchange": "^6.1.0", 40 | "postcss-cli": "^7.1.0", 41 | "posthtml": "^0.12.0", 42 | "posthtml-cli": "^0.5.2", 43 | "posthtml-modules": "^0.4.2", 44 | "stylelint": "^13.0.0", 45 | "webpack": "^4.41.5", 46 | "webpack-cli": "^3.3.10" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /posthtml.json: -------------------------------------------------------------------------------- 1 | { 2 | "input": "src/*.html", 3 | "output": "dist", 4 | "plugins": { 5 | "htmlnano": {} 6 | } 7 | } -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwebdev/hover-effect-ideas/b87804ba8c04d7afb05d88ca27072a3b15671ab2/src/images/logo.png -------------------------------------------------------------------------------- /src/images/stripes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwebdev/hover-effect-ideas/b87804ba8c04d7afb05d88ca27072a3b15671ab2/src/images/stripes.png -------------------------------------------------------------------------------- /src/images/wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hover Ideas 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | Creative Hover Effects 14 | 15 | 16 | [Github] 17 | 18 |

19 | 20 |
21 |
22 |

23 | Wave 24 | [Codepen] 25 |

26 | HOVER ME 27 |
28 | 29 |
30 |

31 | Stripes 32 | [Codepen] 33 |

34 | HOVER ME 35 |
36 |
37 | 38 |
39 |
40 |

41 | Curvy 42 | [Codepen] 43 |

44 | HOVER ME 45 |
46 | 47 |
48 |

49 | Border 50 | [Codepen] 51 |

52 | HOVER ME 53 |
54 |
55 | 56 |
57 |
58 |

59 | Gradient 60 | [Codepen] 61 |

62 | HOVER ME 63 |
64 | 65 |
66 |

67 | Stripes 2 68 | [Codepen] 69 |

70 | HOVER ME 71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wwebdev/hover-effect-ideas/b87804ba8c04d7afb05d88ca27072a3b15671ab2/src/js/main.js -------------------------------------------------------------------------------- /src/scss/_curvy.scss: -------------------------------------------------------------------------------- 1 | $curvyColor: rgba(0,0,0,.5); 2 | 3 | .curvy { 4 | background: radial-gradient(circle at 100% 50%, transparent 20%, $curvyColor 21%, $curvyColor 34%, transparent 35%, transparent), 5 | radial-gradient(circle at 0% 50%, transparent 20%, $curvyColor 21%, $curvyColor 34%, transparent 35%, transparent) 0 -50px; 6 | background-color: #fff; 7 | background-size: 75px 100px; 8 | background-clip: text; 9 | background-repeat: repeat-x; 10 | background-position-y: -$fontSize; 11 | transition: background-position-y 0.6s ease; 12 | color: transparent; 13 | animation: curvyAnimation 3s linear infinite; 14 | animation-play-state: paused; 15 | 16 | &:hover { 17 | animation-play-state: running; 18 | background-position-y: 0%, -50px; 19 | } 20 | 21 | @keyframes curvyAnimation { 22 | 100% { 23 | background-position-x: 150%; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | font-family: sans-serif; 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | font-size: 1.6rem; 16 | background-color: #000; 17 | color: $defaultFont; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | } 21 | 22 | p { 23 | margin: 2rem 0; 24 | line-height: 1.4em; 25 | 26 | &:last-of-type { 27 | margin-bottom: 0; 28 | } 29 | } 30 | 31 | h1, 32 | h2 { 33 | margin-bottom: 0.8em; 34 | max-width: 100%; 35 | line-height: 1.1em; 36 | } 37 | 38 | h1 { 39 | text-decoration: underline; 40 | 41 | @media (max-width: 800px) { 42 | font-size: 1.5em; 43 | margin-bottom: 2em; 44 | } 45 | 46 | @media (max-width: 768px) { 47 | text-align: center; 48 | } 49 | 50 | @media (max-width: 600px) { 51 | font-size: 1.2em; 52 | } 53 | } 54 | 55 | h2, h2 a { 56 | font-weight: light; 57 | font-size: 18px; 58 | } 59 | 60 | h2 { 61 | display: inline-flex; 62 | justify-content: space-between; 63 | } 64 | 65 | h2 a { 66 | color: $linkColor; 67 | text-decoration: none; 68 | 69 | &:hover { 70 | color: $linkHoverColor; 71 | text-decoration: underline; 72 | } 73 | } 74 | 75 | .center { 76 | display: flex; 77 | flex-direction: column; 78 | align-items: space-between; 79 | justify-content: center; 80 | max-width: 900px; 81 | margin: 0 auto; 82 | padding: 50px; 83 | } 84 | 85 | a { 86 | color: #fff; 87 | font-size: $fontSize; 88 | font-weight: bold; 89 | text-decoration: none; 90 | 91 | @media (max-width: 600px) { 92 | font-size: $fontSizeSmall; 93 | } 94 | } 95 | 96 | .demos { 97 | display: flex; 98 | justify-content: space-between; 99 | margin-bottom: 50px; 100 | 101 | > * { 102 | margin-right: 50px; 103 | 104 | &:last-child { 105 | margin-right: 0; 106 | } 107 | } 108 | 109 | @media (max-width: 768px) { 110 | display: flex; 111 | flex-direction: column; 112 | align-items: center;; 113 | margin-bottom: 0; 114 | > * { margin-right: 0; } 115 | } 116 | } 117 | 118 | .demo { 119 | display: flex; 120 | flex-direction: column; 121 | 122 | @media (max-width: 768px) { 123 | margin-bottom: 50px; 124 | max-width: 275px; 125 | } 126 | } 127 | 128 | .full-sized { 129 | min-height: 100vh; 130 | height: 100%; 131 | width: 100%; 132 | } 133 | 134 | .github-link { 135 | font-size: 1em; 136 | color: $linkColor; 137 | text-decoration: none; 138 | display: inline-flex; 139 | align-items: center; 140 | margin-left: 0.2em; 141 | 142 | &:hover { 143 | color: $linkHoverColor; 144 | svg { fill: $linkHoverColor; } 145 | } 146 | 147 | svg { 148 | fill: $linkColor; 149 | width: 1em; 150 | height: 0.8em; 151 | } 152 | 153 | span { 154 | clip: rect(1px, 1px, 1px, 1px); 155 | position: absolute; 156 | height: 1px; 157 | width: 1px; 158 | overflow: hidden; 159 | word-wrap: normal; 160 | } 161 | } -------------------------------------------------------------------------------- /src/scss/_gradient.scss: -------------------------------------------------------------------------------- 1 | $gradientBg: rgba(0, 0, 0, 0) linear-gradient(90deg, hsl(141,81%,76%),hsl(186,81%,76%),hsl(231,81%,76%),hsl(276,81%,76%),hsl(321,81%,76%),hsl(6,81%,76%),hsl(51,81%,76%),hsl(96,81%,76%)) repeat scroll 0% 0% / 200% 200%; 2 | 3 | @keyframes GradientAnimation { 4 | 0% { background-position: 0% 50% } 5 | 50% { background-position: 100% 50% } 6 | 100% { background-position: 0% 50% } 7 | } 8 | 9 | .gradient { 10 | background: $gradientBg; 11 | color: transparent; 12 | background-clip: text; 13 | } 14 | 15 | .gradient:hover{ 16 | animation: GradientAnimation 2s ease infinite; 17 | } -------------------------------------------------------------------------------- /src/scss/_stripes.scss: -------------------------------------------------------------------------------- 1 | .stripes { 2 | position: relative; 3 | color: transparent; 4 | background: url("/images/stripes.png") repeat #fff; 5 | background-size: 100%; 6 | background-position: 0%; 7 | background-clip: text; 8 | animation: stripe2Animation 3s linear infinite; 9 | animation-play-state: paused; 10 | 11 | &:hover { 12 | animation-play-state: running; 13 | } 14 | 15 | @keyframes stripe2Animation { 16 | 100% { 17 | background-position-y: -200%; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/_stripes2.scss: -------------------------------------------------------------------------------- 1 | $stripeOneColor: rgb(241, 241, 241); 2 | $stripeTwoColor: rgb(128, 128, 128); 3 | $stripeThreeColor: rgb(190, 190, 190); 4 | 5 | .stripes2 { 6 | position: relative; 7 | color: transparent; 8 | background-image: repeating-linear-gradient(45deg, $stripeOneColor 0px, $stripeOneColor 144px, $stripeTwoColor 144px, $stripeTwoColor 288px, $stripeThreeColor 288px, $stripeThreeColor 432px); 9 | background-size: 250%; 10 | background-position: 0%; 11 | background-clip: text; 12 | animation: stripeAnimation 3s linear infinite; 13 | animation-play-state: paused; 14 | 15 | &:hover { 16 | animation-play-state: running; 17 | } 18 | 19 | @keyframes stripeAnimation { 20 | 100% { 21 | background-position: 165%; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/_textBorder.scss: -------------------------------------------------------------------------------- 1 | .text-border { 2 | animation-duration: 0.35s; 3 | animation-fill-mode: forwards; 4 | } 5 | 6 | .text-border { 7 | position: relative; 8 | white-space: nowrap; 9 | text-shadow: -2px 0 $greenBlue, 0 2px $greenBlue, 2px 0 $greenBlue, 0 -2px $greenBlue; 10 | width: 100%; 11 | transition: width 0.5s ease; 12 | 13 | &::after { 14 | content: 'HOVER ME'; 15 | color: #fff; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000; 20 | width: 100%; 21 | white-space: nowrap; 22 | overflow: hidden; 23 | } 24 | 25 | &:hover { 26 | width: 0%; 27 | } 28 | } -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $fontSize: 2em; 2 | $fontSizeSmall: 1.6em; 3 | 4 | // Colors 5 | $defaultFont: #fff; 6 | $grey: #90a4ae; 7 | $greenBlue: rgb(0, 198, 167); 8 | $linkColor: #4fc3f7; 9 | $linkHoverColor: #03a9f4; 10 | -------------------------------------------------------------------------------- /src/scss/_wave.scss: -------------------------------------------------------------------------------- 1 | .wave { 2 | color: transparent; 3 | background: url("/images/wave.svg") repeat-x #fff; 4 | background-clip: text; 5 | background-size: 200% 100%; 6 | background-position-x: 0; 7 | background-position-y: $fontSize; 8 | transition: background-position-y 0.6s ease; 9 | animation: waveAnimation 4s infinite linear; 10 | animation-play-state: paused; 11 | 12 | &:hover { 13 | background-position-x: 0; 14 | background-position-y: 0; 15 | animation-play-state: running; 16 | } 17 | 18 | @keyframes waveAnimation{ 19 | from { 20 | background-position-x: 0%; 21 | } 22 | to { 23 | background-position-x: 200%; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables.scss'; 2 | @import 'global.scss'; 3 | 4 | @import 'wave.scss'; 5 | @import 'gradient.scss'; 6 | @import 'textBorder.scss'; 7 | @import 'curvy.scss'; 8 | @import 'stripes.scss'; 9 | @import 'stripes2.scss'; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './src/js/main.js', 3 | output: { 4 | path: __dirname + '/dist', 5 | filename: 'bundle.js' 6 | }, 7 | module: { 8 | rules: [ 9 | { 10 | enforce: 'pre', 11 | test: /\.js$/, 12 | exclude: /node_modules/, 13 | loader: 'eslint-loader' 14 | }, 15 | { 16 | test: /\.m?js$/, 17 | exclude: /node_modules/, 18 | use: { 19 | loader: 'babel-loader', 20 | options: { 21 | presets: ['@babel/preset-env'] 22 | } 23 | } 24 | }] 25 | } 26 | } --------------------------------------------------------------------------------