Skip to main content ↑ ↓
Animated Footer Image Started by omBre · · Read 6150 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Animated Footer Image

after the Code Hint how to get header image through the CSS console [1][2] I would ask is it possible to have additional code inbetween the lines for svg+xml or smil animation as I know ElkArte supports the svg format!? animated png as image format would do the job also, but svg sharpness as vector format is without competition

here are examples, that are also free will opensource work [1] if I understand correctly all of these are free, and through their php code derived from their source code I think they can be mounted in ElkArte too, or!?

http://srufaculty.sru.edu/david.dailey/svg/bucketful.htm
http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

actually I would like to add this image to the footer, as ...

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/demoFE.svg

... as I told Ahrasis like thankfull beating heart as for the board so as for atention to the ElkArte community, just an idea to say BIG but humble thanks to all, tho this image it should be resized to fit neatly beside the Elkarte credits in the footer ...

Re: Animated Footer Image

Reply #1 –

Well, technically it's the browser that supports SVG, ElkArte just uses SVG images in certain places instead of other formats.

I'm not sure I understand where exactly you want the images, but SVG are no different from any other image (provided the browser supports the svg format), so they can be used either in CSS or directly in HTML, so the answer (for me) is depends.
Bugs creator.
Features destroyer.
Template killer.

Re: Animated Footer Image

Reply #2 –

I would like as I said to put this svg+xml (animated svg) image beside the ElkArte credits in the footer, just could this workdont know ... for this file http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/demoFE.svg probably Javascript as animation engine, the source code is in the DOM tree in the Elements panel, that should be copied in the CSS console for the footer image ...

anyway as I said it would be somehow from respect, not that this is something that I need, tho would like to play with it later if its easy process that could be applied elsewhere on the forum gui eg. as background image on the board categories, transparent post field etc.

https://css-tricks.com/animating-svg-css/
http://www.svgdreams.com/animate.php 

think xml-svg extension soon would be regular thing in web design ... there are two ways to animate svg SMIL or with Javascript, but in this case I would like to copy/paste the engine in eventual image code in the footer

Re: Animated Footer Image

Reply #3 –

Hi Elk's if I use this code as backqround image

Quote from: Jorin –
Code: [Select]
body {
	background: #f0f0f0;
	background-image: linear-gradient(to right, #f0f0f0 0%, #e6e6e6 50%, #f0f0f0 100%);
	color: #464646;
}

where should I add this code  in the above one, or I need to make new background CSS folder in the theme, so I could get animated background, is this possible, can someone test this, for the explanation check the code link http://snapsvg.io/start/

Code: [Select]
var s = Snap("#svg");
 
var bigCircle = s.circle(150, 150, 100);
 
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
 
var smallCircle = s.circle(100, 150, 70);
 
var discs = s.group(smallCircle, s.circle(200, 150, 70));
 
discs.attr({
    fill: "#fff"
});
 
bigCircle.attr({
    mask: discs
});
 
smallCircle.animate({r: 50}, 1000);
 
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);
 
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
        fill: "none",
        stroke: "#bada55",
        strokeWidth: 5
    });
 
p = p.pattern(0, 0, 10, 10);
 
bigCircle.attr({
    fill: p
});
 
discs.attr({
    fill: Snap("#pattern")
});

discs.attr({fill: "r()#fff-#000"});
discs.attr({fill: "R(150, 150, 100)#fff-#000"});
 

Re: Animated Footer Image

Reply #4 –

You can add your css either to index.css or (preferred) create a custo.css file (searche the forum you'll find instructions) and put it there.
Bugs creator.
Features destroyer.
Template killer.