From 70d1d4ab75d02f272b820a117e73596fe58d26a1 Mon Sep 17 00:00:00 2001 From: Mursal Date: Fri, 11 Oct 2019 11:10:55 +0500 Subject: [PATCH] Fixed the length issue, now it changes shape as soon as the user starts to scroll --- css/component.css | 21 +++++++++------------ css/default.css | 1 - index.html | 3 ++- js/cbpAnimatedHeader.min.js | 2 +- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/css/component.css b/css/component.css index 7d53392..55e0152 100755 --- a/css/component.css +++ b/css/component.css @@ -7,9 +7,9 @@ z-index: 10000; height: 230px; overflow: hidden; - -webkit-transition: height 0.3s; - -moz-transition: height 0.3s; - transition: height 0.3s; + -webkit-transition: height 0.1s; + -moz-transition: height 0.1s; + transition: height 0.1s; } .cbp-af-header .cbp-af-inner { @@ -19,15 +19,13 @@ padding: 0 1.875em; } -.cbp-af-header h1, -.cbp-af-header nav { +.cbp-af-header h1, .cbp-af-header nav { display: inline-block; position: relative; } /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */ -.cbp-af-header h1, -.cbp-af-header nav a { +.cbp-af-header h1, .cbp-af-header nav a { line-height: 230px; } @@ -56,11 +54,10 @@ } /* Transitions and class for reduced height */ -.cbp-af-header h1, -.cbp-af-header nav a { - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; +.cbp-af-header h1, .cbp-af-header nav a { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + transition: all 0.1s; } .cbp-af-header.cbp-af-header-shrink { diff --git a/css/default.css b/css/default.css index 1beb463..cfcd38e 100755 --- a/css/default.css +++ b/css/default.css @@ -128,7 +128,6 @@ a:hover { .bp-icon:after { font-family: 'bpicons'; - speak: none; font-style: normal; font-weight: normal; font-variant: normal; diff --git a/index.html b/index.html index 1814137..27d9dbb 100755 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ +
-

Fixed

@@ -38,6 +38,7 @@

On-Scroll Animated Header

Go to the archive +

Dreamcatcher american apparel typewriter polaroid, Pinterest hoodie tousled vegan pickled gastropub iPhone VHS sartorial. Fanny pack vinyl fingerstache whatever, raw denim Carles literally next level fashion axe photo booth pour-over Echo Park.

diff --git a/js/cbpAnimatedHeader.min.js b/js/cbpAnimatedHeader.min.js index 665ee63..d072c0c 100644 --- a/js/cbpAnimatedHeader.min.js +++ b/js/cbpAnimatedHeader.min.js @@ -8,4 +8,4 @@ * Copyright 2013, Codrops * http://www.codrops.com */ -var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){d();window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})(); +var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=1;function f(){d();window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();