I have three images placed side by side .I want that they continuously keep fading in and out to 50% of their opacity one after another. Only one image is visible at opacity =100% at atime
the process needs to be automatic after page load. I have tried for hours but with no result.any help would be appreciated.
You can use my jQuery plugin.It does the same.
https://github.com/raynesax/Super-Slider
Related
I'd like to see if it's possible to animate the input[type="range"] element for example for short audio files so the progress seems less 'stuttery'
Here's a codepen with a short audio file that I've been using to try to come up with solutions
This question is specifically for input[type="range"], I do not want to use custom elements to build animated progress bars, I know that is possible but for this particular use case I'm stuck with the range element.
Any ideas?
As the input handle is a browser element it can not be animated. You would have to build a slider similar to the jQuerUI one and then animate the handle by updating its position on the range change input.
If you have longer audio files this will not happen (about 1s of audio per pixel)
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/
Is it possible to make an single image change based on where your mouse is positioned on the image?
If so, how I would I accomplish something like this?
Theres a concept of z-index which basically means that how the images are aligned in vertical space..You can stack all the imagesone above the other with only the topmost being visible..Then depending upon where the user is you can change the layering of the images on the fly.. But without any code its a bit difficult to know where are you stuck/what have you tried?
am using the anythingSlider wordpress plugin
does any one know how to fade the images on top of each other as at the moment it fades them to nothing.
If you mean to "cross-fade" images from one to the next, AnythingSlider isn't currently set up to do that. Mostly because the images are floating left from each other.
I guess I could work on modifying the code to allow true cross-fading, but for now this demo shows what is currently possible - fade out to black and fade in from black.
You might also consider trying out PlusSlider which is similar to AnythingSlider but does have a true image cross-fade functionality.
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.