Free Photos
WordPress Themes

Nice Scroll Effect

HTML
<header> <nav></nav> <div class="menu-trigger"> <span></span> </div> </header> <!-- SVG --> <svg> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5"/> <feColorMatrix in="blur" result="colormatrix" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8" /> <feBlend in="SourceGraphic" in2="colormatrix"/> </filter> </defs> </svg>
SASS
// Variabls $bodyBG: tomato body background-color: $bodyBG height: 2000px header filter: url('#goo') nav background-color: #fff height: 80px .menu-trigger position: fixed width: 50px height: 50px border-radius: 50% background-color: #fff cursor: pointer top: 15px right: 40px span, span::before, span::after background-color: #555 width: 25px height: 2px position: absolute span top: 50% left: 50% transform: translate(-50%,-50%) span::before content: '' top: -6px span::after content: '' top: 6px
JAVASCRIPT
Expand for more options Login