I have a background image that is a speedometer.
I need to point the needle to the correct spot. It does not need to be animated, but I will have to take into consideration where the needle needs to point at in the half circle, based on the value (speed).
I am not looking for an answer, but for some help identifying some jquery libraries that will help me accomplish this.
GSAP (http://www.greensock.com/get-started-js/) is a great library - I know you're not wanting to animate it, but with the library, you get tonnes of transforming options all of which are miles ahead of standard jQuery and CSS3 properties.
In addition to affording you the ability to place your elements in unique positions, you can easily animate them should you ever desire to do so in the future.
As per the speed listening function;
Set an empty JS var (speed)
On key press (arrow key, for example), increase the speed var +1
Listen for changes in the speed var, then adjust up/down the speedometer needle.
Related
I am doing some positioning with translate during jQuery resize event and it would really come handy if translate weren't actually translateBy. It translates element by some amount. I've looked and haven't found the opposite functionality, translateTo.
Is there any tricks I can use to gain functionality similar to translate, but you specify the end position relative to container and not amount to translate?
I have a bunch of products on a page that have 200x200 images. My first run at this was to get the data for each pixel (nested for loop, one for x, one for y), then convert rgb to hex, and store them in an array and then get the most frequent one. This script needs to run on 96 items per page at a time.
Currently, it creates a canvas and puts the product image in that canvas and then performs the above operations.
Is there some kind of averaging algorithm that would make this faster?
Yes!
Lokesh Dhakar has created a script called "color thief" that calculates the dominant color of an image. It uses the modified median cut quantization algorithm (MCCQ) to quickly cluster colors and determine the dominant color (or even the whole color palette).
There is a demo here: http://lokeshdhakar.com/projects/color-thief/ and the script is available on github here: https://github.com/lokesh/color-thief
I know it sounds easy to use library and all, but i found a much simpler solution that pretty much serves the purpose.
When you apply a blur filter what it does is takes the average of pixel intensities. So if you apply a blur to the image with pretty high pixel value like
filter:blur(30px);
or
filter:blur(50px);
or anything that suits, it average outs the entire image and provides you with a solid background color which is most of time the prominent color from the image.
Its much simpler to do, and should work almost always. Just try tinkering with the blur amount.
Also remember to set overflow-y to be hidden because high blur causes white padding outside the image. hiding the overflow will fix that.
Hope that helps :)
I have one white line, behind a mask that is in the shape of my logo. And behind that a black background.
I want this line to duplicate once every 5 frames in a completely new 'position' and 'rotation' under the mask, until the whole thing becomes white with lines. I am a complete beginner to expressions and I don't even know exactly where to put the code. I think this is kind of what I am looking for:
seedRandom(1, true);
x=random(minvalue, maxvalue);
y=random(minvalue, maxvalue);
z=random(minvalue, maxvalue);
[x,y,z]
But this doesn't clone the line.
Any help would be great
Max
Unfortunately you cannot clone an object with an After Effects expression. I think you will probably want to add the random position/rotation expression to one layer, then duplicate that layer (command+d on Mac) many times, and then use an After Effects script like this one:
http://aescripts.com/pt_shiftlayers/
(Copy it to Adobe After Effects CS#/Scripts/ScriptUI Panels/, restart AE, and then open it from Window > Scripts > pt_shiftlayers.jsx or something like that).
It will offset your layers the number of frames you specify, 5 in your case. (The script is pay-what-you-want, so you can set the price to $0 and give it a try for free, or pay for it if you really appreciate the developer's work.)
If that doesn't suit your needs, you may be able to use a particle system plugin like Trapcode Particular or CC Particle World to generate a particle every 5 frames with no movement, random rotation, random position.
Let me know if this works for you.
I've put together some key frame animations in CSS which animate a div from one side of the screen to the other, applying a slight rotation along the way. I'm finding the key frame approach restrictive because I want to be able to have many variations that go into one big sequence. The variations could as an example be not just left to right, right to left but also up to down and so on. To add more complexity to the problem, I need to be able to shuffle up this sequence and retain continuity between each animation.
The sequence itself should be able to run in any order and reset.
For example if I want to move the div in 100px phases:
left (100px), up (100px), left (100px) and then down(100px)
the next time I might want the sequence as follows (again 100px):
left, down, right, up
My thinking is that this would be better achieved by using JavaScript to write the animations on the fly perhaps using something like the CSS3 Matrix. So far I've figured out the easy stuff like left and right but I can't figure out how to add in rotation. This seems like a really good starting point:
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Also been taking a look at this:
http://tweenjs.com/
My thoughts are, a) am I over-complicating this by taking the CSS Matrix approach? Is there something simpler? and b) How can I achieve rotation and movement at the same time using the CSS Matrix or any other approach?
Any help appreciated!
If you want to do dynamic animations, then you should be using JavaScript to animate.
As far as how to combine translation with rotation, the answer is right there in the useragentman post (which incidentally is a very good introduction to css matrixes.)
Take the angle of rotation (in radians) that you want to achieve and create the following matrix:
Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0, 0, 1
then create the following matrix for your (presumably 2D) movement in x and y.
0,0,X
0,0,Y
0,0,1
Then multiply them together (or take the dot product in matrix terminology). Here is a handy matrix multiplier for you, the details of how to create a dot product are also in the same post.
Note that these are transforms (not position changes) and transforms don't affect affect page position.
I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted.
I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas.
Alternatively, if anyone can explain the math behind -webkit-perspective, I can figure out the position as that's the only thing I'm not sure how to model.
Have you tried using getBoundingClientRect()?
I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.
The problem is, that the CSS3 transformations doesn't actually change the position of the elements in anyway. Of course the browsers "know" that they are repositioned, because it renders them, but this information is not provided back to the DOM/API.
The only thing I can think of, is to calculate the positions based on the transformations yourself, since these are "simple" matrix transformations.
Unfortunately Algebra class has been too long ago, that I can't tell you anymore how to do it - only that it is possible.
Using getBoundingClientRect is a good idea but will only give you the coordinates of the rectangle that contains your shape, not the exact coordinates of the 4 topleft, bottomright, bottomleft, topright corners.
You'd only be able to do this by taking each of those non-transformed coordinates and applying the transform via javascript.