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.
Related
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
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
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.
What's the best, most robust CSS-button definition?
Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.
What's the best solution to this?
Use the tools at http://css-tricks.com/examples/ButtonMaker
It is possible to use gradients, box-shadow, border-radius, rgba colour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.
Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!
Huge fan of JQuery UI buttons. Demo is here
Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.
As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.
Setting up a button is as easy as: <button class="ui-state-default ui-corner-all" type="submit">Button</button>
There is no way to do what you're asking with CSS only, as gradients and corners were only added as of CSS3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, you can then be assured that most if not all browsers will support it (if you're using a .png image, IE6 may have an issue with it but there are CSS hacks to get around it).
Rounded corners can be added to the site in two different ways:
The first is via images and you would place these at the corners of the element giving the rounded appearance. What I've said before about .png images still applies here.
The second method is to use JavaScript. Most frameworks will have plugins designed with Web 2.0 features in mind. I recommend jQuery as it's easy to implement.
Out of the above two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.
I have a banner at the top of my website that is blue with a light radial gradient on the left side.
I want to have white text animated that scrolls up on the right side of the banner. I want it to fade in as it appears and then fade back out. I would like to do this without the use of Flash, and as little Java as possible. I can work my way through CSS and set up the layout, but I don't know how to code it so that the animation will work.
I'd also like the white text will be the titles and a very brief summary of recent blog posts for the site. (probably the RSS summary) I don't know if that's easy to code into it or if I'll need to hand code that every time I have a new blog post.
After some basic research I think what I'm looking for is HTML 5 canvas, but I'm not sure.
Update: 10/21/2015: The following answer required you to explicitly provide values such as 100em in order to achieve offsets. This is not ideal. Instead, you can translate the element.
Update
You can indeed do this today without flash or JavaScript. You can use the keyframes feature in modern browsers to move text in modern browsers. I took the liberty to work up a quick demo demonstrating the concept: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, and (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.
Essentially we set the initial starting-point of the animation to text-indent: 100% to set it out of view and to the right. Then we set the last frame to text-indent: -100%, or whatever is needed to hide the text (will vary depending on character-length).
Old Answer
You won't be able to do this without flash or Javascript. HTML is structure, while CSS is presentation. Neither of the two provide animation-capabilities. I would suggest you go a route that includes a small javascript framework like jQuery, as this can convert standard HTML into the animated effect that you desire.
I would encourage you to look into the Cycle Plugin for jQuery.
What you need is JavaScript rather than flash or java.
JQuery is ideal for this type of animation. It's a JavaScript library that simplifies writing such JavaScript functions. There are many plug-ins available for jQuery that give similar functionality to what you require - have a look at JQuery Marquee
You'll certainly need to use JavaScript, unless you want to use Flash. You cannot do it without a program.
Your best bet is to look into an animation library.
Scriptaculous can do everything you describe, but doing what you describe is not for a JavaScript beginner.