Sport Ngin User Group Forum
SportsEngine Community Forum
Sign up Latest Topics
 
 
 


Reply
  Author   Comment   Page 1 of 2      1   2   Next
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #1 
Ever wanted to create a bit of text that scrolls across your screen? With this simple code block and the head code you can input some text and have it 'march' across the container similar to how the news scroll works. 

Put this bit in the head code of the page


<style style="text/css">
.example1 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);     
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>


Put this bit in your code page element



<div class="example1">
<h3>YOUR TEXT HERE. YOUR TEXT HERE. YOUR TEXT HERE.</h3>
</div>



__________________

Rob Bedeaux
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
gregzerafa

Junior Member
Registered:
Posts: 2
 #2 
this worked great. How do we increase size of message?
0
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #3 
Sure...that's easy. The message is wrapped in an <h3> tag. You can change that from <h1> to <h5> larger to smaller. Don't forget to close the tag at the end with an </h3> or </h4> or whatever size you use.

Additionally, you will need to alter the 
.example1 h3 {

bit to match your size

__________________

Rob Bedeaux
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
gregzerafa

Junior Member
Registered:
Posts: 2
 #4 
ALSO HOW TO INCREASE LENGTH OF MESSAGE CUTS OUT AFTER CERTAIN NUMBER OF CHARACTERS. 
0
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #5 
Great question! Any real front end developers out there care to take a crack at this? My meager CSS skills are at their limit.
__________________

Rob Bedeaux
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
pmcaughey

Junior Member
Registered:
Posts: 1
 #6 
I was able to increase the length of the message by increasing the width variable to a number larger than 100%.
0
bryanbhopper

Junior Member
Registered:
Posts: 10
 #7 
Has anyone found a way to make this longer and slower? When i went to increase the width, the message was longer but it went faster...seems like an easy fix but I have no idea how to do it!

thanks
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #8 
Hi Bryan,

In the code, you can change the speed of the scroll here:

/* Apply animation to this element */  
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;




Change the 15 to a higher number for a slower scroll, a lower number gives a faster scroll.

Hope that helps!

- Loren

P.S. Here's a site that allows you to check out and play with different types of marquee code.

0
bryanbhopper

Junior Member
Registered:
Posts: 10
 #9 
Hi Loren, 

Thanks for the quick reply, I was able to get the text to move faster, but now that I have increased the width, it seems like it takes a while for the text to even appear on the screen...seems like this is getting more complicated!
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #10 
Hey Bryan,

Send me an example of the page you are referring to, and I can take a look. If you are talking about your home page, the scroll shows up right away for me.

- Loren
0
bryanbhopper

Junior Member
Registered:
Posts: 10
 #11 
Hi Loren, 

If you scroll all the way down to the bottom of our home page, and wait a second or two, the scroll will appear with a list of college. I had to increase width to %500 and then made it 45s. It just is very delayed in starting to appear...
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #12 
Hey Bryan,

OK, I think I might have figured this out. If you delete the code you dropped into your head code, and then just add the code below as a code element on the page, I think it will work for you.

<!-- HTML -->
<marquee behavior="scroll" direction="left" scrollamount="10" scrolldelay="50"><div class="example1">
<h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</marquee></div></h3>


Let me know how this works.


- Loren

0
bryanbhopper

Junior Member
Registered:
Posts: 10
 #13 
Loren,

This worked perfectly! I think this is actually a better option than the code above, easier to work with. Thanks for being so responsive!

Bryan
0
bryanbhopper

Junior Member
Registered:
Posts: 10
 #14 
Loren,

Just when we though we were out of the trees, it looks like it doesnt work on mobile phones...oh well. I will search for another way to do it!

IMG_2973.PNG 

0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #15 
Ok, Bryan, I think I have this figured out this time (no really).


Try this in your head code:


<!DOCTYPE html>
<html>
<head>

<!-- Styles -->
<style style="text/css">
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 4500px;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(0%);
-webkit-transform:translateX(0%);
transform:translateX(0%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
100% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
100% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
100% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>
</head>
<body>



And then drop this code wherever you want it on the page:

<!-- HTML -->
<div class="example1">
<h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</h3>
</div>

</body>
</html>




You will need to adjust the scroll speeds to fit your preference.


I tried this in Chrome, Safari and Firefox at multiple widths, and tested on iPhone and Android.

Let me know how this works.

- Loren





0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.