ezekielaquino / Marquee3000

Marquees for the new millenium
https://ezekielaquino.com/2019/marquee
MIT License
438 stars 81 forks source link

If you are using custom fonts, initialise Marquee3000 AFTER they have been loaded! #8

Closed Robiv8 closed 6 years ago

Robiv8 commented 6 years ago

Hallo, Can you say me how to do this?

My index.html:


<html lang="de">
  <head>
    <title>WEG Uhr 2017</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/marquee3k.js"></script>
  </head>
<script src="js/uhrzeit.js"></script>
  </head>
  <body lang="de" onLoad="init()">
<!-- hier der code der Uhrzeit -->
    <div id="container">
      <div id="clock"></div>
      </div>
<div class="weglogo"><img src="bilder/weg-wir-sind.png" alt="WEG Logo" /></div>
<div class="dwdbalken"><img src="bilder/dwdplatzhalterBr.png" alt="WEG Logo" /></div>
<div class="marquee3k" data-speed="1.00">
    <h1>Some marquee content</h2>
</div>
<script  src="js/index.js"></script>

  </body>
</html>```

and my style.css

```@font-face { font-family: 'DIN-Light';
src: url('/font/DIN-Light.ttf') format('truetype');
}
@font-face {font-family: 'DIN-Regular';
src: url('/font/DIN-Regular.ttf') format('truetype');
}
@font-face {font-family: 'DIN-Medium';
src: url('/font/DIN-Medium.ttf') format('truetype');
}
@font-face {font-family: 'DIN-Bold';
src: url('/font/DIN-Bold.ttf') format('truetype');
}
@font-face {font-family: 'DIN-Black';
src: url('/font/DIN-Black.ttf') format('truetype');
}
body {
      font: DIN-Light;
      background-color: #000;
      overflow: hidden;
      margin: 0;
}
       #clock {
       font: 20px DIN-Regular;
       width: 100%;
       color: white;
       font-size: 26vw;
       text-align: center;
       top: -15%;
       position:absolute;
}
#container {
       width: 100%;
       height: 100%;
}
#date {
       font-family:DIN-Regular;
       font-size: 5vw;
}
/* ####  hier der code für DasWetter.de! #### */
.dwdbalken {
    margin: 890px 0px 0px 50px;
    float: left;
    position:absolute;
}
.marquee3k {
    font: DIN-Light;
    font-size: 24px;
    color: white;
    width: 800px;
    margin: 870px 0px 0px 348px;
    overflow: hidden;
    float: left;
    position:absolute;
}

/*.marquee {
    font: 46px DIN-Regular;
        color: white;
        width: 800px;
    margin: 900px 0px 0px 348px;
        overflow: hidden;
    float: left;
    position:absolute
        background: #999;
}*/
/*.dwdtext {
        margin: 890px 0px 0px 1000px;
    font: 3px DIN-Regular;
    color: white;
    font-size: 3vw;
    float: left;
    position:absolute
}*/
.weglogo {
    margin: 890px 0px 0px 1200px;
    float: right;
    position:absolute
}
.hide {
    display: none;
}```