Javascript 启动画面 + 媒体查询

Question

我将 js 用于带有视频背景的启动画面。如果有人点击它，它就会淡入主页。对于移动屏幕，我想添加一个显示的图像而不是视频。我最初尝试显示图像，但在我单击它后它不会淡出。这是我尝试之前的代码：

<style>
 #splashscreen {  
    background-color: #000000;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
}


 .logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index:100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);

}

  @media only screen and (max-width: 600px) {
  .logo {
    max-width:90%;
  }

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 10000;
}
</style>


<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="XXXXXXXXXX">
    <video playsinline=""  autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
  <source src="XXXXXXXXXXX" type="video/mp4">
</source></video></a>

</div>

<script type="text/javascript">//<![CDATA[

    $(window).load(function(){

$('.enter_link').click(function () {
    $(this).parent('#splashscreen').fadeOut(500);
});

    });

  //]]>
</script>

感谢您的帮助。

Answer 1

我创建了一个 fiddle 来解决您的问题。

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

  #splashscreen {
  background-color: #000000;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 600px) {
  .logo {
    max-width: 90%;
  }
  video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.9;
    z-index: 10000;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="XXXXXXXXXX">
    <video playsinline="" autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
      <source src="XXXXXXXXXXX" type="video/mp4">
      </source>
    </video>
  </a>
</div>

我所做的更改是，

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

虽然您的锚标记没有覆盖整个页面，但您可以直接在 #splashscreen 上设置 click 事件并在您的方法中执行以下操作，

$(this).fadeOut(500);

更新

要跟踪网站的首次访问，您可以使用 localStorage - 您可以设置一个名为 firstVisit

的标志

let firstVisit = !localStorage.getItem('firstVisitCompleted')
if (firstVisit) {
  showSplashScreen()
  localStorage.setItem('firstVisitCompleted', true)
} else {
  hideSplashScreen()
}

Answer 2

检查这个 fiddle https://jsfiddle.net/0egocjLa/

基本上您的锚标记缺少高度。提供高度和点击功能即可。

$(document).ready(function() {
  $(".enter_link").click(function(e) {
    e.stopPropagation();
    $(this)
      .parent("#splashscreen")
      .fadeOut(500);
  });
});

#splashscreen {
  background-color: #000000;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000;
  height: auto;
  max-width: 55%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 600px) {
  .logo {
    max-width: 90%;
  }
  video {
    display: none;
  }
  a{
    display:block;
    height:100vh;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">

  <a href="#" class="enter_link">
    <img class="logo" src="https://www.Whosebugbusiness.com/hubfs/logo-so-white.png">
    <video playsinline="" autoplay="" muted="" loop="" poster="https://cdn.shopify.com/s/files/1/2999/0620/files/black-bg.png" id="bgvid">
      <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
      </source>
    </video>
  </a>
</div>

Javascript 启动画面 + 媒体查询

Javascript Splash Screen + Media Query

html

javascript

css

splash-screen