After loading the site creates a blur effect on the thumbnail images on the left side and I am trying to remove this blur effect.
I believe it is part of an javascript, but not sure.
http://www.portlandqueens.com/
How do I prevent the blur effect from happening to the images?
Related
I am trying to make a copy of the popular browser game Travian.com. I am currently working on the maps and I was able to get the farms overview image as a png.
What I am trying to accomplish with that map is:
Each element (farm) should be clickable) and redirect to that specific farm page.
As you could see on the map, farms are not just simple squares.
Once I had the farms.png picture, I used on online tool to convert a png into a .svg file. Using a free software, I was able to draw circles around each map to build my svg.
This is the result:
I recently read about canvas and I was wondering if canvas would be a better option in my case rather using svg?
You need to try it yourself and see if it gets redrawn quickly enough that the game is sufficiently responsive for you. If the map is very detailed, the redraw may be too slow and make your game feel slow. You really need to try it and see. If it's too slow for you, then you may need to either:
use bitmap images, or
keep the maps as SVGs, but render them to a Canvas on first load. This way they'll be sharp at whatever resolution screen the user has.
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
We need large screenshot of html which contains svg text with some effects. So we are zooming html in chrome and taking screenshots.
But svg filter effects get changed on html zooming. We need svg effects same in all scale.
Please refer attached screen shots.
Image with scale:
Image without scale:
feSpecularLighting is resolution dependent, you'd have to manipulate the kernelUnitLength property on each zoom step to cancel out the resolution dependency.
There are three basic ways to move a path in Raphael.
If that path has a fill image that has PNG transparency, and you need IE8 (VML), all three are flawed.
JSBin demo
If you use a simple transform...
path1.animate({transform: 't20,100'},1000);
...then in IE8, the png transparency in the fill breaks and translucent pixels turn black. Edges become pixelated and ugly, and depending on the image you might get a scuffy black outline around the translucent edge of the image. Not good, and there doesn't seem to be any reliable way to fix this after the event.
Sometimes, inconsistently, the background image also doesn't stay relative to the element (more on that below).
If you animate the path attribute, for example like this:
path2.animate({path: Raphael.transformPath( path2.attr('path'), 't100,20') },1000);
...IE8 doesn't wreck the image background. However, the fix for making background images relative to the element not the paper does not work with this method (and various ways I've tried to bodge it using improved background image offset with an additional "M-20,-20" element don't seem to work), and I can't find any way to make that work either.
Also, just having lots of transformations on the go can break the delicate IE8 bug the background image fix depends on in VML mode, causing the background to move. This seems to be inconsistent - with the JSBin above, in IE8, sometimes they all move, sometimes only the top one moves.
If you use translate...
path3.translate(42,42);
...the results are the same as transform (presumably both use the same translate functions).
With Raphael image elements, it's possible to fix this broken alpha by applying opacity with the transform in an attr or animate call. This doesn't work with path fills. Also, turning off the fill and resetting it from the original URL string doesn't remove the broken alpha contamination. You can see this in this demo.
So, I'm looking for a way to move a Raphael path that has a background image that has PNG transparency that a) keeps the image relative to the element, consistently and b) doesn't wreck the PNG transparency in IE8 by turning partial transparency into pixelated black.
Similar problems occur with any form of transformation - such as scale, rotate etc.
I can't find any good answer to this: the closest I've found is an ugly but functional workaround for IE8 transform (wrapped in if(Raphael.type=='VML')s so you don't spoil things for real browsers):
Before doing any transform to anything that has an alpha transparency PNG / pattern fill, remove the pattern fill (path.attr({fill:'none'});), storing the fill setting like path.data('fill',path.attr('fill'));
After the transform, asynchronously (e.g. wrapped in setTimeout(function(){ })) re-apply the fill e.g. path.attr({fill: path.data('fill')});
The crucial thing seems to be: the fill must not be applied when the transform occurs, else it'll be ruined forever, even if you remove and re-apply it. Be careful with the timing on this - it mustn't be possible for the fill to re-apply before the transform completes (e.g. watch out for race conditions with animations or other async processes).
If you're animating a transform, your options seem to be to either:
Clear the fill before the animation, just accept that there will be no fill while the animation takes place, and re-set in a callback after the animation completes
Implement your own animation handler than removes and re-applies the fill before and after every frame (this, of course, risks being a performance nightmare).
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: