I'd like to build a footer, which reveals when the bottom of page is reached, kinda like this:
https://www.thecssninja.com/css/reveal-effect
So far so good, I have that.
What I want to add now is an additional information within the footer, which gets revealed, when the other part of the footer is shown completely.
One could say, that I have two fixed footer parts. After the whole page is scrolled it will reveal the first part. And then this first part must somehow change from fixed to normal positioning allowing it to scroll up further to reveal a second footer part (fixed) underneath.
Does somebody know any examples (can include JS stuff) or does anyone have a trick for this?
Thanks for all the help.
Cheers
Related
The issue I have having is a need to build a footer that only appear when you have scrolled to the bottom of the page. then once at the bottom the footer animates up. It is no problem if it over laps what is on the bottom. I also need a button in the top right corner so that the footer goes back down and disappears. My client wants what https://yorkcapital.com/ has... you sometimes have to scroll down and force it to comes up by trying to scroll down more. Ive never created a footer like this... Please help. I just never thought about using a footer this way. please please help. thanks everyone!
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I'd need an advice about how to create the code related to the sidebar contained into my homepage.
My homepage is composed of: header, left sidebar, main column (that is at the right of the sidebar) and footer.
What I need is a bit specific, indeed I tried to search for it, searched again and again through Google, through Stackoverflow and many other web sites but unfortunately I didn't get nothing that is right for me. I found several useful advices, several pratical examples and many starting points and I tried and tried again to mix each others the parts of these codes, but without getting what I really need about. All of this because I think my request is a bit specific and I'll try to explain it by hoping to be as clear as possible.
In my case I don't have just to fix a column, because I found meny examples about that as already told above. In my case I need to "synchronize" the left sidebar scrolling with the main column scrolling.
Something similar is present in Facebook, if you go into your profile page you can find something similar to what I need. By the way, I try to explain it here below by hoping to be as clear as possible:
at the time that I scroll the page DOWN I need that BOTH the left sidebar and the main column scroll down together, until the left sidebar will show the LAST visible element contained into it. At this point the scrolling should continue to scroll down ONLY the main column
vice versa, at the time that I scroll the page UP I need that BOTH the left sidebar and the main column scroll up together, until the left sidebar will show the FIRST visible element contained into it. At this point the scrolling should continue to scroll up ONLY the main column
Further note: the main column (NOT the left sidebar, but just the main column) is dynamic, in other words it shows the feeds dynamically, increasing its height instantly.
Hoping to having explained well the matter, I thank you all of you for your help!
Here is a jQuery plugin that seems to do what you want:
http://leafo.net/sticky-kit/
I'm trying to add a twitter "follow" button to the footer on my site, but it is causing numerous problems with the display of the footer.
If you take a look at this fiddle, you can see the issues. I've added testing controls to make it easier to demonstrate, but basically, I want to stop the following things from happening when the button is added:
Extra padding at the top
Everything being moved to the left (losing text-align:center)
The button not being vertically aligned with the text to the left of it.
Please can someone advise on how to achieve this?
The Twitter button gets styled through javascript to a width of 300px, only thing getting around that is to wrap it up with a span or a div and put it on a width of 60px; Because 300px pushes you menu to the side. Losing your text align center.
Also you might want to wrap your links in a unordered list element so you have more control over the whole group and it becomes more semantic.
My solution
I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.