I'm interested how are these backgrounds made:
http://www.studioup.it/
https://www.fbf8.com/
I tried searching Google, but i'm not sure how is this technique called. Search for 'animated background' did not give the results what i was hoping for.
Is this some shape drawing / animation or what? Or maybe it's background animation, but done very elegant and with good taste?
AFAIK there isn't any specific name for this technique
Just applying classes, change positioning based on scroll position.
More details here
http://css-tricks.com/fancy-scrolling-sites/
There's another similar effect called Parallax Scrolling which is quite popular as well.(except for a few exceptions, I hate it mostly)
Related
So I know that the question of how to make a radial menu has come up before and I am aware that some people have done absolutely amazing things already, but! I have to make one and I can't use anything more than css and js. The problem is, I have to implement the menu on the clients piece of crap drag and drop editor. It doesn't have anything fancy installed and isn't the most wonderful environment to work in.
To make matters worse, it has to be compatible back to IE8. I know. Trust me.
I was initially thinking of using a bunch of divs shaped as triangles layered over each other, but then I would have to cut off all of the tips poking out. Not sure how to do that.
Any ideas?
By the way, this is the triangle idea: http://imgur.com/YcWeOjE
I'm looking for a way to implement some animation on the background on a page when the user scrolls down a page. Think of ... maybe a divided sphere which get closer when the user scrolls down the page and get departed on a scroll up.
I thought of using SVG in combination of JS, but maybe some of you know better ways to implement that kind of stuff.
Maybe some of you already coded that kind of animation?
PS: I don't want to use Flash etc., just HTML5 and existing frameworks.
I found some frameworks, plugins that do exactly I was looking for and I don't want to hold them back. Here are the links:
Scrollorama
Scrolldeck, Parallax
Have a nice day! :)
Sy
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
I'm a newbie in html5/CSS3/jquery, and I'm making this (not finished yet):
http://catherinearnould.sio4.net/autres/kat/
The problem is that, because of the large canvas with particles, the animations are not as fluid as it could.
So if you're bored, don't hesitate to have a look at my code and give me some advice to improve the fluidity ^^
Many thanks!
For one using RequestAnimationFrame() instead of setTimeout() is likely to make things smoother. See Paul Irish his blog post requestAnimationFrame for smart animating.
The big performance hits are most likely caused by live calculated/rendered CSS attributes such as transparency, shadows and rounded corners.
Also be aware of that changes to DOM elements which cause reflow is costly (such as animations), see http://code.google.com/speed/articles/reflow.html.
I see a big difference just after running this:
$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});
If you can, replace all (semi-)transparent and rounded graphics with equivalent png images.
You could also think of using css3 transition for some of your animation and removing and adding new classes to the elements to changes their styles rather than doing it with javascript(jQuery). Use jQuery as a fallback for older-browsers and IE.
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
This gives the browser the power to do the rendering, and in some cases like in the iOS you can get hardware accelerated for the rendering.
For the canvas element, I have little experience with that, but I'm interested in that effect you're creating. But I think the massive canvas animation at the start is a bit much, there is so much going on already, maybe there is no need for that effect? Just my opinion as a user.
Under the iPod Touch, when I click on the blue button the image will be scrolled to the right/left according to the image.
What is this technique called and is it achievable using pure HTML5?
It's just another style of carosel/image gallery design. This is usually done with jQuery. And honestly you can find pre-built templates almost all around the web for this stuff. I have added a couple links below. If you have time check them out and post back with questions.
Coin Slider
Nivo Slider
Presentation Cycle
BXSlider
I'm not sure about only HTML 5, but through CSS3's target pseudo class ( http://www.w3.org/TR/css3-selectors/#target-pseudo ) you can allow users to scroll through images.
The problem with this is, of course, that without JavaScript the functionality is lost in older browsers, and having it animate through the various images automatically (without a user selecting an image to drive the :target class) is going to be difficult at best.
Paul Hayes' CSS3 modal window ( http://www.paulrhayes.com/2011-03/css-modal/ ) explains a lot of these issues, and gives you a lot of the theory behind how one might implement a slider through CSS3.
In the end though, unless you're trying to do a proof of concept, or something that shows the world how cool CSS3 can be, you're better off with one of the JavaScript solutions that Jake has linked — they'll work in the real world.