Как сделать так, чтобы моя анимация размытия работала быстрее каждый раз? - PullRequest
Новая
       16

Как сделать так, чтобы моя анимация размытия работала быстрее каждый раз?

2 голосов
/ 20 мая 2019

Я пытаюсь размыть всю свою страницу и отображать «всплывающую форму», когда нажимаю на кнопку, это на самом деле работает, но анимация очень медленная при первом нажатии, поэтому я пытаюсь найти любое решение, чтобы это исправить

Я запускаю его на локальном wamp-сервере, я пробовал с большим количеством браузеров, и каждый раз, когда первый клик кажется медленным, я даже пытался загрузить сайт онлайн, и это тот же результат. 

var vid = document.getElementById("bgvid");
vid.volume = 0.01;
var x = document.getElementById("formregister");
var container = document.getElementById('container');
var top_vid =
document.getElementById('top_vid')

function hideShow()
{
  if(x.style.display === "none")
  {
    x.style.display = "block";
    vid.classList.remove('noblur');
    top_vid.classList.remove('noblur');
    vid.className += " blur";
    top_vid.className += " blur";
  }
  else
  {
    x.style.display = "none";
    vid.className += " noblur";
    top_vid.className += " noblur";
    vid.classList.remove('blur');
    top_vid.classList.remove('blur');
  }
}
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body{
  font-family: 'Montserrat', sans-serif;
  background-color: black;
}

.bg,
.bg-filter{
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
 }

.bg-filter{
  z-index:-99;
  opacity:0.2;
  background: -webkit-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: -moz-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: -o-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
}

.top_vid{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top_vid .title{
  font-family: 'Montserrat', sans-serif;
  margin-left: 3%;
  font-size:3.2em;
  color:#fff;
}

.start {
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  margin-right: 3%;
}
.start:focus{
  outline:none;
}
.start span {
  cursor: pointer;
  position: relative;
  transition: 0.5s;

}
.start span:after {
  color: #31E0F7;
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.start:hover span {
  padding-right: 25px;
}
.start:hover span:after {
  opacity: 1;
  right: 0;
}
.registerform{
  align-items: center;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
.noblur {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
  <div id="container">

    <video autoplay loop poster class="bg" id="bgvid">
      <source src="videos/theforcebg5.mp4" type="video/mp4"></source>
    </video>

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

    <div class="top_vid" id="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>

А полный код здесь https://codepen.io/anon/pen/pmWwxm

Я хочу, чтобы анимация была быстрой даже при первом запуске сайта, спасибо!

1 Ответ

0 голосов
/ 20 мая 2019

Это на самом деле не имеет ничего общего с JavaScript или HTML.Это свойство CSS, которое обрабатывает время анимации размытия (или transition ).

Вы можете обрабатывать время перехода в следующих четырех строках: 

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: all 0.1s ease-in; //HERE
  transition: all 0.1s ease-in; //HERE
}
.noblur {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: all 0.1s ease-out; //HERE
  transition: all 0.1s ease-out; //HERE
}

У вас были значения: 

transition: all 0.5s ease-out;

Так что изменение его на меньшее значение, такое как 0.1s, сделает переход быстрее.Вот почему ваш переход всегда имеет одинаковую скорость, так как transition свойство CSS обрабатывает время между текущим стилем элемента и следующим стилем.

Пример: Наличие blur(5px) в качестве текущего значенияКогда вы изменяете стиль элемента на blur(0px) и в элементе присутствует свойство transition, CSS вычислит, сколько ему нужно, чтобы уменьшить текущее значение в указанное время 5s, поэтому в конце этого времениокончательное значение будет blur(0px).Это имитирует исчезновение анимации размытия.

Взгляните сюда, чтобы увидеть, как он работает: 

var vid = document.getElementById("bgvid");
vid.volume = 0.01;
var x = document.getElementById("formregister");
var container = document.getElementById('container');
var top_vid =
document.getElementById('top_vid')

function hideShow()
{
  if(x.style.display === "none")
  {
    x.style.display = "block";
    vid.classList.remove('noblur');
    top_vid.classList.remove('noblur');
    vid.className += " blur";
    top_vid.className += " blur";
  }
  else
  {
    x.style.display = "none";
    vid.className += " noblur";
    top_vid.className += " noblur";
    vid.classList.remove('blur');
    top_vid.classList.remove('blur');
  }
}
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body{
  font-family: 'Montserrat', sans-serif;
  background-color: black;
}

.bg,
.bg-filter{
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
 }

.bg-filter{
  z-index:-99;
  opacity:0.2;
  background: -webkit-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: -moz-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: -o-linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
  background: linear-gradient(rgba(49,224,247,1) 0%, rgba(90,77,184,1) 100%);
}

.top_vid{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top_vid .title{
  font-family: 'Montserrat', sans-serif;
  margin-left: 3%;
  font-size:3.2em;
  color:#fff;
}

.start {
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  cursor: pointer;
  margin-right: 3%;
}
.start:focus{
  outline:none;
}
.start span {
  cursor: pointer;
  position: relative;
  transition: 0.1s;

}
.start span:after {
  color: #31E0F7;
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.1s;
}
.start:hover span {
  padding-right: 25px;
}
.start:hover span:after {
  opacity: 1;
  right: 0;
}
.registerform{
  align-items: center;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}
.noblur {
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px);
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
<div id="container">

    <video autoplay loop poster class="bg" id="bgvid">
      <source src="videos/theforcebg5.mp4" type="video/mp4"></source>
    </video>

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

    <div class="top_vid" id="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>
...