Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want
Related
I want to be able to click on a link in my HTML website and when I load onto the other website to be in the same position. Say you are in the middle of a website when you click the link I want to be in the middle of the website when I load onto that link. Is there anyway to do this? Sorry if this is confusing.
I'm sorry for the confusion, but I meant if you controlled both web pages. My bad.
There's no way unless you have control over the linked site.
Scrollbar is rendered by the browser based on overflow-x or overflow-y attributes, if you have no control over the linked site's code, you can't force it to present a scrollbar or scroll to a specific position(which requires javascript code to be executed)
If you have access to the linked site's code, you can send the ID of the element you want to scroll to through the url as a parameter like this:
https://example.net#mydiv
and then, at the linked site, just add this javascript code to scroll to the element:
$(window).load(() => {
const divID = window.location.hash;
document.getElementById(divID).scrollIntoView();
});
My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content
I'm using scrollreveal on my website, and it mostly works well, but
sometimes the page is flickering just before the divs reveals and
make it looks like the page is loading, before the code is executed
after loaded http://regen.no/samarbeidspartnere when reloading
the page, you clearly see the problem.
Sometimes when using the #anchor link to a div with the id, the page is also flickering.http://regen.no/start changing between
"forsiden" and "påmelding" the page are flickering before it
jumps to the target div.
Is there any way to solve this issue?
Thanks.
By using the performance tab in Chrome developer tools, I did a recording (changing between two anchor points) and I notice that when a link is hit, the page goes directly there and then the smooth scrolling effect takes place. To describe this with a small example let's say that the user is at #bottom and clicks to go to #top:
The page goes directly to #top
The smooth scrolling effect takes place, so the page goes back to #bottom
Smooth scrolling back to #top
This is why you get this flickering and flashing result.
Maybe you should use a event.preventDefault(); somewhere in your js code.
so i have a website with multiple pages and a navigation menu with links to the other pages.
i need a Jquery and/or CSS page transition that'll slide the page down, load new page and then slide that page back up.
This would be easy to do if the content of all the pages was in one single page, in different divs, and then i could just make a sort of carousel to show the div corresponding to the link that was clicked. Most of the answers i found applied to that situation. this is not the case though so that wouldn't work and i can't touch the html of the site!
css3 transitions work great when the page loads, but they also need to happen onbeforeunload, which is where the problem lies. i can use jquery to give the divs a class onbeforeunload, which works, but it unloads before the animations even start happening.
I've tried this plugin:
https://rawgit.com/votum/page-transitions/master/demo/index.html
but it looks very glitchy and doesn't work properly.
any ideas?
You can check out accordion to show content of selected menu item.
https://jqueryui.com/accordion/
I have a landing page on my website.
I want to be able to click or slide it away to view the actual website (sort of like the Windows 8 lock screen)
I have tried to use an onclick event on the landing page to open the website but it does not give the desired effect. I need it to be seamless and fast.
How could I go about doing this?
Thanks,
Use Position: fixed; for the landing page content and listen for click in JavaScript
as shown in http://jsfiddle.net/5HXaQ/5/
You can use different CSS transition functions to achieve the kind of slide effect you need
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function