Simple text wipe effect for streamlabs OBS using css and HTML

2021-01-11 05:10 Rakib Khan imported from Stackoverflow

everyone i want to get a simple text-wipe effect using only CSS and HTML, I have a code its very simple.
my goal is, the text won't resize when the textbox will shrink, and that's how I want to achieve this type of text wipe effect. please note I need a totally transparent background because I want to use it as a sub alert for twitch.

is there any option that the text sill stay at the fixed position(right side), and when the textbox wipes it from left to right.

.containner{
width: 200px;
height: 150px;
background-color:green;

overflow: hidden;
position: relative;

}
.innercon{
    right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/

}
@keyframes animaitonx{
    from{
        width: 200px;

    }
    to{
        width:0px;

    }
}
#copy{
    position: static;
}
.texttHolder{
     
    width:200px;
    text-align: right;
    
    color:red
}

<body onload="mainx()">
<div id="containner" class="containner">
    <div class="innercon">
        <div class="texttHolder" id="copy">
            here is your text
        </div>
        <div id="paste">
            
        </div>
    </div>


</div>


</body>

2 answers

answered 2021-01-11 05:36 Manas Khandelwal

These animations might help you:

Codepen: https://codepen.io/manaskhandelwal1/pen/MWjqowM

First:

h1#first {
  animation: textFade 5s ease infinite;
  width: fit-content;
  margin-bottom: 50px;
}

@keyframes textFade {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-110%);
    opacity: 0;
  }
}

<h1 id="first">Lorem ipsum dolor</h1>

Second:

h1#second {
  width: fit-content;
  position: relative;
}

h1#second:before {
  content: "";
  position: absolute;
  background-color: white;
  width: 100%;
  animation: textFade2 5s ease infinite;
  height: 100%;
  box-shadow: 25px 0px 30px 10px #ffffff;
}

@keyframes textFade2 {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}

<h1 id="second">Lorem ipsum dolor</h1>

answered 2021-01-11 09:21 Temani Afif

A simple mask effect can do it:

h1 {
  color: #fff;
  display: table;
  margin: 50px auto;
  font-family: sans-serif;
  font-size: 60px;
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #fff 60%);
  -webkit-mask-position: right;
  -webkit-mask-size: 250% 100%;
  animation: hide 2s linear forwards;
}

h1.opposite {
  -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 60%);
  animation-direction: reverse;
}

@keyframes hide {
  to {
    -webkit-mask-position: left;
  }
}

body {
  background: linear-gradient(to right, red, green);
}

<h1>A sample text</h1>

<h1 class="opposite">A sample text</h1>

See also questions close to this topic

1/3 of my mysql queries are executing through php

I'm sending three sql queries into my database. The first two input data, the third checks to see if the data has been entered. After I enter the information through an html form and check my database, the first command has worked but the subsequent two have not. I'm not sure what I'm missing that is leading to this not working.

$sql = mysqli_query($conn, "INSERT INTO Vehicle (Vehicle_licence, Vehicle_Make, Vehicle_model, Vehicle_colour) 
            VALUES ('$_SESSION[v_licence]', '$make', '$model', '$colour');");
$sql = mysqli_query($conn, "INSERT INTO Ownership (Vehicle_ID, People_ID)
            VALUES ((SELECT Vehicle_ID FROM Vehicle WHERE Vehicle_licence='$_SESSION[v_licence1]'), 
                (SELECT People_ID FROM People WHERE People_licence='$d_licence'));");
$sql = mysqli_query($conn, "SELECT * FROM Ownership JOIN Vehicle 
            ON Vehicle.Vehicle_ID = Ownership.Vehicle_ID 
            JOIN People
            ON People.People_ID = Ownership.People_ID
            WHERE Vehicle.Vehicle_licence = $_SESSION[v_licence]
            AND People.People_licence = $d_licence;");

 

if  (mysqli_num_rows($sql) > 0) {
    echo "Vehicle added successfully.";
}

custom datetime-local input format
I have this code for input :
```
 <input  class="form-control" id="newtime" type="datetime-local" name="newtime"  />
```
the output is 01/25/2021 10:00 PM i need to make the format 2021-01-22 10:00 pm

Uncaught ReferenceError: w is not defined at calcul_IMCtest.html:101 - BMI calculator js

I've been given this code as practice and have run into a couple errors. So i need help finding in this case what element/variable is supposed to go in the formula in line 101. The function "animacioBarra" is meant to animate a colored bar as an indicator of your BMI. The comments saying Error are just fixed errors so don't mind it.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style>
#IMC_grafic {
    position: relative;
    width: 100%; height:30px;
    background-color: #ddd;
        }
#barra  {
        position:   absolute;
        height: 100%;    
            background-color:rgb (0,0,0,0.3);
        border-right: black solid 5px, 
        }
.entrada    {
    width: 4em; 
    text-align: center;
    font-size: 1.2em;
    color: blue;
        }
.etiqueta {
   text-align: center;
    line-height: 30px;
    color: white
        }       
.etiquetaBarra {
    text-align: right;
    line-height: 30px;
    color: black;
        }
</style>
<title>Càlcul de l'IMC</title>
</head>
<body> 
<h1>Càlcul de l'Index de Massa Corporal.</h1> 
<p>
   Pes (en kg) = <input type="number" id="pes" class="entrada" step="0.1">,
   Alçada (en m) = <input type="number" id="alçada" class="entrada" step="0.1">
</p>
<p><input type="button" value="Calcular IMC" onClick="programa()"></p> <!-- Error d'execució ...  -->
<!--resultat textual -->
<p id="IMC_textual"></p>
<!--resultat gràfic -->
<div id="IMC_grafic">
    <div style="postition: absolute; width: 100%; ">
        <div style="float:left; widht:37%; background-color:coral;">
            <div class="etiqueta">desnutrició</div>
        </div>
        <div style="float:left; widht:13%; background-color:green;">
            <div class="etiqueta">normal</div>
        </div>
        <div style ="float:left; widht:10%; background-color:lightcoral;">
          <div class="etiqueta"> sobrepès</div>
        </div>
        <div style="float:left; widht:40%; backgroud-color:red;"> 
           <div class="etiqueta">obessitat</div>
        </div>
        <div style= "float: left; width 10%; background-color: red;">
    </div>
        <div style= "clear:left;"></div>
    </div>
        <div id="barra">
        <div id="imc" class="etiquetaBara"></div>
    </div>
    </div> 
<script>
function programa(){
    //Entrada de dades per part de l'usuari
    var pes=parseFloat(document.getElementById("pes").value.replace(",","."));
    var alçada=parseFloat(document.getElementById("alçada").value.replace(',','.')); //Error d'execució. L'element "altura" no estava assignat a cap input. La forma correcta i que sí que està assignada al input de l'alçada és la id "alçada".
    //Calcul del resultat
    var resultat=calcular_IMC(pes, alçada); //Error d'execució. El nom correcte de la funció a cridar és "calcular_IMC(pes, alçada)", enlloc de "calcul_IMC(pes, alçada)".
    //Sortida dels resultas cap a l'usuari
    //textual
    document.getElementById("IMC_textual").innerHTML=`Resultat: El teu IMC és de <strong>${resultat.IMC}</strong>. Tens <em>{resultat.missatge}</em>.`
    //gràfica
    document.getElementById("imc").innerHTML=resultat.IMC;
    animacioBarra(parseFloat(resultat.IMC*2)); //Error d'execució. El nom correcte de la funció és "animacioBarra", enlloc de "animacióBarra". Això es deu a que no es poden utilitzar accents en el nom d'una funció.
}
function calcular_IMC(pes,alçada){
    var resultat={IMC:0, missatge:""};
    resultat.IMC=(pes/alçada*alçada);
    resultat.IMC=resultat.IMC.toFixed(1);
    if(resultat.IMC<18.)
        resultat.missatge="desnutrició";
    else if(resultat.IMC<=25)
        resultat.missatge="un pes normal";
    else if(resultat.IMC<=45)
        resultat.missatge="obesitat";
    else
        resultat.missatge="sobrepès";
    return resultat; //Error sintàctic. "retorna" no és un una ordre vàlida perquè estava en català i HTML interpreta en anglès. Per tant la forma correcta és return.
    
}
function animacioBarra() { //Error lògic. Hi havia un nombre entre parèntesis innecessari. L'error se soluciona si l'eliminem.
    var barra = document.getElementById("barra");
    var width = 0;
    var id = setInterval(function(){
        if (width >= w) {
            clearInterval(id);
        }   else{
            width++;
            barra.style.width = width + '%';
        }
    }, 10);
                        
}
</script></body></html>

How to add theme color to the main container itself in SASS?

I'm following this article Theming Web Apps with SASS to theme components based on dark/light theme. Here's the codepan demo and below is the same code copied:

HTML:

<main id="app-root">

  <div class="theme-light box">
    <div class="app-container">
      <h1 class="title">Light theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

  <div class="theme-dark box">
    <div class="app-container">
      <h1 class="title">Dark theme</h1>
      <button class="button">A button</button>
    </div>
  </div>

</main>

SCSS:


/*
 * Theme definitions
 */

$themes: (
  light: (
    backgroundColor: white,
    textColor: #408bbd,
    buttonTextColor: #408bbd,
    buttonTextTransform: none,
    buttonTextHoverColor: #61b0e7,
    buttonColor: #fff,
    buttonBorder: 2px solid #408bbd,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    buttonTextColor: #aaa,
    buttonTextTransform: uppercase,
    buttonTextHoverColor: #ddd,
    buttonColor: #333,
    buttonBorder: 1px solid #333,
  ),
);

/*
 * Implementation of themes
 */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

/*
 * Actual styles for the app
 */



.box{
  width:200px;
  padding: 10px;
  @include themify($themes) {
    border: themed('buttonBorder');
  }
}


#app-root {

  height: 100%;
  display: flex;
  flex-direction: column;
  
  > div {
    display: flex;
    flex: 1;
  }
}

.app-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;

  .title {
    font-family: sans-serif;
    font-weight: lighter;
  }

  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }

  .button {
    max-width: 20em;
    cursor: pointer;
    border-radius: 5px;
    padding: 15px 32px;
    display: inline-block;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s;

    @include themify($themes) {
      border: themed('buttonBorder');
      color: themed('buttonTextColor'); 
      border-color: themed('buttonTextColor');
      background-color: themed('buttonColor');
      text-transform: themed('buttonTextTransform');

      &:hover {
        color: themed('buttonTextHoverColor'); 
        border-color: themed('buttonTextHoverColor');
        background-color: themed('buttonHoverColor');
      }
    }
  } 
}

I am able to set theme of child components like title, button etc but not able to set theme for box which is at the same level css as theme-light and theme-dark. How can I theme box?

Directly download font package instead of using <link href="" rel="stylesheet">
I won't be able to access internet on our hosting servers so I'm wondering if there's a way to download directly the font file instead of linking to the style sheet.
```
<style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</style>
```
Much appreciated.
Menu Text on multiple lines

Bonjour,

Je souhaite répartir sur deux lignes les éléments de mes menus :

Le but est donc d'avoir à minima deux lignes de façon répartie Voici le rendu souhaité :

Je précise que je ne peux pas ajouter de < br > dans les textes de menu ou le modifier. Je ne contrôle pas la taille non plus des éléments.

Merci

Checking if content overflows a div: is there a more efficient way than utilizing the window resize event?

I have a React application that keeps a long list of time entries (essentially just divs containing text). When the component mounts, each time entry element is checked for text overflow in a for loop. If the content overflows, an 'expand' button renders.

However, this represents a challenge when the window is resized, as the time entries are not re-checked. My current solution is to use a window resize event: Whenever the screen is resized, every time entry is checked again for overflow.

Is there a more efficient way to go about this?


class TimeEntry extends React.Component {
   componentDidMount = () => {
     window.addEventListener("resize", this.resize.bind(this));
     this.adjustTimeEntryHeight();
   };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.resize.bind(this));
  }

  resize() {
    this.adjustTimeEntryHeight();
  }

  // check if time entry exceeds 200px. If so, display the hidden content. If not, hide the 
  // content if it isn't already hidden.
  adjustTimeEntryHeight = () => {
    var time_entry_rows = document.getElementsByClassName('time_entry_row_container');
    for (var i = 0; i < time_entry_rows.length; i++) {
      if (time_entry_rows[i].clientHeight >= ENTRY_ROW_MAX_HEIGHT) {
         time_entry_rows[i].getElementsByClassName('fixBottom')[0].classList.remove('hidden');
      } else if (!time_entry_rows[i].getElementsByClassName('hidden')) {
        time_entryRows[i].getElementsByClassName('fixBottom')[0].classList.add('hidden');
      }
    }
  }

  ....

}

How to avoid userform in excel to resize automatically?

Hi all,

I created a UserForm in Excel and sized it based on my preference. However, sometimes when I run the sub to show the Form in excel, it will resize by itself. This causes the form to show only half as shown in the screenshot above. May I know how to fix the size of the form and stay the same size forever? Thank you.

Related questions

Simple text wipe effect for streamlabs OBS using css and HTML

2 answers

These animations might help you:

See also questions close to this topic