I came across this article on Codrops about altering the scroll behaviour with smooth easing:
https://tympanus.net/Tutorials/SmoothScrollAnimations/
Here is the js file responsible for this subtle effect:
https://github.com/codrops/SmoothScrollAnimations/blob/master/js/demo.js
I would like to learn how to turn this class based oop syntax from vanilla javascript to React.
I already figured out that some custom hooks can comes in handy (useWindowsSize or useOnscroll) but I can't figured out the way to pass all other class related stuff into a stateless functional component structure.
I know that this is Scrolljacking and it is not supposed to be used in a webpage, but I'm trying to learn how to completely switch to react for my projects.
My question is, how would you refactor this code?
(p.s. I'm not looking for someone to do the job for me. I'm just looking for advice on what is the right way to face this challenge, as now I'm stuck not knowing where to start.)
Related
I'm building an app using Vue(Nuxt) and Tailwind. I have a component which is named "game container" and I want this component to have on hover tilt effect. So, after a little search, I found the Tilt.js library and wanted to use it. But didn't find anything about its implementation. So, is it possible to use Tilt.js on Vue, if it's possible how?
I know this is a bit of a stretch, but I have been building this small React application that includes creating, editing and deleting these draggable cards. I now want to make some type of a system where I can create a list that holds those cards, so that I could possibly track their completeness that way. The issue is - I experimented with some placeholders, but the problem is I have not too much knowledge on how to approach this problem. Any advice (using React JS) would be greatly appreciated!
My repository: https://github.com/SortedIvan/DigitBiscuit
I tried creating the list functionality, but unfortunately I can't get it to work at all. I am not asking for a full on solution, but maybe advice on how to somehow target this problem! :)
So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P
I'm working on a small web application and I'm developing it using ReactJS and Material UI. In the examples provided in the documentation many components seems to have useStyles within the code. I followed the examples and now I basically a useStyles function within each of my components. My question is: is it good practice?
Usually I have a separate CSS file with all the classes, and frankly I find it easier to manage, but for this case I wanted to follow the CSS-in-JS pattern.
You can see an example of the code I'm working on here: https://github.com/sickdyd/foriio/blob/master/src/components/body/UserProfile.js
Thank you for any clarification you may can give me.
Yes, that is good practice.
It allows you to separate your concerns and localize your styles, where they are needed. You do not accidentally override styles while working on other classes. This will help you especially for larger projects.
It will also allow code splitting and only the CSS/CSS-in-JS that is needed and actually used will be downloaded and added to your website. This will improve your initial paint time as well since less CSS has to be parsed.
I you feel that you are repeating your code at several location, you could also share the useStyles functions or override the global theme to reduce the overall amount of code as well.
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.