Printable View
the loading times are somewhat close
http://www.webpagetest.org
Load times are relative and only become a consideration when the connection is low or poor. But That's something to consider. Less code is better for wider dissemination of the page. If the action is the same, css has a slight advantage in being more widely supported, though not by much. It's really pretty much six of one, half a dozen of the other. If your target is high end users, then css I would think, otherwise javascript might be the better choice (better results with lower throughput users, wider audience).
Hi there styxlawyer,
I would always take the CSS option whenever possible. ;)Quote:
which would you choose?
That, of course, is only due to the coder having used basic coding methodology. :eek:Quote:
The first is animated with JavaScript and the second is pure CSS,
but the second file is almost seven times larger than the first!
Have a a look at this rather more refined example...
...which is, in my opinion, pleasantly smother than the JavaScript example. :DCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#text-change {
padding: 1em;
border-radius: 1em;
background-color: #111;
border: 0.2em solid #999;
text-align: center;
}
#text-change span {animation: change 1.8s 0s ease-in-out infinite; }
#text-change .color0 {color:#f00; animation-delay: 0s; }
#text-change .color1 {color:#ff8000; animation-delay: 0.15s;}
#text-change .color2 {color:#ff0; animation-delay: 1.3s; }
#text-change .color3 {color:#80ff00; animation-delay: 0.45s;}
#text-change .color4 {color:#0f0; animation-delay: 0.6s; }
#text-change .color5 {color:#00ff80; animation-delay: 0.75s;}
#text-change .color6 {color:#0ff; animation-delay: 0.9s; }
#text-change .color7 {color:#0080ff; animation-delay: 1.05s;}
#text-change .color8 {color:#0ff; animation-delay: 1.2s; }
#text-change .color9 {color:#8000ff; animation-delay: 1.35s;}
#text-change .color10 {color:#f0f; animation-delay: 1.5s; }
#text-change .color11 {color:#ff0080; animation-delay: 1.65s;}
@keyframes change {
0% {color: #f00; }
8.33% {color: #ff0080;}
16.66% {color: #f0f; }
25% {color: #8000ff;}
33.33% {color: #00f; }
41.66% {color: #0080ff;}
50% {color: #0ff; }
58.33% {color: #00ff80;}
66.66% {color: #0f0; }
75% {color: #80ff00;}
83.33% {color: #ff0; }
91.66% {color: #ff8000;}
100% {color: #f00; }
}
</style>
</head>
<body>
<h2 id="text-change">
<span class="color0">We</span>
<span class="color1">would</span>
<span class="color2">like</span>
<span class="color3">to</span>
<span class="color4">wish</span>
<span class="color5">all</span>
<span class="color6">our</span>
<span class="color7">visitors</span>
<span class="color8">a</span>
<span class="color9">very</span>
<span class="color10">Merry</span>
<span class="color11">Christmas</span>
<span class="color0">and</span>
<span class="color1">a</span>
<span class="color2">Happy</span>
<span class="color3">New</span>
<span class="color4">Year.</span>
</h2>
</body>
</html>
coothead
As a general rule, I would prefer CSS over JS when both methods work, because most of the time CSS is faster than JS.
But there are cases in which CSS doesn't work whereas JS does. I just finished a web page where the left padding of the body was supposed to vary according to certain factors related to the width of the viewport. The CSS method (media queries) worked well enough in Firefox's Responsive Design-modus. But, strangely enough, it didn't work at all in the 'real web situation'. I had to use a javascript function together with a timeout to make things work (didn't work without the timeout). My guess is that the CSS-method may not work in complex cases where a timeout is needed, which CSS doesn't provide for.
Thanks to all for your help, it's my first time using CSS animation. You're never too old to learn something new!
Here's the finished page which I will be using tomorrow evening. Please ignore the table at the top it was the quickest and easiest way to grab the page header from the existing site.
I was trying to use JavaScript to modify the parameters in the keyframes of the image animation according to the window width, but realised that using "100%" instead of "nnnpx" would automatically compensate for different sizes of the browser window.
I found these two pages really useful:
http://easings.net
http://cubic-bezier.com
Hi there styxlawyer.
you really need to change this...
...to this...Code:
body {
background-color: #0083de;
font: bold 2em/2.5em verdana, arial, helvetica, sans-serif;
overflow:hidden;
}
...as the flashing text and scrolling thing at the bottom ofCode:
body {
background-color: #0083de;
font: bold 2em/2.5em verdana, arial, helvetica, sans-serif;
overflow-x:hidden;
}
the page start to disappear at about 1100px page width. :eek:
Also note that at about page width 470px the the largest
of the flashing text words start to overflow its container. :eek:
An "@media query" to reduce the font size would be the
appropriate action to take. ;)
I really did try to comply, but...Quote:
Please ignore the table at the top it was the quickest...
coothead
Hi coothead,
Thanks for those tips. I have changed the overflow but will leave the rest as the page will only be seen once on one laptop and it seems to work OK. The original page is on the bridgewebs.com server. The Bridgewebs system hosts many hundreds of Bridge Club websites and I will pass on the validator results to the web master.