-
Posts
-
I have simple animation i made in html5 canvas
you can see a sample of it here http://jems.co.il/wp-content/themes/jemsweeco/animation/contactPage-animation-factory-1.html
since it’s html5 canvas animation it’s made of 3 elements:
1. html page (like the one in the link)
2. png image (sprite sheet)
3. two JS files (that load the sprite sheet and turn it into frame by frame animation)
the question is: beside using iFrame, is there any other way to show this kind of animation inside an Enfold website?
how can i insert this animation into a one of the pages?Hey Doron,
Thank you for using Enfold.
If I am not mistaken, you can just add the canvas code and the scripts associated with it inside a code or text block. Have you tried that? You don’t need an iframe.
Best regards,
Ismaelsorry it took me so long to answer
i’ve been trying and so far it’s not working :(
(it works locally on my computer but stops working once i insert the code into an Enfold page even though i adjusted all the images and js files path correctly)
in the private content there is a link to a test page, as you can see it’s empty and the html falis to load
do you want me to give you admin access?Hi,
Yes, please provide the login details and the reference site where you got the canvas script. We would like to check it.
Best regards,
Ismaelthank you very much for your help
the login details you asked for are in the private contentthe code is generated by the program i used to make the animation – adobe animate
here is a dropbox link to the html page (where you can see the code and also download the page):
https://www.dropbox.com/s/7iqzmryzoorxl0o/contactPage-animation-factory-2.html?dl=0
you can also view how the animation work without any problem if the page is outside of enfold, like here:
http://www.doronwolf.com/suitcase2/contactPage-animation-factory-2.htmlif you download the html page and run it on your computer locally you will see it take only 3 seconds to load and than it runs smoothly even without any images or JS files because I’ve uploaded all the images and js files to a directory in my server and adjusted the paths in the code accordingly
and yet..when I put this code inside the Enfold page..it wont work
:(Hi,
Thank you for the info. Did you add the onload attribute with the init() function in the body tag?
<body onload="init();" style="margin:0px;">You can modify the header.php file manually in order to add the attribute and function.
Best regards,
Ismaelno i didn’t
it’s just part of the code that comes from the animation program output
is this the reason the animation isn’t ruining inside an enfold page?
and how will it effect other pages in the website?
i don’t want to modify the header.php file and change the entire website look for a few html5 animation pages
(unless this modification solves the problem without effecting the website look and function?..)Hi Ismael
so is this (that missing line of code that can’t be paste to the text block in the avia builder because it’s being automatically deleted when i update the page) whats missing for the animation to work?I will be most grateful if you can elaborate a little more about the right way it should be done
1. should i copy the header.php file to my child theme
2. where inside the header.php file should i paste the missing<body onload="init();" style="margin:0px;">code?thank you so much for your patience
DoronHi,
The body tag is already inside the header.php file, line 54.
<body id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank." ".$sidebar_styling); avia_markup_helper(array('context' => 'body')); ?>>Replace it with..
<body onload="init();" id="top" <?php body_class($style." ".$avia_config['font_stack']." ".$blank." ".$sidebar_styling); avia_markup_helper(array('context' => 'body')); ?>>Best regards,
IsmaelHi Ismael
I replaced the code in the header.php file is you instructed
but the animation still wont run
:(Hi,
Thank you for the update. There are a few errors in the console but I’m not sure what’s causing it. Please post the FTP details in the private field so that we can test it.
Best regards,
IsmaelHi Doron,
Glad, Ismael got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoriajust one problem :(
the moment I add any other element to the page and update the page, the animation stops working
is the page update causing the canvas container to disappear (like last time)
or is it something else?Hi,
is the page update causing the canvas container to disappear (like last time)
Yeah, maybe that’s the case. I think you just have to finish the page before adding the canvas code.
Best regards,
Ismael
- You must be logged in to reply to this topic.