footer animation with button - javascript

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!

Related

How to make a component appear below a fixed element when the page is fully scrolled

I'm a developer intern, and at the moment I'm designing a few web pages for my company. The latest request has me puzzled, so any help would be much appreciated. Using next.js
We have a page, with content, and at the bottom, a button. The button is fixed, so it's always visible. We have another component, a simple footer with links in it.
What I need to do is stick the footer below the button, but only when the page is fully scrolled down.
So: if the page is not fully scrolled down, only the button should be visible at the bottom. If it is fully scrolled down, the component with the footer should be visible below the button.
Any pointers/tutorials/links on how I could go about doing this?
Thank you!

Slide up window in HTML/JS

Im trying to add a button/tab on the bottom right corner of the page. That when clicked slides up a window. I've seen this somewhere but i can't get it to work.
I found my answer shortly after. If you're looking for the same, this thread might help:
HTML CSS/JS Bottom navbar Sliding Up

Double Curtain Reveal Effect of Footer

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

splash page animation

I have this idea in my head that when my site loads, there's this line of text or image that says... i don't know, "hello"... then, after about 2 seconds or so, it smoothly and quickly slides to the right with my home page following it stopping when the page is centered with the browser window. My entire site slides left or right horizontally when you change pages. would anyone know how to accomplish this? thank you so much!
heres the code i'm using for my navigation for my site.
http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

How do I make an image partially scroll, then stay fixed, then scroll when you pass a section?

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.

Categories

Resources