Jump to content

Search the Community

Showing results for tags 'Animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 18 results

  1. JoanaN

    CSS Animation

    Hi, I have these comic PNG images and I want to animate them using CSS. I want to rotate any resize them; how can I do that? Do you have any other animation ideas that work well with comic style? Thank you!
  2. Hello Everyone, I'm a beginner in CSS, HTML and Java Script/jQuery. I actually do not code, but i found a solutiuon for my problem with a simple CSS animation. I did not know, that the @keyframes animation still has some difficult stuff. I know they are hardcoded, but i need the help of jquery for dynamic change of the keyframes-selector. I have searched several threads for my problem. Some do sound similar to my, but i just can not apply it into my code, it does not work. I am trying to code dynamic keyframes with jquery. I got the following code below in a code snippet. It doe
  3. Hey, I´m looking for an easy scroll animation on my website. So when the user starts scrolling with the mousewheel it should autoscroll to the next ID. It should have a smooth animation and while scrolling, the user can´t interfere. It´s for the purpose that the website is always at certain points. Can some help me out? Thanks in advance =D
  4. I have been debating whether to use a canned framework or not (versus raw css) and am still on the fence. Twitter bootstrap seemed bloated to me when I tried it, so today I played around with w3's framework. It's nice, but I feel like I have ZERO control (or at least I can't control it....). The example framework I kicked around a while is this one: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio&stacked=h The thing I HATE is how the side menu pops up automatically when the window is enlarged. So I just spent literally two hours trying to figu
  5. I want to use a gif I made for my sprite (it would be nice if the gif only played when the character moved) So far, I have a rectangle with choppy character movements. (It would also be nice if I could make the character movement smoother. I watched tons of tutorials but I couldn't find anything that shows how to do what I want to do. Here is the code <!DOCTYPE html> <html> <head> <style type="text/css"> #backgroundColor { width: 100px; height: 100px; background-color: white;
  6. Hello, I'm new, I have realized an animation with Adobe Animate CC in HTML 5 canvas format and now I need help for a snippet code for start/play the animation when it is visible on the browser or vertical pixel and then I'll export it how .oam. the file example: AnimateBar Illustrator.fla thanks for help Illustrator_res.oam AnimateBar Illustrator.html
  7. Easy tutorial: HTML5 Canvas + pure JavaScript http://slicker.me/fractals/animate.htm
  8. My animation uses keyframes, starts on hover and has a long duration. When I move the mouse out while the animation is still running it stops instantly. I need the interrupted animation returns to it's original values gradually. (Like 'transform' does). @keyframes KF_Problem { 100% {transform:scale(2);} }.Problem:hover { animation:KF_Problem 3s; }.Problem { transform:scale(1); transition:3s;}.All_OK:hover { transform:scale(2); transition:3s;}.All_OK { transform:scale(1); transition:3s;} 1) How can I do that? 2) Why does Firefox "do the work" automatically and all other browsers
  9. Hi guys, So I set up a few boxes on a page and want a random one to disappear whenever any box is clicked on. I am a little rusty and was never that good at coding so this is just for fun/practice. My divs are set up as having id's square(1-18) My jquery code is: $(document).ready(function() { $("div").mouseenter(function() { $(this).animate({ height: '+=50px', width: '+=50px', fontSize: '+=100px'}); }); $("div").mouseleave(function() { $(this).animate({ height: '-=50px', width: '-=50px', fontSize: '-=1
  10. Hello, Let's say I have 2 <div>, one wiith id=A and one with id=B I want that, when hovering the mouse cursor to #A, the div #B performs an animation (let's say a transition). Is that possible with CSS? Thanks for reading, tomatoKetchup
  11. I'm trying to make this page working that has a vertical line of pictures (thumbnail-sized) which you can then click on to make them scroll to full width and show lots of text and happy stuff. I've already managed to do all that. However, if I click on one thumbnail, any open thumbnails are supposed to close. I've implemented an IF statement and class-checking for that: $("a#shins-rec1").clickToggle( function(){ if ($(".shins-rec").hasClass('done')) { $(".shins-rec").filter($(".done").not($(this))).animate({ left: $(".shins-rec").filter($(".done").not($(th
  12. http://goo.gl/H5mSy <- heres an example of what i want . If you notice when you hover the border slides from the left , is it possible to do this with css or javascript is needed? I found something like this so far but its not exactly the same .. http://jsfiddle.net/skram/dEK9A/4/
  13. Hello everyone, let's see if anyone can help me out. I'm creating a page with squares and rectangles div (windows 8 style) spaced from each other 4px. Each div has a title or a mini sentence. I would like: 1 - going with the mouse over the div, it shrinks slightly and changes color, all with a transition;2 - clicking on one div, this one must increase in the vertical and horizontal size because I need that, into the div will appear text boxes where you can enter data which will return a value;3 - when the div size increases, others div should always move in an orderly manner4 - clicking on ano
  14. I have a function witch triggers an series of animations, it uses CSS3 keyframe animations to render them. The weird problem i'm encountering is with my FadeOut animation, it doesn't happen. I have a animation called FadeIn that does the same (but in reverse) but doesn't have any problems running at all. The rotten apple: $"#id").animate("FadeOut", {duration:800, easing: 'ease-out'}).hide(); The working example: $("#id").animate("FadeIn", {duration:800, easing: 'ease-in'}).show(); The CSS3 animations: @-webkit-keyframes FadeOut { 0% { opacity:1;} 100% { opacity:0; }}@-webkit-keyframe
  15. Is it possible with HTML5 to make interactive animations? say if I press a link, then an animation will be played, will it work?
  16. Hi I have created an animation using sencha animator. In the animation I have several thumbnails that when I click on; it launches Shadowbox containing a video. My question is: Is it possible to pause my original animation when I click to open up the Shadowbox video iframe.............and then resume the animation when I close the Shadowbox iframe? I did a bit of reading up on this and the only thing I came accross was this<code>object.style.animationPlayState="paused"</code> But I don't know where to use it. I hope I have explained this without confusion. Thanks for your help Rega
  17. Hi folksI'm trying to initiate a click event (and subsequent image fade in) when a user clicks on a thumbnail. That in itself isn't such a problem. The problem lies in the fact that the thumbnails are contained in an array and are displayed with an append within an each loop (see code below). I've gotten halfway there, the code below does initiate a fade in when a thumbnail is clicked - however, it fades in all the images as opposed to just the one relating to the thumbnail that is clicked on. I know this is because by the time the #test append happened all the images have loaded so it just di
  18. I have a div animated by incremented margin-left when the user clicks a button. I would like to force the animation to stop at a specific margin-left value and callback a different animation. So if the user tries to click too far it prevents them from doing so. Suggestions? I'd like to do it with margin because it'd be easier to edit later, but if I have to use .position.left as a variable, I'll take the code for that just as well. Here's a wacky selector I tried, to no avail, if it helps convey my intention: $('.slidingDiv[style*=margin-left:80px]').stop().animate(.....); I didn't bind it to
  • Create New...