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
Related
I have recently started to see websites with full size, full width background images, and when you scroll down there comes a section with some content and then a different background. and that scrolls with the page. I am sure if you have seen it you know what I am talking about.
How do you call this technique? Is there a name for it? I would like to look for a tutorial on this, but I don't know what to look for.
Thanks!
I think u are looking for Parallax Scrolling Website.
There are many tutorials for doing that easily.
A simple example for that is given here.
Moe can be found-
http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
If u like to implement Parallax with Twitter Bootstrap, then this tutorial is for u-
https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling
Think u have your complete answer.
Are you perhaps looking for Parallax? There are many resources online with instructions about it, hopefully knowing the term will get you there.
Here's a simple demo with pure CSS Parallax, but you could also check out Awwwards for some inspiration.
The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.
You can check the link below for more information, tips and some downsides as well.
See More
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)
I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
Bit of background
I've been producing a Flash-driven webcomic for three years now, incorporating some basic animation, a synced soundtrack and zoom-drag page viewing. The recent Flash-bashing, my desire to reach iHandhelds and my preference for open versus proprietary means that I want to make the move to HTML5 techniques this year. In the long-term, I think the writing's on the wall for Adobe's product, and I'm not entirely convinced that's a bad thing.
I'm relatively comfortably with both CSS and HTML, having worked a little in web design before. However, JavaScript is a foreign country to me, and I simply wanted to get some advice as to
whether what I want to achieve can be accomplished consistently across all browsers and
what the best techniques/approaches to the problem would be.
Any advice, even general principles, are very welcome. I've already sought out several HTML5 tutorials and introductions, which lead me to believe that the canvas element will be foundational to my plan; however while all the individual problems I face have been answered by many blogposts and guides, combining the various solutions into a single entity is something I'm not currently able to figure out, as I'm not certain of the limitations of the new HTML5 tags, or of best practice.
If I'm successful in achieving what I'm after, I'm going to post the full code online with an explanation of all the elements. Webcomics might not be a huge domain, but having a resource that did this would have made my life a lot easier - hopefully it'll help someone else in a similar position.
What I'm after
Here's a diagram giving the basics of the design requirements. I'll explain the elements, and the desired extras, below.
(Perhaps the simplest way to demonstrate what I'm after would be for interested folks head over to my website and see how my comic currently works. This isn't a plug - it would simply give the quickest insight.)
At core, I'm after a viewer that will:
display text (SVG image) in a canvas element above an raster image the page's panel art
both images should be zoom-and-draggable in sync but should ideally fade in separately, with the raster image coming first, followed by the SVG image
I'm guessing that the best way to accomplish this would be to layer two canvas elements one above the other using z-index, with the SVG file in the uppermost element. These could then be nested, as in the diagram, within a div element that would carry the zoom-drag function. Is this a reasonable approach, or are there more efficient options?
The next and previous buttons are self-explanatory. Would it best to have each page (bearing in mind some will involve animation and music) on a separate page, or to have all pages within a chapter on a single page, with the buttons making them visible progressively? I imagine this would have a great impact on loading speeds.
Finally, I'd like to have the viewer capable of displaying fullscreen if the reader desires. I imagine this could be accomplished by using Javascript to make the canvas elements and their surrounding div switch between different CSS giving a px-defined size and 100% height and width. Is this a good approach? Is it possible to apply the size change to the div element only and have the canvas elements automatically follow suit, possibly by defining their size via % in CSS?
Desired extras
At various points in the comic I make use of basic animation techniques - simple movements of layered raster images across the viewing pane. This would be simple to accomplish, I imagine, using Javascript; am I correct in thinking that applying overflow:hidden to the wrapping div will prevent images larger than the viewing area from spilling outside the viewer area?
I also want to synchronise audio with some of these animations. I understand that synchronising canvas events with the audio would be the best way to do this on, permitting both to begin activity only upon page loading or next button click.
That's about everything. As said, any advice at whatever level would be greatly appreciated, even if it's 'yes' or 'no' to the various questions I've asked. At root, it would also be good to know if HTML5 is the best option for what I'm after or whether (with gritted teeth) I should stick to Flash for now and go after handhelds using Adobe AIR.
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.