Я пытаюсь сделать весь свой контейнер (mainContainer, содержащий полноэкранное видео 100vh и наложение текста) слева, щелкнув по классу div (next hvr-forward), используя jquery.

https://jsfiddle.net/Lo7xto2t/6/

$('.next').click(function() {$('.mainContainer').animate({"margin-right": '-=200'});});

Использовал приведенный выше код, но не работал. Протестировали его с помощью css: border, так что это не проблема jquery.

HTML:

<div class = "mainContainer">
    <video poster ="poster.png" autoplay loop>
        <source src ="images/video.mp4" type ="video/mp4">
        <source src ="video.webm" type ="video/webm">   
    </video>
    <div class = "overlayAll">
        <div class = "text"> 
            We are BLXCK Co.
        </div>
    </div>
</div>

CSS:

video {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
background: transparent;
background-size: cover;
}
.mainContainer{
height: 100vh;
position: absolute;
opacity: 1;
}
.overlayAll {
z-index: 1;
position: absolute;
background: rgba(0,0,0,0.3);
top: 0;
bottom: 0;
left: 0;
right: 0;    
height: 120vh;
}
.text {
position: fixed;
max-width: 50vw;
min-width: 50vw;
top: 30vh;
bottom: 30vh;
left: 15vw;
color: white;
font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
font-size: 12vw;
display: flex;
line-height: 0.8em;
flex-direction: column;
justify-content: center;
align-items: center;
}

Также использовал Инспектор, но похоже, что мой mainContainer не движется. Есть ли другие способы переместить весь контейнер влево одним щелчком мыши, как ползунок?

0
Jake Tan 19 Ноя 2017 в 17:51

1 ответ

Лучший ответ

Он не будет анимирован из-за свойства fixed, которое вы дали элементам video и .text.

Если изменить mainContainer на relative, а подэлементы на absolute (и некоторые другие мелочи, которые вы можете увидеть во фрагменте), это работает.

Надеюсь, это поможет!

$('.next').click(function() {
	$('.mainContainer').animate({
    right: '+=100vw'
  }, 2000);
});
video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  background: transparent;
  background-size: cover;
}
.mainContainer{
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  position: relative;
  opacity: 1;
  right: 0;
  overflow: hidden;
}
.overlayAll {
  z-index: 1;
  position: absolute;
  background: rgba(0,0,0,0.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;    
  height: 100vh;
}
.text {
  position: absolute;
  max-width: 50vw;
  min-width: 50vw;
  top: 30vh;
  bottom: 30vh;
  left: 15vw;
  color: white;
  font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
  font-size: 12vw;
  display: flex;
  line-height: 0.8em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "mainContainer">
    <video poster ="poster.png" autoplay loop>
        <source src ="http://techslides.com/demos/sample-videos/small.mp4" type ="video/mp4">
        <source src ="http://techslides.com/demos/sample-videos/small.webm" type ="video/webm">   
    </video>
    <div class = "overlayAll">
        <div class = "text next"> 
            We are BLXCK Co.
        </div>
    </div>
</div>
0
Evochrome 19 Ноя 2017 в 15:39