I'm curious if it's possible (either with canvas or with CSS) to place a mask over a JPG or PNG to make some part of it transparent. Specifically, I want to define a circle over the image, and for the pixels within that circle to stay opaque, but for all the other parts of the image to become transparent.
I'm Java this is a fairly straight forward operation, but I'm not finding any analog in Javascript and am wondering if this is simply not possible.
TIA
Just check this -webkit-mask tutorial from css tricks.
CSS
.circle-mask {
-webkit-mask-box-image: url(mask.png);
}
RESULT
Related links:
CSS3 -webkit-mask property.
Using an Image as a Mask
-webkit-mask-image
You can also use the mask tag from SVG, to actually place images of circles with different gradients, do tell if this helps?
You can use SVG filters to create something like a »blend mode«. You can use i.e. Inkscape to compose these effects. If you become familiar with the syntax you can create a lot of effects. Perhaps you can post an image of the desired effect, than it should be more easy to see what can be done. There are also some js libraries to make certain effects with images.
Related
How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals
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.
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
For a current project I am trying to break up a png, apply filter effects, and then scale and move the pieces.
Jus picture an explosion but in reverse:)
I know I should use the Canvas element.
And that using a third party javascript library would make most sense.
Can anyone recommend any Canvas tutorials that do something similar?
Which 3rd party .js libraries(if any) would you use to achieve this?
Any help most appreciated!
The comment by #kirilloid is valid, but if you want to do complex visual effects on your pngs, you should use the canvas element.
Here is an amazing tutorial for canvas: http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
Forgive me my ignorance but I am very new to the HTML 5 arena and never worked with graphics using Javascript.
I was doing some reading and came across the Canvas tag and the source stated that the canvas tag acts as a graphics container and is used to render graphics on the webpage by the use of Javascript.
My questions is, why would I need to use Canvas as a placeholder to render graphics instead of using some other arbitrary tag that can be used as a graphics placeholder for example?
A <canvas> tag is exactly like an <img> tag, with the difference that instead of loading the image from the network you can draw it yourself with javascript code.
You can draw lines, circles, filled polygons, gradients and matrix-transformed pictures. You can also redraw the canvas content in a loop to make an animation.
To see what you can do with a plain canvas 2d (no webgl, just standard 2d rendering) take a look at this small demo or look at this video if your browser is too old and doesn't support canvas.
It's pure javascript, nothing loaded from the network, everything is computed in the browser, including the texture and the raytraced image used for envmapping part. All in a single 4Kb html file.
Do you really think you can do the same using regular <div>s ?
EDIT:
For a much simpler demo with a readable source you can check out this rotating icosahedron.
Canvas is intended for graphics manipulation, whereas div isn't. Semantically, you should be using Canvas.
You can't draw on arbitrary elements.
Canvas allows you to manipulate pixels with acceptable speed. You can draw various shapes, set colors for pixels etc. With div you can only render standard HTML elements.
DIV is a container for other tags. CANVAS is a container for pixels.
Whilst it is (probably) possible to do everything you want to do drawing-wise inside a plain DIV, with CANVAS the browser knows semantically that the area is going to contain graphics and can use that information accordingly.
Browsers support a variety of drawing routines for CANVAS natively, whereas you'd have to cook your own entirely in JS for DIV.
A really good resource for information on the HTML5 canvas is http://diveintohtml5.ep.io/canvas.html
Why use canvas:
1- canvas is secure to use and compatible with multi platform.
2- it have a lot of ready function to use in animation.
3- you can play with speed, pixels, colors.
4- you can save result of canvas as image.
5- you can implement professionally games with canvas. check here
simply it is act like flash but with no plug-ins.
usefaul libraries to use:
- easel js: flash like library
- processing js : open souece animation library
Drawing using
<canvas>
Will load straight away when entering a webpage with this in use, where an
<img>
Will take much longer.