I've got a question regarding animations with polymer. I want to make a custom element in polymer and have some default animations on it. In the past I would have used jQuery, but I would like to test the possibilities of the Material Design Library.
I have an element containing a date, whenever I click on it, it should transform and show details.
Here is a link to the animation I would like to get.
https://vid.me/yyFN
I'm sorry for the watermark, it was the first thing I fount to capture the screen.
What would be the best way to get this animation in a custom element on the Polymer Library?
Bart
Ps: This is my first question, please help me if this question is incorrect or not the way it should.
There is an element for that! it is called neon-animation, you can find it in the Polymer's Catalog :
neon-animations
neon animations provide pre-defined animations you can use in your web app, but first you need to understand the concept of web animation in the Polymer world.
There is no better tutorial than these three videos on animations done by Rob Dodson:
Behaviours
Slick Web Animations
neon-Animated Pages
Its recommended, no its vital you watch them in order
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
We are using Angular.js with Bootstrap, there is no jQuery in the project.
I want to use animate.css to fade in elements on the screen when scrolling up and down.
I have found the following example that demonstrates exactly what i need to achieve:
http://wrapbootstrap.com/preview/WB01649B4
How can i do this with Angular and animate.css, are there any tutorials on this or any help would be great.
Thanks
The animation itself can be done with only animate.css. If you want it to trigger when scrolling down however, you are going to need javascript or jQuery to let the browser know when to trigger the event.
A very easy library to use for this purpose is jquery-waypoint. It simply gives you a jquery hook when you reach a certain point in the browser. You can use that hook to start the animation.
http://imakewebthings.com/jquery-waypoints/
The site has a couple of examples on it and some good documentation. If you don't feel like using a library specially for that, there are some decent tutorials that do it without plugin.
Edit: a nice blogpost on creating your own, without an extra pluging: http://blog.templatemonster.com/2014/07/07/webpage-scrolling-animation-effects-css3-jquery/
i belive what you looking is WOW js, a library designed to trigger animations as soon as you scroll to the element, is Jquery and Non Jquery versions and it plays nice with Animate CSS you can delay the trigger if you need it for the elements
More Info and Download:
WOW JS WebSite
attempting to add a flash component slider to my as 3 class and I cant find any examples on the web. I am surprised at the number of funky home made sliders i am seeing. Maybe there is a problem with flash components and as 3? Could you leave a note if this is doable, and any rough direction you could provide. thnks!!
The examples in the AS3 docs should give you the information you need.
Reasons not to use the slider component:
It adds 32KB to the size of your SWF. Not a great option where file size is critical.
It's not that difficult to code a slider which may be more suitable to your needs.
I wouldn't be (haven't been) afraid to use the built-in slider component, though.
You do need to make sure the component is in your FLA library before compiling. Including the code in your AS will not do since I beleive Flash needs all of the visual elements present.
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.
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.