Move through divs using the keyboard arrows on react - javascript

A while ago I came across a jQuery plugin in which I was able to move through divs, menus, images ... using the directional arrows on the keyboard.
I've searched a lot about it but I can't find anything.
I need to do this in react, but I can't find any tutorial and I'm kind of lost in this subject
Here is an example of a screen that I need to develop
Remembering that I need to do this in react

Related

Using react-spring Parallax, how can I increase an image width as the user scrolls?

I am making a basic webpage on React with two Parallax Layers with images, the first layer image is a drawing of a room, and the second layer image is a drawing of a doorway, with a transparent cutout where the door is. I plan on doing a bunch of parallax scrolling in the future for this site, and want to use the react-spring package since it has many features I'm keen on using.
As the user scrolls down, I want to zoom and increase the width of the doorway image (yellow box) from the center point, till it is no longer visible and gives way to the room illustration, instead of it scrolling up and disappearing. Essentially, an illusion of entering a room through a door.
Here is the jist of my code on codesandbox, if you scroll you can see some of the react-spring Parallax in effect. I have spent about 12 hours looking for an answer on how to increase the width of the doorframe image (yellow box) as I scroll, and have had no working results. I'm running out of things to Google - I've tried methods with Javascript, where I give the CSS style a variable, Jquery that tracks scroll distance, using Spring native to, and pure CSS and still can't seem to find a solution compatible for the react-spring package.
https://codesandbox.io/embed/practical-sea-2tecb?fontsize=14&hidenavigation=1&theme=dark
Since I am trying to use React and the react-spring library, I think I've made this issue complicated. But, as I develop more of the site, I want to be able to use the features on react-spring. Any guidance would be so, so helpful.
Thanks

How to manage scrollbars as we want

In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.

mobile swipe navigation examples

Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu

How can I scroll multiple DIVs in a slide-bar using jQuery?

I am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.

parallax horizontal navigation with javascript

I'm studying parallax and horizontal scrolling website and I get in touch with this fantastic website: http://www.black5.de/
Exploring with firebug I found that their developers:
use absolute positioned elements
use a non-scrolling container
recreate a custom navigation controller using arrow keys, mouse wheel and in-page anchor
I tried to re-implement this logic here: http://www.albertobottarini.com/parallax/index-manual.html
As you can see anchor links works but navigation with arrows and mouse wheel don't works (and it's correct because I don't create custom controllers for them). Implementing custom navigation seems very hard job (for example I have to take care about user keep pressing arrow key because they want to speed up navigation).
I tried some other jquery plugin (like jparallax) but the resulted webpage is the same as mine where everything seems choppy and jerky.
How can I recreate the fluidity and pleasantness of www.black5.de? Do you think it will be a huge project? Do you know some useful library/plugin?
Thanks

Categories