I'd like to create a one-page website where you can click a button and navigate to a different part of the website by automatically moving to it. This movement could be to the left, right, up or down.
This is an example of how the full, zoomed out page would look like:
The idea is that only one of these pages should be visible at a time in the browser. So when you're on the "main page", you only see that one, and not what's to the left, right, up or bottom from it. You should be able to move to these around it by clicking links on the page.
Now I have no idea how to start this. Do I make one giant html page, like the image, and do the zoom and movement to an other page with some JavaScript library?
Or will I have to make this completely in the canvas object? If so, any useful libraries I could use?
Thanks in advance,
Ruben
Related
Anyone knows what I can use to create an scroll effect like the one of this website? https://www.kissthebride.fr/
When mouse wheel is used the presentation pages are shown one by one and the user is forced to stay some seconds at least on the page (if he doesn't use the right navigation).
I built my site using React. It has a pinned site navigation menu on the left, a pinned page navigation menu (to navigate through the current presentation pages) on the right and the main content on the middle. I need to apply this effect to the main content only and keep the right and left parts as they are.
The effect itself
Animation ideas
.
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
How to create tiles effect like here?
Also, when any tile is clicked, two sections appear. One from right, another from left side and overlays landing page. How to do similar effect?
The page you linked to uses Isotope.js.
You could also use Masonry.js, which is similar.
Since I'm still new to Javascript/Jquery/HTML5/CSS3, I thought I'd ask a question for all you much more experienced programmers out there.
I'm kind of stuck at the beginning of my program logic. I want to do a website with a parallax "scrolling" effect, however the effect should only take place when the user clicks navigation buttons on the edges of the screen.
The layout of the website will be like this:
O
OXO
O
The "O"'s are the content divs, "X" is the "home" page (point of origin). If the user clicks the arrow at the top of the screen (from point of origin), the page will scroll up. Same goes for any of the other directions. I'm wanting one giant photo of the establishment in the background that shifts it's position based on the specific content div they "scroll" to, using the parallax effect.
I've been racking my brain for two days trying to figure out where to start with this. Any help would be greatly appreciated, and please let me know if I need to be more specific about something. Thank you!
The home page content is in the middle of the parallax experience.
For this reason, you will need a parallax plugin that can handle both vertical and horizontal parallax effects to allow proper navigation in your webpage.
Consider: Scrolling Parallax Plugin for jQuery
The above parallax demo page allows you to scroll both directions.
Here's the method/approach I would take using this plugin.
1. Design your website with horizontal and vertical content as required. Layout example:
OOO Here, the top of the webpage is content about the "starting" point.
OXO Next, you have content on the sides of the "starting" point as shown.
OOO Finally, content is below the "starting" point to complete the webpage.
2. Since the webpage visitor will see the very top of the webpage which is not desired, use jQuery.scrollTo() Plugin to set the "starting" point on page load.
3. Use a plugin or method that will allow 4 transparent arrow "div's" that are at each viewport side in "fixed" position. When clicking (or hovering) with the mouse, this will simulate scrollbar movement and the parallax webpage plugin will react accordingly. Example of layout (note outer navigation is semi-transparent):
UUUUU Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR The center starting point will show the "fixed" Navigation arrows.
LOOOR LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD Bottom-content is here plus the overlay arrow for DOWN Navigation.
The most difficult part of the webpage is to have enough "filler-content" that occupies the top and sides of the "starting" point. But if that "filler-content" is a thumbnail gallery, then this particular parallax page would look really nice (and unusual!).
Here is what I am thinking:
I have long web page and when the user reaches the end, I don't want the scrolling to stop just then, but I want to reload the page again from the bottom and continue the scrolling.
Detailed
As the user scrolls to the bottom, I want the top of the website to be removed from the top and placed at the bottom in a smooth way and this effect has be vice versa also. I mean if user scrolls up at the top of the page, then the footer must load at the top and continue in this fashion.
Yes, Infinite Scroll can do this. There is also a jQuery plugin.
Now whether you should do this... that's an entirely different question. Personally I find this behaviour extremely annoying.