ReactJS: How to make this image carousel run smoother? - javascript

I'm trying to make an image carousel from Scratch in ReactJS.
This is what I have so far:
https://codesandbox.io/embed/optimistic-elbakyan-4vzer?fontsize=14&hidenavigation=1&theme=dark
Drag with your mouse to change the image. Try it and you'll see that at some speeds it feels a little, stuttering? I don't really know how to explain it, and english isn't my first language.
Any suggestions to make it run smoother? I'm experimenting, so maybe my approach isn't the best. I'm all ears.

It seems to work fine on my end, the only thing is sometimes when dragging your mouse will still be dragging even when you aren't holding left click sometimes (probably when you mouse leaves the page then you let go)

Related

How can I make .hover() work with a swiping finger on a touch device?

So, here's the thing. I am using this library
This works by having a container div full of img elements, and changing their respective z-index depending on the mouse position while hovering the container. My goal is for it to work with a swiping finger instead of a hovering mouse.
After a fair bit of research I only found solutions similar to this, but it does not help me because my library uses .hover() in jquery and not the css :hover state.
I also tried mmy luck with an .ontouchmove replacing the .hover() but it broke the whole thing, I'm pretty sure I did not even use it correctly, I am am pretty lost with javascript without jquery.
So how could I possibly simulate/make this work with swiping a finger on the screen ? I'm a bit lost :(

FullPage.js not scrolling to top

I'm working on this site http://www.lodahl.aero/ which is using fullpage.js for the front page. Although it was working fine at one point, it's stopped now and (I'm sure its something silly) but i cannot figure out why. Basically you cannot scroll up or down with the mouse wheel or pageup/pagedown keys to or from the first slide. You can flip between the 2nd and 3rd slide fine, but the 1st one is not playing ball. Can anyone elighten me as to what I'm missing?
Thank you

Tricky sprite movement control with JavaScript/jQuery

I'm currently trying to figure out how to animate the sprite properly without the help of extra libraries other than jQuery. This is the live demo of what I have right now.
Controls: A for left, D for right, Space for jump, left mouse click to fire.
Here's the problem: if I press the left and right keys really fast, the animation gets screwed up, try it yourself since It's kind of hard to describe the mess...
My code is very scrappy right now because I'm playing around with many methods, so please bear with me for now. Here's the JavaScript code. If you want to see the html and css, they are in the same directory.
$('#obj') is the object of the sprite.
I am too lazy to look at the links for your code. If you say it is acting crazy, sounds like you are not cancelling the animations before applying the next one. Call stop() before running the next animation.
$("#obj").stop().animate(...)

page animation on scrolling it like movie

I found this page http://www.wanderworld.io/ when you scrolling its start animation on scrolling and scenes are changing. how to create something like this? Please help me, any example on jsffidle or codepen?
To point you in the right direction, this is called parallax scrolling and can be accomplished using CSS, but is most commonly done in Javascript / jQuery.
This library is great for parallax animation and would probably accomplish most, if not all, of what the example site does: http://prinzhorn.github.io/skrollr/
Basically the idea is to have a page scroll listener that tracks the window.scroll position. At certain ranges, elements move in and out of the screen. The concept behind it is relatively simple, but it can be difficult to implement and can be as complicated as you choose to make it.

How to create a Scroll Button?

I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!

Categories