0
votes

Le conteneur ne veux pas floue avec la fonction JS

Je configure un site Web et je veux brouiller un conteneur lorsque je clique sur un bouton.

J'ai essayé d'ajouter une classe "flou" sur mon conteneur avec une fonction JS P>

<div id="container">

  <video autoplay loop poster muted class="bg" id="bgvid">
    <source src="http://cdn-b-east.streamable.com/video/mp4/xoecp.mp4?token=TvBJWgOGquHb07Q5IlkCZA&expires=1558304940" type="video/mp4"></source>
  </video>

  <div class="bg-filter" id="bg-filter"></div>

  <div class="top_vid">
    <h1 class="title">Moodyness</h1>
    <button class="start" onclick="hideShow()"><span>Let's move !</span></button>
  </div>

</div>

<div class="registerform" id="formregister" style="display: none;">

  <form action="#" method="post">
    <input type="email" placeholder="EMAIL" required></input>
    <input type="password" placeholder="PASSWORD" required></input>
    <input type="password" placeholder="REPEAT PASSWORD" required></input>

    <div class="check">
      <label for="checkbox">Acceptez vous les conditions d'utilisation ?</label>
      <input type="checkbox" id="checkbox" required></input>
    </div>

    <input type="submit" value="Okay !"></input>
  </form>

</div>

javascript html css button blur

0 commentaires

3 Réponses :

0
votes

Vous pouvez ajouter ou supprimer une classe à l'aide des méthodes ClassList.Ajoud () et ClassList.ReMove ().

Référence de la classeur

et un autre détail, dans votre CSS, vous avez oublié d'ajouter un" ". Avant le flou, votre sélecteur est donc pour une balise floue pas un flou de classe, vous devriez donc passer à la suivante: xxx

pour ajouter la classe flou < Pré> xxx

Pour supprimer la classe flou xxx

3 commentaires

Merci de votre réponse, cela fonctionne presque, mais la vidéo en arrière-plan bouge toujours, comme une marge? Avez-vous une idée?

Je vais chercher, mais ça ne devrait pas ajouter de marge

On dirait que si vous changez le flou du conteneur vers l'élément vidéo, cela fonctionne, je modifierai mon Awnser

0
votes

OK, je l'ai trouvé dans CSS change flou à .blur et écrire z-index : -100 et courir

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px); 
  z-index:-100
}

1 commentaires

Merci pour votre réponse, comme l'autre commentaire, ma vidéo bouge toujours quand je le fais, je ne peux pas savoir pourquoi

0
votes

Est-ce ce que tu veux? https://jsfiddle.net/lrfyowc3/

J'ai d'abord ajouté une période avant "flou" dans le CSS. Deuxièmement, j'ai ajouté id = "top_vid" au HTML pour le texte en haut. Troisièmement, j'ai ajouté une variable pour "top_vid" et ajouté ce qui suit au JavaScript: xxx

0 commentaires