So I was wondering if it was possible to animate a few single, white pixels to streak across the screen of a homepage I am building. I am a complete novice with css animations.
Basically I would love to have a few random pixels simply fly across the screen every few seconds. Is this even possible? Obviously I would have to play with the z-index to make sure they don't mess with the rest of the site.
Thanks in advance!
Kerr
I made a sample of a rotating "pixel".
JS Bin
var x=0;
$(document).ready(function(){
setInterval(function(){
$('#pixel').css({'transform' : 'rotate('+ x + 'deg)'});
x+=5;
}, 100);
});
Just to get you started. Change the pixel size and the transformation type to get the desired effect. If you want to get really fancy you can add a randomizer on the timer.
I didn't want to do it for you, just point you in the right direction. ;)
Related
It is the first time I have ever used image slider on a website, what should I do to make my images not look stretched out?
The problem is not with my slider code, my question is if this is even possible to my images look great with this kind of height/width ratio (I have tried scaling images with Sketch already and this is the best result I have gotten so far)? I also don't want to add more height to the slider since I think slider shouldn't take up that much space.
Here is the website for reference: http://sanbruno.herokuapp.com/
People who have worked a lot with sliders- what should I do to make it look great?
So let's make some calculations - as I can see at webpage you're using 2000x600px size images, what's gives us 20/6 scale = 3.(3). So for 4256px width (if you want to use it all) you should have 1276px height (4256 / 3.(3) = 1276px). So if you crop 1276px width from you original image it won't be stretched out.
i am currently trying to integrate a responsive map on my website, which i built with WIX code.
I am basically starting off with the code provided by Here maps to create an interactive map (https://developer.here.com/api-explorer/maps-js/v3.0/maps/map-at-specified-location).
I integrated the code into the html iframe and it works without any problems. But as soon as i want to define the height (for responsive matters), the map vanishes and will only return if i type in the div height in px.
I am not that much of a talent when it comes to coding but i am trying really hard to get this stuff done.
Best regards,
Daud
If you want the map to resize accordingly to container or window resize, make sure to have a handler for this:
// Window resize handler
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
Note: The variable map refers to your initialized HERE map object, normally to be found where the line new H.Map(...) is called.
UPDATE:
I just found a piece of sytle.css within Here Maps that helped me out with the responive div. It seems as long as there is a certain px number added to the div, the content may only be partial responsive. Obviously somehow but still complicated...
Thanks for your interest and help, guys!
I've been trying to recreate the random snow/star effect that's on this website , but I've had no luck..
I'm assuming this needs to be done in CSS, is there anyone who can help me write the code?
Thanks in advance!
Samoht
you have nothing show, but here is a short description
To create this effect, we’ll need three different “snow” graphics. These are transparent images of varying degrees of size and focus. We’ll overlay these three graphics on top of one another for a bit of depth.
Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.
Next, let’s create the keyframe. This is necessary to animate the background images as shown in the example down. If you’re read any of my posts before, you’re probably familiar with CSS Keyframes by now.
Our “snow” keyframe is slowly moving each background image independently of one another at different paces to create the awesome effect of snow falling.
You can change the speed or direction by modifying the background positions in the keyframe at 100%.
Demo w src: jsfiddle.net/orLgtgao/
I use QPainter and the function drawImage to draw an airplane on a map. The image and redrawn each time the position of the airplane changes. The problem is, after some time, the image becomes extremely pixelated. I have tried to use a high quality .svg and that did not help either.
Below is my code. Can somebody spot where the error is or what has caused the image to be so pixelated?
// Load .svg image
airplane->load("AirplaneTopDown.svg");
// Downsize image
airplaneSmall = airplane->scaled(120, 120,Qt::KeepAspectRatio);
// Rotate image by trans
airplaneSmall = airplaneSmall.transformed(trans);
// Draw image and center at a certain screen position
painter.drawImage(airplaneX-airplaneSmall.width()/2,airplaneY-airplaneSmall.height()/2,airplaneSmall);
Below are the images of the drawn airplanes. One taken as screenshot at the beginning of the program runtime another one taken after a couple of minutes.
Airplane
Airplane-pixelated
One of your problems is that you first rescale the image and then rotate it.
The rotation needs to interpolate new pixels from the old ones. The higher the resolution of the input, the better the quality of the interpolation. The quality of your SVG is completely lost after the rescale operation.
The second problem you are facing is that you use the "fast" (default) transformation method. This method does not antialias. So instead of interpolating from several input pixels, it will only take one best fit. Calling transformed() with the second argument Qt::SmoothTransformation and scaled() with the sceond argument Qt::SmoothTransformation |Qt::KeepAspectRatio` will greatly improve your results.
However it is also slower, as is performing the rotation on the image in its original, higher resolution.
The arguably best solution to your problem is to take on a different approach. Instead of loading the SVG into a QImage, which is a raster-based image, you should work with the vector graphics. So the SVG is rendered in the right orientation and scale in the first place. A good starting point is the SVG Viewer Example: http://doc.qt.io/qt-5/qtsvg-svgviewer-example.html
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.