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)
Related
Are there more than brush and opacity settings for a stylus in photoshop?
I recently hooked up a Huion 24" 4k display tablet to run with photoshop on my Windows PC. Works great so far but when adjusting values in the toolbars using the slider, the values have large steps. When i use the mouse it is normal. the steps are increments of one with the mouse but huge when using the stylus. It also varies depending on the toolbar slider. for example the
Clone Source toolbar (under the Window dropdown) when adjusting the values with the stylus the smallest % increment i can do is %80. so if i slide it all the way to 1 then move the slider over the next number is %81 then 161 and so on in increments of 80. Another toolbar, the brush angle, slides at %7 increments using the stylus and single digit increments when using the mouse.
I dont see it being a sensitivity or resolution issue as the steps are consistent within the slider but different depending on the slider. Anyone got any ideas?
Thanks in advance
Well, I was behind on one update for photoshop. updated and I am no longer having the issue.
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'm having several buttons that I want to get darker when user hovers over. Which method is better (faster, more efficient, more safe in terms of browser compatibility):
Create 2 separate .png images, one normal one _hover
Use transition:opacity css property.
Images are small, each approx. 600 bytes big (20x20 pxl), but having approximately 30 of them makes me wonder which method is better in terms of speed efficiency and older browsers support (but not to the point trying to please IE6 either)
if opacity is doing your job of darkening the image- Use it.
You said darkening image? so i assume u start with lower opacity value and chage to something higher.opacity is more like transparency of the pic-dosent darken it.
If opacity is not giving the desired results you can use hover change of image-use image sprites this way you dont have to request for 60 svg's(30 svgs considering you use a combination of 2 pics instead of one)
LINK for sprites.
I suggest using SVG filter gives you better image effects-Browser support
This is an amazing effect like PPT. Link is here :
http://udc.weibo.com/builder2011/data.html
I know single part was made by css3-animation effects but I don't know
1.how to play all these effects in a timeline?
2.how to make position change and local to whole effect?
Where can I find a tutorial like this?
Thanks cordially.
You could actually make the whole thing out of CSS3.
Keyframes is how you'd be able to time the different functions: http://www.leemunroe.com/css3-animations/
You would need something like an entire CSS3 powered page page, and then just place a window over that with overflow hidden. Use keyframe to move the page around but the window will only show a portion of it.
Just realized, that actually happens to be exactly what they did.
I'm building an interactive website for a touchscreen, which runs the latest version of Google Chrome. The user has to tap on, in this case, a series of buildings to get more information about it. The idea is to absolute position hyperlinks and place them on top of the buildings, which are combined in a single background image. But as you can see below, the problem is that some hyperlinks overlap. The chance that the user taps on the wrong building without knowing, is quite large.
Because I already have the vector masks of each building, I thought it would be a good idea to not use hyperlinks, but use SVG files instead. SVG files support a tag called xlink, which you can use to make a vector object linkable. The clickable area which links to another file is not a square anymore, but has the same shape as the vector mask. So just like I did with the hyperlinks, I placed them on top of the buildings. This works fine in Firefox, but not in Chrome nor Safari! Apparently there's a bug in Webkit (bugs.webkit.org/show_bug.cgi?id=22986) which causes the browser to always show a white background and which neglects the shape of the vector object, so it's rendered as a square object.
Screenshot: Overlapping hyperlinks and Webkti SVG Bug
Normally the opacity of the SVG embed would be set to zero, but to show you what's going wrong I've set it to 1.
Using Firefox instead is not an option. And the area-tag in HTML takes too much time. So I'm stuck. Does anyone know another solution for this particular problem?
You need to transform masks to <path>s
Create <a><path/></a> after all svg code (strict condition for Safari!)
Set <path>s opacity and fill-opacity to 0
Don't forget <a> target attribute