0

I've been through endless amounts of solutions regarding the marquee effect and I'm absolutely stumped. I've also tried some webkit examples but event he demos don't work. I use primarily Chrome but my website has to work in both Chrome and Firefox.

http://jsfiddle.net/Birdieasm/LYZ2J/

<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/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>May 22nd, 2014 @ 6:00pm - California Vault</p>
<a href="#">Anaheim Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>June 3rd, 2014 @ 6:00pm - New York Vault</p>
<a href="#">Empire Expo Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>July 19th, 2014 @ 6:00pm - District of Columbia</p>
<a href="#">Walter E. Washington Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>August 21st, 2014 @ 6:00pm - Ohio Vault</p>
<a href="#">SeaGate Centre</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>September 30th, 2014 @ 6:00pm - Michigan Vault</p>
<a href="#">DeVos Place Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>October 10th, 2014 @ 6:00pm - Nevada Vault</p>
<a href="#">MGM Grand Hotel and Casino</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>November 12th, 2014 @ 6:00pm - Alabama Vault</p>
<a href="#">Celebration Arena</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>December 26th, 2014 @ 6:00pm - Connecticut Vault</p>
<a href="#">XL Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>Janrury 3rd, 2015 @ 6:00pm - Florida Vault</p>
<a href="#">Tampa Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>February 5th, 2015 @ 6:00pm - Illinois Vault</p>
<a href="#">Oakley-Lindsay Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<p>March 17th, 2015 @ 6:00pm - Indiana Vault</p>
<a href="#">Indiana Convention Center</a><br/><br/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</marquee>
</div>  
</div>
</body>

@charset "utf-8";
/* CSS Document */
#mainCon {
    width:935px;
    margin-left: auto;
    margin-right: auto;
}

#mar {
    margin-left: 5px;
    border: thin solid #000;
    width: 285px;
    height: 140px;
    background: url(../images/vaultdates.jpg);
}

marquee {
    font-size: 8.5px;
    font-family: Verdana, sans-serif;

}

marquee a {
    color:#03C;
    text-decoration:none;
}

marquee a:hover {
    font-style:italic;
}

marquee p {
    font-weight: bold;
}

I see all these marquees go left to right or right to left. I want mine to go from bottom to top. I've tried the webkit animation, I know very little about JavaScript and plugins so I really don't want to go down that alley.

I've tried countless other websites.

The only thing I've gotten close to doing is the animation property but I have very little knowledge of this property.

The bottom animation is the effect I desire but it moves way to slow and I want it to be the same speed as the effect I already created. I'm struggling to recreate this effect. : http://jsfiddle.net/Birdieasm/Lam3C/

<body>
    <div class="wrapper">
        <h1>Marquee with CSS3 Animation</h1>
        <h3>Move the text Downwards</h3>
        <div class="marquee down">
            <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
            <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
        </div>

        <h3>Move the text Upwards</h3>
        <div class="marquee up">
            <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">How to add WordPress Related Posts Without Plugins</a></p>
            <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Automate Your Dropbox Files With Actions</a></p>
        </div>
    </div>
</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);
}
a {
    color: #00b1dc;
    text-decoration: none;
}
a:hover {
    color: #0097bc;
}
.wrapper {
    width: 500px;
    margin: 25px auto;  
}
.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;

    background-color: #222;

    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);

    -webkit-transition: background-color 350ms;
    -moz-transition: background-color 350ms;
    transition: background-color 350ms;
}

.marquee p {
    position: absolute;

    font-family: Tahoma, Arial, sans-serif;

    width: 100%;
    height: 100%;

    margin: 0;
    line-height: 50px;

    text-align: center;

    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    transform:translateX(100%);
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
    animation: left-one 20s ease infinite;
    -moz-animation: left-one 20s ease infinite;
    -webkit-animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
    animation: left-two 20s ease infinite;
    -moz-animation: left-two 20s ease infinite;
    -webkit-animation: left-two 20s ease infinite;
}
.marquee.down p {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
    animation: down-one 20s ease infinite;
    -moz-animation: down-one 20s ease infinite;
    -webkit-animation: down-one 20s ease infinite;
}
.marquee.down p:nth-child(2) {
    animation: down-two 20s ease infinite;
    -moz-animation: down-two 20s ease infinite;
    -webkit-animation: down-two 20s ease infinite;
}
.marquee.up p { 
    transform:translateY(100%);
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
    animation: up-one 20s ease infinite;
    -moz-animation: up-one 20s ease infinite;
    -webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
    animation: up-two 20s ease infinite;
    -moz-animation: up-two 20s ease infinite;
    -webkit-animation: up-two 20s ease infinite;
}

/*================================
    Move the Marquee to the Left
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
    0%  {
        -moz-transform:translateX(100%);
    }
    10% {
        -moz-transform:translateX(0);
    }
    40% {
        -moz-transform:translateX(0);
    }
    50% {
        -moz-transform:translateX(-100%);
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
@-moz-keyframes left-two {
    0% {
        -moz-transform:translateX(100%);
    }
    50% {
        -moz-transform:translateX(100%);
    }
    60% {
        -moz-transform:translateX(0);       
    }
    90% {
        -moz-transform:translateX(0);       
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
    0% {
        -webkit-transform:translateX(100%);
    }
    10% {
        -webkit-transform:translateX(0);
    }
    40% {
        -webkit-transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}
@-webkit-keyframes left-two {
    0% {
        -webkit-transform:translateX(100%);
    }
    50% {
        -webkit-transform:translateX(100%);
    }
    60% {
        -webkit-transform:translateX(0);        
    }
    90% {
        -webkit-transform:translateX(0);        
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}

/*================================
    Move the Marquee Downwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
    0%  {
        -moz-transform:translateY(-100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    100%{
        -moz-transform:translateY(100%);
    }
}
@-moz-keyframes down-two {
    0% {
        -moz-transform:translateY(-100%);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes down-one {
    0% {
        -webkit-transform:translateY(-100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}
@-webkit-keyframes down-two {
    0% {
        -webkit-transform:translateY(-100%);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    60% {
        -webkit-transform:translateY(0);        
    }
    90% {
        -webkit-transform:translateY(0);        
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}

/*================================
    Move the Marquee Upwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
    0%  {
        -moz-transform:translateY(100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}
@-moz-keyframes up-two {
    0% {
        -moz-transform:translateY(100%);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes up-one {
    0% {
        -webkit-transform:translateY(100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}
@-webkit-keyframes up-two {
    0% {
        -webkit-transform:translateY(100%);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    60% {
        -webkit-transform:translateY(0);        
    }
    90% {
        -webkit-transform:translateY(0);        
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}

I need my page to validate since it's currently not. :(

4
  • Must be a browser thing because your jsFiddle goes bottom to top for me (Opera 12, Linux). Mar 19, 2014 at 1:16
  • @LowerClassOverflowian just to "separate" the dates.
    – Bird
    Mar 19, 2014 at 1:17
  • @Two-BitAlchemist it goes up, pauses, then goes up again.I want a continuous effect, no pausing. Like the <marquee> I made in the first jsFiddle. I just have NO idea how to edit the bottom code to make the desired effect.
    – Bird
    Mar 19, 2014 at 1:20
  • Nope, perfectly continuous here. Mar 19, 2014 at 1:23

1 Answer 1

0

Try this works perfect for me this does down but if want it to go up then simply swap 100% and 0% and change the setting to how you want them if need help with settings google the setting and w3schools will explain how to use that setting

for this you do not need any marquee just a div class or id with the content you wish to marquee inside n change it relevant if you explain to me exactly what you want to move and where ill try for you if makes easier

#marquee_div_name {
  display:block;
  width: 500px;
  position:absolute;
  text-align: center;
  animation-name: marquee;
  -webkit-animation-name: marquee; 
  animation-duration: 60s;
  -webkit-animation-duration: 60s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:infinite;
  animation-direction:normal;
  -webkit-animation-direction:normal;
}

@keyframes marquee {
  from { top: 0%; }
  to { top: 100%; }
}
}

@-webkit-keyframes marquee {
    from {top: 0%;}
    to {top: 100%;}
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.