Round mask on an image growing from centre of that image - javascript

On a click of some button I need to show an image of a vinyl record. The image will appear somewhere next to the button and is a transparent png to make it look round.
The problem is it needs to be shown using a circle mask animating from a dot in the centre of the image and expanding to show the whole "record". How to create a rounded animated mask that will reveal the "record" image without zooming/rescaling the image.
Does anyone know a JavaScript or preferably jQuery library capable of something like that?
If you know of such a thing in a different language it might help me to write something of my own.
Thanks.

Perhaps you could create a large white (or background-colored) PNG with an alpha transparency hole in the center. Place this on top of the image to be revealed, then scale it up while keeping it pinned at its center point. Once it's scaled to the point where the entire underlying image is within the transparent hole, remove the covering image.
I have no idea how this would perform (probably badly!), but it's a thought.

HTML comes in rectangles as a rule, if you have an image with transparency, then you can scale it, keeping it's centre constant.
If you need it to be selectable only within the circle, then you will need to check the mouse coordinate for click operations to see if it is within the circle, within it's containing rectangle. See: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery
#6bytes suggested using rounded corners.
Chrome and FireFox currently surround round-corners via the border-radius and -moz-border-radius CSS attributes, so you can achieve a circle visually with 50% border radius. However, this is only a visual difference on an underlying rectangle, clicks within the rectangle still count as being on the circle itself.
#circle {
-moz-border-radius: 50%;
border-radius: 50%;
}
Basic Rectangle Demo: http://jsfiddle.net/rL4BU/2/
You can put some code in to check if clicks are within the circle to fix this.
Circle Clicks Demo: http://jsfiddle.net/rL4BU/4/

Related

HTML5 canvas draw custom cursor

I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas.
Of course I would not like to paint over the image while the user is just moving the mouse.
My ideas how I could do this:
I could somehow backup the original image and paint it all over every time
I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.
What would be the best to do this?
Update
Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.
Checkmark+1 to PitaJ and David Starkey--they are correct.
The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.
But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)
Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.
CSS3:
#canvas1 {
cursor: url(./myCursor.cur), none;
}

Animated pop-up like on wunderlist.com

I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.

Javascript - How to create an image using canvas based on pixel colors on the site?

I have a site where it has div tags with background colors, and I use relative positioning to move them all together so it looks like an image. I moved them so its exactly on the top left of the page.
How do I create an image out of it, so like if there was a button, when it gets clicked, it creates an image of width 608px and height 105px, and then asks the user if they want to save it or open it or close it (standard download box)?
I would need to get the pixel color starting from index (0,0) right?
Instead of using background images on divs, just draw images onto a canvas. Then take a look at this http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Rollover image hides the element below from mouse. How to fix?

Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid
I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?

Creating mosaic/tiled image effect with jquery

Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]
It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :D
edit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D
Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.

Categories