Develop Reference

Using Canvas to display images for animation purposes

I'm getting into web animations, WebGL, Canvas, ThreeJS, GSAP and all those fun tools. I'm investigating different websites and how they're able to achieve certain effects.
I am mind blown by these two sites: https://14islands.com/ & https://www.hellomonday.com/.
Their animations look simple(ish). Liquid effect on images. I know with ThreeJS filters or WebGL or other Canvas libraries you can achieve the effects. What I don't understand is that both of these sites have a full-sized <canvas> element fixed to the background. And render almost all the images on the site through the <canvas> rather than pure HTML elements.
This allows to have all images to have really dope effects. But what I don't understand is how can they sync the positions and sizes of the images with HTML DOM elements so perfectly?
This seems like a nightmare to code. Also wouldn't it be a huge performance burden to update every image on the canvas when the user scrolls or resizes the page?
I believe I'm missing something. Perhaps there's a library that handles most of this?
If there are any simple examples, I'd love to see them.
Thank you for your time :)

Welp turns out this can be done quite simply with ThreeJS. Perhaps there are ways as well but this seems easiest to me.
TL;DR: You can create a scene for a div, and you can do this multiple times with ThreeJS so that it renders a scene within the specified div.
Demo: https://threejs.org/examples/?q=multiple#webgl_multiple_elements
Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html

How To Give Effect Particle while mouse move and Luminous while hover in canvas

I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect

Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.

JS Good way to make marking effect with line

There is an effect of pointing to a special element of image with line.
See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:
Then after scrolling appears lines with hints:
I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.
The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?
Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.
Update: want to see resolved issue with image resizing and exact pointing,
In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens.
I think it is possible to write scaling library in javascript, using svg/canvas or even plain div.
Otherewise points will jump on image scaling.

To make these lines and place them at exact position:
The easiest is to use canvas or svg. Here are a few links to do that.
Drawing lines on html page
Drawing arrows on an HTML page to visualize semantic links between textual spans
Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.
Animate lines on scrolling
A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images.
As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.

Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.

The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.
JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.

You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.
Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.
More of SVG animation here
I have used this approach and its quite cool looking, hope this helps

I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.
But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.

Achieving Horizontal Movement and Zoom UI Effect - possible jQuery plugin(?)

My inspiration is http://www.diesel.com/bags-female. Can anyone explain how I can achieve this effect?
I have started with this code:
$(document).ready(function(){
$('#background-thing').mousemove(function(e){
var mousePos = (e.pageX/$(window).width())*100;
$('#background-thing').css('backgroundPosition', mousePos+'% 0');
//alert(mousePos);
});
});
But it only pans the background image. I wish to have multiple links over the background image which are anchors and clicking on those images will make a zoom effect on that particular coordinate.
Should I rather look at a jQuery plugin? If so, what are your recommendations?

I've used skrollr in the past for quick implementations and it's served me quite well.
Here are some links:
https://github.com/Prinzhorn/skrollr
http://prinzhorn.github.io/skrollr/
Hope that helps, good luck!

I don't think you want or need any Jquery plugin for what you're doing.
That page you provided for reference uses css 3d transforms and default Jquery.
Here's the reference for that on W3schools: http://www.w3schools.com/css/css3_3dtransforms.asp
Specifically something like:
//clearly broken code used just for example
$(document).ready(function(){
$('#yourpagecontainer').on("click","a",function(){
$(this).css("transform", "scale3d("+x+","+y+","+z+")");
}
}
The code you've provided doesn't make it clear what exactly you have to far, but maybe you'd benefit from taking a look at this example: http://sarasoueidan.com/blog/windows8-animations/
It's not identical, but it is in the span of what you'd like to do.

I don't think your example strictly fits the definition of "parallax" like this site. I'm pretty sure you could achieve something similar to your example with:
Changing the CSS3 background size and position on click (as explain in this question and here).
Applying a partially transparent .png with a fully transparent "window" in the center over the entire window on click to achieve that same blurred/focus look. You can apply different filters on the partially transparent areas to get something more artistic looking. Inkscape does this quite well and it is free ;)
This is not a cross browser solution, however. Everybody say "Internet Explorer" (8 and below). For 9 and above make sure you have <!DOCTYPE html /> otherwise your CSS3 becomes CSSFAIL.
Fun project, enjoy :)

Spinning javascript menu

I would like to create a spinning menu akin to the one done in flash here. Are there any relevant links you know about to help with this endeavor?
Thank you kindly.

You can do it with a series of images and just swap them. Without getting into complexities of cross-browser canvas/svg that's probably the easiest way to do it.

You could use the <canvas> tag.

You could make a circular image map with the mouseovers, and then use css rotates with animation on the angle in something like jQuery so that the currently selected item is at the top. However, this would be limited in the amount of browsers that support it (mozilla and webkit). I think there is a similar thing in IE, but requires an ActiveX overlay