While watching Google IO17, I learnt about the double requestAnimationFrame method but i can't really wrap my head around it maybe because i hardly involve myself in animation on the web.
However, i think it would nice to know how it works and when to double things up as in the case of Twitter's tab example laid out by Addy Osmani. Thanks!
Because of the bug introduced in Chrome and some others, we have to use double requestAnimationFrame whenever we find ourselves toggling classes or performing other CSS animations that requires RAF to fire after an action is performed. It's kinda like an escape hatch to have nice/smooth animation.
I saw this mentioned in a Google I/O talk, too (by Owen Campbell-Moore). Here's the link to the video of that talk (in case it's different than the talk you watched:
"Creating UX that 'just feels right' with Progressive Web Apps"
https://youtu.be/mmq-KVeO-uU and a link to timestamp where the explanation of what a double RAF is: https://youtu.be/mmq-KVeO-uU?t=805
I did a little digging and found this explanation by Owen in a post on Medium:
"One weird trick to performant touch-response animations with React"
https://medium.com/#owencm/one-weird-trick-to-performant-touch-response-animations-with-react-9fe4a0838116
The article also points to a short follow-on discussion about whether/why the need for the "double" approach is a bug or not here:
https://medium.com/#owencm/well-there-are-definitely-issues-here-ordered-least-significant-to-most-1f0931b03024
Hope this helps...
Related
I am new to coding and wanted to get some hands on practice with a project I have in mind. Here it is:
Let's say you have blank page and on the side of a screen you have several items you can choose to draw on the blank page. For example the background can be mountains, the ocean, a forest etc. On top of that you can place a house, a church or another selectable element. Whatever you like.
It is like a picture editor where you can put together a picture with different pre-given elements. Or like in video games where you can create your own character.
What would I need to build a web application for that kind of thing?
This link should get you started but it won't be the complete answer to your question - http://www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/
Essentially, you can achieve your image dragging and dropping using similar techniques. It will require a bit of Spike work from yourself, and looking into how HTML5 can handle drag and drop. I discovered this resource fairly quickly and I think the solution you want isn't as complicated as you may think, it just requires a bit of know-how regarding drag and drop operations within HTML5 :-)
Also, there may already be some JavaScript based API's that do this sort of thing easier but I'm not too aware - I suppose starting this way could be a great introduction for you and you may wish to expand once you've done some work for it :-)
Hope this helps you and your coding journey!
three.js comes with many useful controls, which cause camera movement in response to keyboard and mouse input.
They are all at https://github.com/mrdoob/three.js/blob/master/examples/js/controls and accessed in the code as e.g.THREE.OrbitControls .
However, I can't find any documentation or comments that says what situation to use what control for or what they are intended to do.
Can anyone point me to this information, or do I have to analyze the code to figure out if, for example, I prefer FlyControls to FirstPersonControls?
The documentation for the controls does exist, but it was deleted from the repository here. Seems like a bizarre thing to do, but there is an explanation of sorts here. I guess the docs were very incomplete anyway and it was easier to delete them than to finish them. :-p
The source code for most of the controls contains pretty decent comments. I know this isnt as good as proper documentation but it really helps to get a handle on how to set up the controls
The Controls are named by their purpose or the idea they implement. OrbitControls allow you to orbit around some kind of object. Same for Trackball-Controls although the trackball-scheme implies that the camera will rotate around without the up-Axis staying as it was like in orbit-controls. Fly and FPS-Controls are self-explanatory.
Just try the examples and you will see what the difference is. No need to analyse code. Just depends on what you want to achieve.
I have been scouring the web to try to find the "perfect" technique for this. Is there something I have missed that solves CSS on/off, unnecessary markup, and does not need a hack with older IE (I know that is pushing it)? I mainly want to replace a header logo. Thanks for the help!
The technique used in HTML5 Boilerplate is solid. Specifically:
http://html5boilerplate.com/docs/The-style/#ir
If you have a specific class on the element that need to be replaced, you can use this method:
http://www.audenaerde.org/csstricks.html#imagereplacecss
Works in all the browsers since IE6.
I'm attempting to implement a similar animated "sliding panels" effect as the Aveda website.
I'm a little overwhelmed by all the options and Javascript libraries that are available. And a little confused after examining the Aveda website code.
Any recommendations as to how to approach this task please? Which Javascript/Effects library would be most suitable? I don't have any allegiance or greater experience in one library over the other.
My requirements are:
Cross-browser compatibility (of course)
Simple & Elegant implementation
Don't want to re-invent the wheel
Ability to animate and to be activated by mouse-clicks (like the Aveda front page)
Dynamic (don't want to have to modify javascript as more 'panels' are added)
My first impressions would be to use Scriptaculous - Effect.Move, but I'm aware that there are ready-made implementations like Spry's.
Any words of wisdom and suggestions would be greatly appreciated by this Javascript newbie.
Prembo.
I like http://www.davidmassiani.com/horinaja/
It can use the mousewheel aswell as the links to scroll between panes, and it's available for script.aculo.us and jQuery.
I would recommend the latter as it is lightweight and easy to learn/handle.
http://jqueryfordesigners.com/coda-slider-effect/ is a good tutorial for this using jQuery.
I do like the way Aveda implemented that effect. They are using prototype/scriptaculous, and it is a custom implementation.
The Aveda effect is called a carousel. The Aveda carousel scrolls to the next element on a timer and has a nice non-linear transition.
+1 to Deefjuh, I think that Horinaja would do what you want and be easiest to implement.
If you want more of a challenge, I've used PrototypeUI ( http://www.prototype-ui.com/ ) Carousel to do a series carousels for project (e.g. http://teacher.scholastic.com/products/classmags.asp ) But the dot indicator controls had to be custom programmed.
See here: http://code.google.com/p/ie7-js/
Does anyone have any experience or remarks about this javascript? Is it worth including? Do you recommend it?
I know many people, myself included that are using various IE hacks to get transparent PNG support. THis looks like a little bit more help, and as long as it works, and the size is fairly small, I wouldn't see much against using it.
I've used it before, and my results are mixed. Those scripts cause IE to churn for a bit on page load. Basically, you have to think of it as iterating through Elements and stylesheet rules to apply "fixes" for areas that are deficient in that particular rendering engine. In some cases, depending on how complicated your markup or stylesheets are, that can take a bit of time and you will see the browser hang.
That said, if you can trade off that performance cost, you will save development time as you'll spend less time hacking around IE6 quirks; IE7/IE8 will provide enough missing functionality that you can avoid certain edge cases, can develop using standards better (min-width/min-height, multiple className selectors, etc.), and certain rendering issues will disappear.
However, if you just need 24-bit transparent PNG support, use a tool built for that. Including IE7/IE8.js for PNG support alone is like pounding in a nail with a tank. Use DD_belatedPNG for that.
It works, but its worth keeping in mind that ie7.js and ie8.js do much more than provide transparent PNG support. Even with the transparent PNG support, its worth keeping in mind that transparent background images cannot be tiled (repeated) using background-repeat or positioned using background-position. This hinders any ability to use CSS rollovers using background-position. I've only used it on one site I've done, and now that I'm updating the site I can't remove the ie8.js because if I do the entire website breaks layout in IE. I don't believe I'll be using it in the future, and instead rely on simple CSS hacks or simply allow my sites to "degrade gracefully" in IE6.
I know that there are some tools for fixing the transparent PNG problem which are more flexible than this. For instance, the jQuery plugin ifixpng2 will support background position, which ie7-js doesn't do.
As long as you are aware of exactly what it fixes, I would say go for it. I'm not sure about this lib exactly, but some libs get very expensive if you have a large DOM, as they tend to hook in HTC file base behaviors on EVERY DOM Element. This causes the dreaded "Loading x of y" status bar message to flash constantly on the initial load, and any newly generated DOM content.
well its beautiful and works grate way u can use cs3 features like li:hover. we did lost of project last time using ie8.js and it works great way.