✨How to make dynamically changing text✨

  • 1
  • Article
  • Updated 1 year ago
  • (Edited)




Have you ever wanted to create dynamically changing text in your Presentation? Then read on!

Before you start, upload the Javascript files
Currently there are three JS files in the <script></script> tags which will need to be uploaded into your Rise Storage account. Make sure to download these three files, upload to your own server/Rise Storage and update them to the correct links from Rise Storage in the <script></script> tags.

These three files are:
https://storage.googleapis.com/riseme...
https://storage.googleapis.com/riseme...
https://storage.googleapis.com/riseme...

In the full example of the code below, I've kept the original JS files if you wanted to do a quick test to see how the code works. These 3 files are highlighted in red in the code below.

Now it's time to create!
After uploading the three JS files to your own server or Rise Storage, create a new Presentation and add the HTML Widget in a Placeholder.

Copy all of the code below and paste it over the existing code in the HTML Widget. Remember to link the three JS files you uploaded to Rise Storage.



<!DOCTYPE html><html class=''>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Handlee);

html {
height: 100%;
}

body {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .1);
font-family: 'Handlee', sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
margin: 0;
}

h1 {
color: #000000;
font-size: 4em;
}

.typed {
border-bottom: 2px solid #000000;
}

.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}

@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}

@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}</style></head><body>
<h1>Congrats <span id="typed" class="typed"></span> - SSC Class of 2016!</h1>

<script src='https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/JSHeaders/stopExecutionOnTimeout.js?t=1'></script><script src='https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/JSHeaders/jquery.min.js'></script><script src='https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/JSHeaders/typed.min.js'></script>
<script>$(function() {
$("#typed").typed({
strings: ["Grace Padilla", "Cecil Drake", "Kate Owen", "Christy Simpson", "Joe Maldonado", "Raymond Nash", "Rita Mann", "Ray Howell", "Adrienne Barnes"],
typeSpeed: 100,
backDelay: 1500,
loop: true,
callback: function(){}
});
});
</script>
</body></html>


Changing the static text
To change the static text item (this is the text that does not animate), simply change the line below:

<h1>Congrats <span id="typed" class="typed"></span> - SSC Class of 2016!</h1>

Do not edit the <span></span> tag because it's the part of the code that is linking to the list of names as indicated below:

changingstatictext

For example, If I wanted the Display to greet "Happy Birthday _____!" (with the underline part being the changing list of names), I would write in the code:

<h1>Happy Birthday <span id="typed" class="typed"></span>!</h1>. See the example below:



In this example, the "Happy Birthday" message is the 'static text' because it does not change.

Changing the dynamic text
In the section of the code where you see the example names, edit the strings between the "" (where I've highlighted in the screenshot below) to be the dynamic changing text you would like to see:

namestring

This text is what will dynamically change in your Presentation, like in the example below:



Keep in mind that if the static text is too long, you will not be able to properly view the dynamic changing text.

Changing the font
To change the font of the text, you can go to https://www.google.com/fonts, search for the font that you want to use.

If you decide to change the font, replace the font name with font of your choice from Google Fonts. Make sure to replace it in all lines that references that font name. In the example code below, I am currently a font called Handlee and it's being referenced twice:



Changing the Presentation background
The presentation background is currently a chalkboard background but you can use any presentation background that you have in your Rise Storage. To change the presentation, go to your Settings via the gear icon:



Select Use Image and link to your own choice of background:



And that's it! Depending on the image background, you may need to resize and relocate the Placeholder to suit.

If you have any further presentation ideas, let us know in the comments below!

The example is adopted from an existing Codepen article here.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Larry Tosten

Larry Tosten

  • 470 Points 250 badge 2x thumb
I Really like this, I'm not much of a coder, but I've been playing around with the settings and they're pretty straight forward.  Is there a way to apply the same effect and add a carriage return followed by a second line of text for example printing out someone's birthday.

Jane Doe
January 1st

Anybody's help would be appreciated
Photo of Larry Tosten

Larry Tosten

  • 470 Points 250 badge 2x thumb
I Really like this, I'm not much of a coder, but I've been playing around with the settings and they're pretty straight forward.  I've added a <br>to get a carriage return and a second line to print, but the second line is left justified instead of centered... Anbody's help would be appreciated

http://preview.risevision.com/?type=presentation&id=7b1e4f32-756a-4350-95d1-068da16fd680
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Larry
Great to see someone using this.

If you can go to <style> and look for the h1 class. Then add text-align: center; in a new line similar to the example that I have below:


h1 {
color: #ffffff;
font-size: 10em;
text-align: center;
}


Also I've noticed additional space breaks where the name and date is located, you can take these out.
Photo of Larry Tosten

Larry Tosten

  • 470 Points 250 badge 2x thumb
Space breaks were a weak attempt at trying to center the 2nd line of text.  I used the code below and it worked perfectly. Thanks so much for your help!!! 
Photo of Yannick MARTY

Yannick MARTY

  • 550 Points 500 badge 2x thumb
Hi,
Sorry for comment after 1 year but i will try this method but it's impossible to me to download the 3 js file. "Acces denied. Anonymous user can't". Thanks a lot for your help.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Sorry Yannick, it's looks like that Media Library has been deleted. Sorry about that!