SOLVED Dynamic logo resizing on scrolling
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
- Can anyone tell me the best way I can create a header effect similar to http://csipads.com/ using Gantry / Hydrogen template?
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You would have to write some Javascript or jquery to do that to detect the scrolling event and check positioning of the page. You would also need to create a fixed header.
Gantry 5 fixed header tutorial can be found here http://www.rockettheme.com/forum/gantry5-for-joomla/249638-creating-a-fixed-header-navigation-in-callisto-new-and-updated .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
MrT,
Thanks for the feedback. I have already been fixing headers for well over two years so I'm good on that. It was the dynamic effect I was looking for. Hopefully, someone will post back a way they accomplished this on their websites.
Wordpress has templates that effects like this are built in. This might be something that RT might want to look for including classes in the Gantry Framework to accomplish the same thing. Yes, I know that as individual developers we can do this ourselves (once we figure out how to do it) but as with your responsive classes (which I use A LOT), having the built-in classes gets done by one set of developers (RT) instead of thousands.
As a suggestion, a list could include classes for increasing or decreasing by percentages of widths like this:
Class for scrolling in pixels:
- g-scroll-100
- g-scroll-200
- g-scroll-300
- g-scroll-400
- g-scroll-500
Class for effect to implement:
- g-responsive-100
- g-responsive-75
- g-responsive-50
- g-responsive-25
So if you have a <div class="g-scroll-200 g-responsive-75">CONTENT</div> then if that content is scrolled 200 pixels, then it would be reduced to 75% of container width. This way you only have 9 classes instead of 20 if you combined them into one set like 'g-scroll200-resize75' plus it would make development easier.
OK, I admit it, I want my cake AND my icing but just a thought for any potential future enhancements.
- Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
It's not the classes that's the issue it needs JS. If every time your scrolled the page you has to check all the page for those classes then it would grind to a halt. So you need to hang events off and element and put the settings elsewhere to control it... (again this means JS or JQuery).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
MrT,
Thanks! In case anyone is reading this thread, I found this tutorial that looks promising. I intend to test this out and will reply back here with my results.
http://callmenick.com/post/animated-resizing-header-on-scroll - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok thanks for that... Let us know the outcome.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
MrT,
I have a plan BUT I can't seem to get the JS files to be recognized. I have created a /custom/js/ folder, uploaded the JS files into the folder, added the files via the template Custom CSS / JS twig, cleared cache, reloaded page but I don't see it loading the JS files anywhere.
gantry-assets://custom/js/classie.js
gantry-assets://custom/js/classie-nav.js
gantry-assets://custom/js/scrollheader.js
This image is hidden for guests.
Please log in or register to see it.
Now I think I added the JS files correctly in the template but if I didn't, let me know. Otherwise, why isn't it loading in the webpage display?
Luke - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Luke Douglas = Please would you post your URL, superuser id and pswd in the secure tab of your post and i'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
MrT,
I've setup an account for you.
Luke - Just another old hacker!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I can't get any response from your site - I just get "connection timeout".
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.116 seconds