I'm working in my new portfolio, and I want to do a effect like this, in the site:
http://nizoapp.com/
The effect of the iPhone and parts appearing from the sides when we scroll. It's a kind of parallax scrolling.
I tried to search how to do but I can't find. So I "stole" the code saving the page and adapting the code but seems to have many unnecessary things.
Someone know how can I do this?
Parallax: the apparent displacement of an observed object due to a change in the position of the observer.
Parallax is one particular scroll effect, simulating depth with relative scrolling, for example.
If you're interested in scroll effects more generally, then a simple search yields many plugins and round-ups.
The image here shows how the idea works, according to me. The basic idea is that all the elements that move have some distance from a central/non-motile element. As you scroll more, their distance from the this central element reduces - inverse proportion. In the image here, elements are marked with circles and a name given to them (only one moving element given for simplicity, others too can be added). The details follow.
The central element here is called 'A' and the moving one - 'C'. The variables used here:
D => distance of moving element from A
k => any constant > 1 (experiment for good results)
y => distance scrolled (document.body.scrollTop)
dy => vertical distance between A, C
dx => horizontal dist bet. A and C
theta => (predermined) angle between A, C
There's an angle between C and A which depends upon you - set it to any number (radians is the preferable unit). Now, as y increases, D decreases. So, D is given by the relation/formula shown in the figure. Every time you scroll down/up, D is recalculated. From that, dy, dx are calculated and are set as the top, left properties of css for C (which is absolutely positioned). In case you're wondering how to find dy, dx, here's how to do that.
dy = Math.sin(theta) * D
dx = Math.cos(theta) * D
I hope I've given the idea. I could've given the full code, but I wanted you to do something...If you want further help, ask that in comments...:)
basically it uses scroll event, and then on certain points it animates the boxes.
Related
So I am trying to make a website in which I can place these NATO units on a map. It's all been going well so far until I started to work on the zoom function. The goal is to zoom the map canvas by a constant factor of either 2 or 0.5 and all of the units would retain their center position in relation to the map. However, these units will all remain the same size due to the inability to see small units.
I am currently having difficulties understanding why the zoom doesn't currently work. A quick run through the website reveals some major flaws. I suspect it has to do something with these two lines, lines 177 and 178 of the zoom(level) function in draw.js:
draggableElementsA[i].style.top = (draggableElementsA[i].getBoundingClientRect().top + (draggableElementsA[i].getBoundingClientRect().height / 2) - c1) * level - (draggableElementsA[i].getBoundingClientRect().height / 2) + canvas.getBoundingClientRect().top + "px";
draggableElementsA[i].style.left = (draggableElementsA[i].getBoundingClientRect().left + (draggableElementsA[i].getBoundingClientRect().width / 2) - c2) * level - (draggableElementsA[i].getBoundingClientRect().width / 2) + canvas.getBoundingClientRect().left + "px";
The context should be made clear on the actual file. This function performs an odd operation: it moves the units off the screen, far greater than any of the individual measurements. Any help is greatly appreciated!
I believe the issue arises when scrolling while in the zoomed state. Specifically, zooming in, moving an object, and unzooming results in the item being offset.
When recording the XY coordinates, specifically in these two lines:
pos3 = parseInt(e.clientX);
pos4 = parseInt(e.clientY);
record the position relative to the top of the game board, not simply the position of the mouse cursor on the screen.
I am referring an svg animation given in below link
https://codepen.io/thinkdesign/pen/JybJOq
I am not able to understand how the recursion works here
var offset = 0;
var animation = function() {
offset -= 100;
pattern.animate({ x: offset }, 500, mina.ease, animation);
};
here we are changing x axis on each function call , so the x axis should go beyond screen at some point. Please help me understanding how this works
Nothing is moving across the page here. The x that is being moved here is the pattern's X offset. An SVG <pattern> is a fill that consists of a "tile" that is repeated infinitely in every direction. The <pattern> has an x and y attribute that tells the browser where to start the tiling from. Animating the pattern's x offset has the effect of making it look like the tile is continuously moving across your object.
Picture a rectangular window lying on a tiled floor. If you slide that window across the floor, it looks to you like the tile pattern moves through the window.
I have created one example to draw a LineSegment in three.js. I have applied vertexColors to its material and pushed color for vertices. Now when I hover on all the different pieces of the LineSegment I change the color of that vertex (along with the next or previous vertex depending on the order it got pushed in the geometry.vertices array so that a line gets its color changed, you will understand once you see the code) that gets picked by the raycaster.
The jsfiddle link is here. https://jsfiddle.net/sounakgarai/tedmc2f0/3/
Now the issue is that the hovering is not accurate; a piece of the Linesegment gets its color changed even when the mouse cursor is in a far distance from it (you will be able to see it when you run it). I would like to see the accuracy in this case. The piece of LineSegment should change the color when the mouse cursor is accurately on it.
Is this achievable?
You don't take in count, that your container is not at the [0, 0] position on the screen.
As an option, you can use .getBoundingClientRect() method to get the bounding rect of your container and then subtract it from the mouse coordinates you get in your listener.
var rect;
. . .
// in the listener
rect = myDiv.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
jsfiddle example
PS Just for your information, interface of jsfiddle.net has the Tidy button, which makes the code well-formed and thus much more readable.
browser.actions().dragAndDrop(elem, target).perform();
I can clearly understand the above code but I cannot get how to specify this element and target.
Take this example
browser.actions().dragAndDrop(slider,{x:100, y:0}).perform();
In the website in which I'm working on, I cannot find any x, y or anything I can match with that and develop.
So it will be helpful if someone explains with some example for x and y so that I can relate to it and make I work.
The dragAndDrop() has two ways to work.
One starts with the element to drag. Here elem works as normal ElementFinder, so something like dragAndDrop(element(by.css('div.my-class')), target).perform();.
Now the target works in two ways: Either as another ElementFinder like in elem or as coordinates to move, starting from the position of elem, moving x pixels horizontally and y pixels vertically (plus to the right or top, minus to the left or bottom). So {x:100, y:0} will move your slider 100 pixels to the right from the starting position.
dragAndDrop(element(by.css('div.my-class')), {x:100, y:0}).perform(); will therefore move the element(by.css('div.my-class')) 100 pixels to the right.
Manipulating the slider until the end, the circle that represents the star disappears or does a different motion. See: jsfiddle.net/NxNXJ/13 Unlike this: astro.unl.edu/naap/hr/animations/hrExplorer.html
Can you help me?? Thanks
When you supply a big luminosity, You're rendering a circle which is millions of pixels tall. The broswer might not render it because it's so big.
However, you are really only interested in a small slice of that big circle - namely, the bit that fits in your tiny window.
At some point, it doesn't make sense to increase the size of the circle, since you can't observe a change in the curvature of the circle - it just looks like a straight vertical line.
This apparent verticality occurs around when x^2 + y^2 = R^2, where R is the radius of the star, Y is half the height of your window, and x is R-1. Solve for R in terms of Y, and you get
function maximumNecessaryRadius(windowHeight){
y = windowHeight / 2;
maxRadius = (y*y - 1)/2;
return Math.round(maxRadius);
}
When resizing the star, check to make sure that its radius doesn't exceed the maximum necessary radius. Rendering it any larger than that is overkill.
Example Implementation