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
Related
So, basically I am trying to make an overlay for a website, like a sidebar, but I don't want the css of a website to interact with my HTML.
Up to now I tried to do that with the help of an iframe (in the foreground), but the user can't click through that.
The next thing I would try is to load the webpage into an iframe and my HTML as the actual website.
But I am certain that there is a more "clean" way to do what I am trying to do.
Well, the best approach to isolate styles, which is also suggested by the comments, is to just make use of the Shadow DOM to isolate styles. But of course, the simplest approach would have been to move the iframe out of the viewport and to just have an event handler on the parent window. If I remember correctly I had the event handler for the animation of the sidebar inside the Iframe itself which is why the event didn't propagate properly, and thinking back it's kinda obvious. But maybe this helps someone... 🙂
Like #Burhan suggested in the comments, here is a link to my repo with an example approach in vanilla Typescript using the Shadow DOM: https://github.com/grievouz/chrome-extension-sidebar-example.
And here is another one in Javascript using React and an Iframe: https://github.com/segmentio/chrome-sidebar.
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
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I am trying to program a website with multiple independent pages and I would like to use the slide transition effect between pages as it can be done with the jquery mobile Framework but WITHOUT using this one. My goal is to make a desktop web site and not a mobile app.
The fluidity and the speed of execution are my objectives. I saw that you can use the jQuery Easing plugin (version 1.3) but I'm not able to place this code for having a fluid transition effects between independent pages.
I intended to do this transition page effect with the TerrenceRyan.com solution but it doesn't work correctly.
I don't want to do a navigation with jquery anchor or hidden divs placed in a long one page, but many independent pages that arrive at their click sliding.
To give you an example of what I am trying to achieve, here are some links:
http://www.craigandkarl.com/
http://www.ultranoir.com/
If performance is key and you don't want to use jQuery maybe have a look at the new greensock javascript library
They have a test page which shows that it performs really well against other similar libraries:
speed test page
I have been using their AS2, AS3 engine for flash for many years now and if the JS version is nearly as good, then I'm sure it will be of use to you.
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.