Animated resizing Header on scroll

Vitaliy WD
490 Posts
Vitaliy WD posted this 28 January 2015

Hello.

It would be great to add function "Animated resizing Header on scroll".

Here is some examples.

About and "how to": http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
Demo example: http://callmenick.com/tutorial-demos/resize-header-on-scroll/

About and "how to": http://ruseller.com/lessons.php?rub=2&id=1882
Demo example: http://ruseller.com/lessons/les1882/demo/index.html

About and "how to": http://www.rudebox.org.ua/on-scroll-header-effects/
Amazing demo example with cool efects and features: http://www.rudebox.org.ua/demo/on-scroll-header-effects/

Shrinking navbar in Bootstrap 3 example and source (demo and source inside archive): http://span-tag.com/bootstrap-navbar/

Is it possible?

To users: please vote for this topic if you have interest in this feature.

Hello. It would be great to add function "Animated resizing Header on scroll". Here is some examples. About and "how to": http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/ Demo example: http://callmenick.com/tutorial-demos/resize-header-on-scroll/ About and "how to": http://ruseller.com/lessons.php?rub=2&id=1882 Demo example: http://ruseller.com/lessons/les1882/demo/index.html About and "how to": http://www.rudebox.org.ua/on-scroll-header-effects/ **Amazing demo example with cool efects and features**: http://www.rudebox.org.ua/demo/on-scroll-header-effects/ Shrinking navbar in Bootstrap 3 example and source (demo and source inside archive): http://span-tag.com/bootstrap-navbar/ Is it possible? To users: please vote for this topic if you have interest in this feature.

Last edited 28 January 2015 by Vitaliy WD

Vote to pay developers attention to this features or issue.
35 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 29 January 2015

Hello

Thank you for the suggestion. We'll consider it for the future versions.

Regards,
Olivia

Hello Thank you for the suggestion. We'll consider it for the future versions. Regards, Olivia
Vitaliy WD
490 Posts
Vitaliy WD posted this 31 January 2015

Thanks for reply, Olivia.
Hope that it will be available in next updates.

To users: please don't forget to vote for this topic if you have interest in this feature.

Thanks for reply, Olivia. Hope that it will be available in next updates. **To users: please don't forget to vote for this topic if you have interest in this feature.**
designdrago
64 Posts
designdrago posted this 02 October 2015

That is be great :D

That is be great :D
Marco
171 Posts
Marco posted this 09 October 2015

Anything new on this ?

Anything new on this ?
martin75
13 Posts
martin75 posted this 20 October 2015

is it on the lists of new features or did anyone solved this with own programming?

is it on the lists of new features or did anyone solved this with own programming?
Support Team
Support Team posted this 20 October 2015

Hi,

This feature is ion our wish list but we can not provide any approximate time frames when it will be implemented. Now we are working on more important features.

Sincerely,
Hella

Hi, This feature is ion our wish list but we can not provide any approximate time frames when it will be implemented. Now we are working on more important features. Sincerely, Hella
matrix630307
164 Posts
matrix630307 posted this 19 January 2016

i like this too.

i like this too.
Marco
171 Posts
Marco posted this 28 March 2016

anything new on this?
this feature was suggested over one year ago...

anything new on this? this feature was suggested over one year ago...
Support Team
Support Team posted this 30 March 2016

Hi,

This feature is on our wish list, but unfortunately not implemented. Now we are working on more important features.

Thank you,
Themler Team

Hi, This feature is on our wish list, but unfortunately not implemented. Now we are working on more important features. Thank you, Themler Team
Marco
171 Posts
Marco posted this 30 March 2016

as they are - what? For example?
just to have a "good feeling" ;)

as they are - what? For example? just to have a "good feeling" ;)
Chuck_c1M5xGbOnw
6 Posts
Chuck_c1M5xGbOnw posted this 30 March 2016

Now we are working on more important features.

More important to who? This feature received 70 votes so that's 70 CUSTOMERS that feel this is important.

As Marco mentioned, can you at least share some of the new features in the works as well as a timeframe? It would be nice to know that our requested features are actually being implemented. Thanks.

> Now we are working on more important features. More important to who? This feature received 70 votes so that's 70 CUSTOMERS that feel this is important. As Marco mentioned, can you at least share some of the new features in the works as well as a timeframe? It would be nice to know that our requested features are actually being implemented. Thanks.
Stagger Lee
1818 Posts
Stagger Lee posted this 30 March 2016

It is so easy to make with few lines of code. And CSS3 effect.

But at the other side it is easy too for Themler developers to make as options. So I dont understand why they did not make it long time ago.

It is so easy to make with few lines of code. And CSS3 effect. But at the other side it is easy too for Themler developers to make as options. So I dont understand why they did not make it long time ago.
Stagger Lee
1818 Posts
Stagger Lee posted this 30 March 2016

Something like this. Reduce timings, it is only for testing purpose.

.bd-affix-1.affix .bd-imagelink-10,
.bd-affix-1.affix .bd-layoutbox-1 {
 transform: scale(.8); 
 -webkit-transition:transform 1.5s ease-in-out;
  -moz-transition:transform 1.5s ease-in-out;  
  -o-transition:transform 1.5s ease-in-out;         
  transition:transform 1.5s ease-in-out; 
}
.bd-affix-1.affix .bd-layoutbox-3,
.bd-affix-1.affix .bd-headline-4 {
margin:0;
padding:0;
}
.bd-affix-1.affix .bd-headline-4 h3,
.bd-affix-1.affix .bd-headline-4 h3 a {
font-size:16px;
}
.bd-affix-1.affix .bd-slogan-4 {
display:none;
}

.bd-affix-1.affix .row {max-height:55px;}

.affix .bd-layoutcontainer-31 {
  padding:0px;
  -webkit-transition:padding 1.5s ease-in-out;
  -moz-transition:padding 1.5s ease-in-out;  
  -o-transition:padding 1.5s ease-in-out;         
  transition:padding 1.5s ease-in-out;  
  background-color: #333333;

}

.affix-top .bd-layoutcontainer-31 {
  padding-top:15px;
  padding-bottom:15px;
  -webkit-transition:padding 1.5s ease-in-out;
  -moz-transition:padding 1.5s ease-in-out;  
  -o-transition:padding 1.5s ease-in-out;         
  transition:padding 1.5s ease-in-out;  
  background-color: #333333;
}

Something like this. Reduce timings, it is only for testing purpose. .bd-affix-1.affix .bd-imagelink-10, .bd-affix-1.affix .bd-layoutbox-1 { transform: scale(.8); -webkit-transition:transform 1.5s ease-in-out; -moz-transition:transform 1.5s ease-in-out; -o-transition:transform 1.5s ease-in-out; transition:transform 1.5s ease-in-out; } .bd-affix-1.affix .bd-layoutbox-3, .bd-affix-1.affix .bd-headline-4 { margin:0; padding:0; } .bd-affix-1.affix .bd-headline-4 h3, .bd-affix-1.affix .bd-headline-4 h3 a { font-size:16px; } .bd-affix-1.affix .bd-slogan-4 { display:none; } .bd-affix-1.affix .row {max-height:55px;} .affix .bd-layoutcontainer-31 { padding:0px; -webkit-transition:padding 1.5s ease-in-out; -moz-transition:padding 1.5s ease-in-out; -o-transition:padding 1.5s ease-in-out; transition:padding 1.5s ease-in-out; background-color: #333333; } .affix-top .bd-layoutcontainer-31 { padding-top:15px; padding-bottom:15px; -webkit-transition:padding 1.5s ease-in-out; -moz-transition:padding 1.5s ease-in-out; -o-transition:padding 1.5s ease-in-out; transition:padding 1.5s ease-in-out; background-color: #333333; }
Support Team
Support Team posted this 01 April 2016

Hi,

I'm passing this issue to managers for closer analyses, we will let you know when we receive the results.

Thank you,
Themler Team

Hi, I'm passing this issue to managers for closer analyses, we will let you know when we receive the results. Thank you, Themler Team
Stagger Lee
1818 Posts
Stagger Lee posted this 15 April 2016

I just became aware you can do much by adding existing "More Styles" options to "Fix on Scroll" extension.
Some examples what we could do with it:

  • Force logo to be smaller (Image Style).
  • Reduce fonts for links and text.
  • Menu Items are "li" bullets, we could reduce paddings and make menu height smaller when affix is activated.
  • And some other possibilites, cannot remember now...

One additional option that would make it more spread over many real life cases is one new control specific for affix. One new wrapper container what could be removed when affix is activated. To make it take less time from your developers it can work as image styles, or Section name. Just one empty text input fields where we write Ids / conatiner names and same names we write again when saying to affix extension what to hide. It can be one array separated by "," in text field manually added.

I do all of this very easy manually, so for me personally it is not one feature request that it is so urgent. Just sharing ideas around. (It is one general idea, not just for animated resizing.)

I just became aware you can do much by adding existing "More Styles" options to "Fix on Scroll" extension. Some examples what we could do with it: - Force logo to be smaller (Image Style). - Reduce fonts for links and text. - Menu Items are "li" bullets, we could reduce paddings and make menu height smaller when affix is activated. - And some other possibilites, cannot remember now... One additional option that would make it more spread over many real life cases is one new control specific for affix. One new wrapper container what could be removed when affix is activated. To make it take less time from your developers it can work as image styles, or Section name. Just one empty text input fields where we write Ids / conatiner names and same names we write again when saying to affix extension what to hide. It can be one array separated by "," in text field manually added. I do all of this very easy manually, so for me personally it is not one feature request that it is so urgent. Just sharing ideas around. (It is one general idea, not just for animated resizing.)
EverseenDE
5 Posts
EverseenDE posted this 20 April 2016

Is there any new status to this function? Ive a logo in my fixed-on-scroll-container which should shrink when i scroll. it should big in the header on lead and on scroll shrinking to a smaler level for more space for content.

Is there any new status to this function? Ive a logo in my fixed-on-scroll-container which should shrink when i scroll. it should big in the header on lead and on scroll shrinking to a smaler level for more space for content.
Support Team
Support Team posted this 21 April 2016

Hi,

Unfortunately I can not provide any exact dates, but this feature is in our future implementation list and our developers will implement it in the future.

Sincerely,
Hella

Hi, Unfortunately I can not provide any exact dates, but this feature is in our future implementation list and our developers will implement it in the future. Sincerely, Hella
khaledwhisper
37 Posts
khaledwhisper posted this 02 July 2016

any updates ?

any updates ?
Support Team
Support Team posted this 04 July 2016

Hi,

Unfortunately there are no news about this feature.

Sincerely,
Hella

Hi, Unfortunately there are no news about this feature. Sincerely, Hella
Marco
171 Posts
Marco posted this 06 July 2016

you´re kidding us...

you´re kidding us...
You must log in or register to leave comments