my question is about making all of the content on my webpage move when I go through different sections of the site. For example I am in the Home page and click on Contact, all the text,pictures,div tags, etc. should move left and out of the screen and the new info (from Contacts) should move from the right and to the middle of the screen where it should be. Something like a transition on a presentation... I think it should be something simple, but I'd appreciate if someone points me in the right direction. Thanks!
Not simple, but check out jQuery and animate:
http://api.jquery.com/animate/
Related
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
I'm trying to achieve A very cool effect I found in this website:
https://platforma.ws/
as you can see, at the very end the scrolling changes of direction, instead of scrolling to the bottom it starts scrolling to the right side.
I want to do something similar, but after completing the scrolling to the right side I would like to continue the down scrolling for a while. Like this image attached
Can someone recommend me a method to achieve this? is this possible only using html/css? or will require some javascript?
thanks in advance!
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'm having a real hard time implementing ScrollMagic Section Wipes and smooth scroll to anchors. The thing is i can use the links to scroll down but not up! I can imagine this happens because the underlying sections are stuck at top and there is really nothing to scroll to.
I have an example of what i mean in: http://www.globovac.net/scroll
In this example, if i click "UNITS" i get a blue section, that's perfect. I need to click "HOME" and the blue section goes down and shows the first green one again.
Can someone help me, i would really like to implement ScrollMagic but it's useless without a proper menu. Thank you all in advance!
EDIT:
What i basically would like to do is a combination of this anchor navigation:
codepen.io/grayghostvisuals/pen/EtdwL
with this Section Wipes example:
http://scrollmagic.io/examples/basic/section_wipes_natural.html
How hard can this be?...
I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php