After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome and Firefox.
Check out this demo on jsFiddle
<body>
<div id="mainCon">
<p class="style">VAULT ORIENTATION DATES</p>
<div id="mar">
<marquee width="295px" height="140px" direction="UP" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();"><p>April 14th, 2014 @ 6:00pm - Washington Vault</p>
<a href="#">Washington State Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
... (continues with more information about vault dates)
</marquee>
</div>
</div>
</body>
@charset "utf-8";
/* CSS Document */
#mainCon {
width:935px;
margin-left: auto;
margin-right: auto;
}
... (more CSS rules)
I've seen marquees that move left to right or right to left, but I want mine to go from bottom to top. The webkit animation doesn't quite fit my requirements, and delving into JavaScript and plugins isn't something I'm familiar with or keen to do.
I've scoured countless other websites for a solution without success. The closest I got was experimenting with the animation property, but my lack of knowledge in this area is holding me back.
The slow-moving bottom animation resembles the effect I'm aiming for, but it's too sluggish. I want it to match the speed of the existing effect I've created. Struggling to replicate this effect, here's the link to what I've tried so far: View demo
<body>
... (the HTML structure for a marquee with CSS3 animations)
</body>
html {
background: url('../images/skewed_print.png');
}
h1, h2, h3 {
font-family: Tahoma, Arial, sans-serif;
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
... (more CSS rules)
Page validation is crucial for my website, and currently, it falls short. Need to get things up to par!