Jump to content

Search the Community

Showing results for tags 'animation'.

More search options

  • 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 14 results

  1. 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; animation-name: backgroundChange; animation-duration: 45s; animation-iteration-count: infinite; } @keyframes backgroundChange { 0% {background-color: white;} 3.3% {background-color: #ffc5c5;} 6.6% {background-color: #f78a8a;} 10% {background-color: #f95d5d;} 13.3% {background-color: #f73737;} 16.6% {background-color: red;} 20% {background-color: #b70303;} 23.3% {background-color: #8c0202;} 26.6% {background-color: #5a0202;} 30% {background-color: #310101;} 33.3% {background-color: black;} 36.6% {background-color: #292929;} 40% {background-color: #3c3c3c;} 43.3% {background-color: #757575;} 46.6% {background-color: #d0d0d0;} 50% {background-color: white;} 53.3% {background-color: #ffc5c5;} 56.6% {background-color: #f78a8a;} 60% {background-color: #f95d5d;} 63.6% {background-color: #f73737;} 66.6% {background-color: red;} 70% {background-color: #b70303;} 73.3% {background-color: #8c0202;} 76.6% {background-color: #5a0202;} 80% {background-color: #310101;} 83% {background-color: black;} 86.6% {background-color: #292929;} 90% {background-color: #3c3c3c;} 93.3% {background-color: #757575;} 96% {background-color: #d0d0d0;} 100% {background-color: white;} } #canvas{ height: 540px; width: 6350px; position:absolute; top:50%; left:52%; transform: translate(-50%,-50%); box-shadow: 0 0 16px 2px rgba(0,0,0,0.4); background-color: #FFF; } </style> <title>Bermuda Triangle</title> </head> <body id="backgroundColor"> <img id="character" style="height: 40px; width: 40px;" src="https://piskel-imgstore-b.appspot.com/img/9478ea0f-79c8-11e8-b58c-67762e4a73c8.gif"> <canvas id='canvas' style="background-image:url(https://preview.ibb.co/fEanjo/realroom.jpg); height: 540px; width: 635px;"></canvas> <script> var canvas = document.querySelector('#canvas'); var context = canvas.getContext('2d'); var xPos = 0; var yPos= 0; context.rect(xPos, yPos, 40, 40); context.stroke(); function move(e) { //alert(e.keyCode); if(e.keyCode==83){ yPos+=10; } if(e.keyCode==87){ yPos-=10; } if(e.keyCode==65){ xPos-=10; } if(e.keyCode==68){ xPos+=10; } canvas.width=canvas.width; context.rect(xPos, yPos, 40, 40); context.stroke(); } document.onkeydown = move; </script> </body> </html>
  2. alessiopaoletti

    How to start animation html 5 canvas

    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
  3. Easy tutorial: HTML5 Canvas + pure JavaScript http://slicker.me/fractals/animate.htm
  4. 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 don't? Just try the simplified code with Firefox and with all other modern browsers to see the difference...
  5. Newbie2772

    Jquery Animation Need Help

    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: '-=100px' }); }); var num = math.floor(math.random() * 18) + 1; var n = num.toString(); var sEvent = "'" + "#" + "square" + n +"'"; $("div").click(function() { $(sEvent).toggle(400); }); }); the first 2 sections work fine but I cant get my click function to work properly. Please let me know your thoughts!
  6. tomatoKetchup

    CSS animations: targeting a different element

    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
  7. 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($(this))).width() / 2 - 60, width: '120px' }, 250, function(){ $(this).removeClass('done'); }); } else { $(this).parent().animate({ left: 0, width:'100%' }, 250, function(){ $(this).addClass('done') }); }; }, function(){ $(this).parent().animate({ left: $(this).parent().width() / 2 - 60, width: '120px' }, 250, function(){ $(this).removeClass('done') }); // even clicks }); which works all fine, but after you clicked two or three times on different thumbnails to open them and close the other ones, the already open thumbnail gets stuck and the clicked thumbnail opens as it should open. You have to click on the clicked thumbnail to close the other one, and then you have to wait some time till you can click the clicked thumbnail to properly close it again. After that it just stays like this. I've already tried doing it with a plugin called Summer of GOTO, because I think it has something to do with checking whether there are any "done" classes or not, so I wanted to make it re-check stuff using goto in JQuery. Using a WHILE statement didn't work either, but that could be because I don't understand that function.I tried adding .stop() before the .animate statement, but that didn't do anything special as well. Anyone knows how to solve this? Thanks in advance. Here is a JSfiddle of what I'm working on.
  8. elmohack

    Border-bottom animation on hover

    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/
  9. 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 another div, the first (or earlier) should return little if possible. I don't know if I have explained myself well enough. The site has responsive desgin for pc, tablets and smartphones. I would like this javascript runs on safari, Internet Explorer, crome and firefox. I hope someone can help me out ... Thanks in advance. Andrea
  10. 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-keyframes FadeIn { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; }} I'm using Zepto.js as a jquery replacement, zepto uses css3 animations. At the end of the animation i'm hiding the content with .hide() this causes the element to change the display to none. display is not animatable so before the display goes to none i use opacity to create the fade out effect. I think it hade something to do with te display but i cant figure out what because the FadeIn doesn't have any problems at all. Look at the demo Thank you!
  11. Ole

    HTML5 - Animation

    Is it possible with HTML5 to make interactive animations? say if I press a link, then an animation will be played, will it work?
  12. 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 RegardsEmmet
  13. 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 displays all of them. The question is, how can I get it to just display the full image related to the thumbnail that's been clicked on? I'm pretty new to this so apologies if this seems a bit pedestrian. Thanks in advanceStef For reference purposes:array[0] refers to id of imagearray[6] is the thumbnail urlarray[7] is the full image urlarray[8] & array[9] are x and y coordinates of the thumbnail on the page function display (array) { $.each(array, function(i){ $('#container').append( '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][8]+'px; top: '+array[i][9]+'px;"><img src=images/'+array[i][6]+' id=nav width=85 height=85></div>' ); $('#test').append( '<div id="'+array[i][0]+'" style="width: 398px;"><img src=images/'+array[i][7]+' id=nav width=398>' ); $("#"+array[i]).click(function () { $("#test").fadeIn('slow', function () {// animation complete}); }); });} Full page attached upload.php
  14. 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 a .click because I want to be able to stop any-size div at any given point rather than map it out explicitly. Thanks!