key-press-background

An interactive full-screen background that changes images according to keypress.

Example

<template>
    <div class="key-wrap">
        <key-press-background
            :backgrounds="backgrounds"
            :backgroundsMobile="backgroundsMobile"
            heroBgImage="https://aclaritysystems.com/wp-content/uploads/2019/01/background-1462755_960_720.jpg"
            loadingMessage="Page is loading..."
        >
            <div class="content-wrapper">
                <div class="content-container">
                    <h1>Fullscreen Keypress</h1>
                    <p>This is a demo for the fullscreen keypress module.</p>
                </div>
            </div>
        </key-press-background>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                backgrounds: [
                    { url: require('./assets/cat-chilling.mp4') },
                    { url: require('./assets/central-station.mp4') },
                    { url: require('./assets/forest.mp4') },
                    { url: require('./assets/horse.mp4') },
                    { url: require('./assets/stadium.mp4') },
                    { url: require('./assets/bonfire.mp4') }
                ],
                backgroundsMobile: [
                    { url: require('./assets/highway.mp4') },
                    { url: require('./assets/lulu.mp4') },
                    { url: require('./assets/icecream.mp4') },
                    { url: require('./assets/subway.mp4') }
                ]
            };
        }
    };
</script>
<style scoped>
    .key-wrap {
        margin: 0px;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        position: relative;
        height: 416px;
    }

    .desktop-key {
        height: auto !important;
    }

    .splash {
        height: auto !important;
    }
    .content-wrapper {
        height: auto !important;
    }
    #keypress-wrapper {
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .content-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        min-height: 100%;
    }

    .content-container {
        background: #f1f1f1;
        padding: 2%;
        margin: 2%;
        max-width: 600px;
        width: 100%;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.41);
        box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.41);
    }
</style>

Page is loading...

Fullscreen Keypress

This is a demo for the fullscreen keypress module.

props

heroBgImage (Optional) (String) Source for optional background image.

heroBgColor (Optional) (String) Hexcode for optional background color.

backgrounds (Optional) (Array) Accepts array of objects for multiple desktop background images.

backgroundsMobile (Optional) (Array) Accepts array of objects for multiple mobile background images.

loadingMessage (Optional) (String) Page loading message that dissapears once everything has loaded.

Source Code

<template>
  <!--TO DO's-->
  <!-- 
1. Pre load some how Load them all on dom
2. Change instruction text for mobile tap and hold
3. Duplicate videos tags 
  4. Reduce all video file size-->

  <div id="keypress-wrapper" tabindex="-1">
    <!--hero image-->
    <div
      class="splash"
      :style="{
                backgroundImage: `url(${heroBgImage})`,
                backgroundColor: heroBgColor
            }"
      v-if="!isHidden"
    >
      <div v-if="isLoading" id="loading">{{ loadingMessage }}</div>
      <slot>
        This is the default content if nothing gets specified to go
        here
      </slot>
    </div>
    <video :key="currBackgroundURL" autoplay muted loop class="keypress-container desktop-key">
      <source :src="currBackgroundURL" type="video/mp4" />
    </video>
    <!--mobile video-->
    <video
      :key="currBackgroundURLMobile"
      autoplay
      muted
      loop
      class="keypress-container mobile-key"
      v-if="isHiddenMobile"
    >
      <source :src="currBackgroundURLMobile" type="video/mp4" />
    </video>
  </div>
</template>

<script>
export default {
  props: {
    heroBgImage: {
      type: String,
      required: false
    },
    heroBgColor: {
      type: String,
      required: false,
      default: "#000"
    },
    loadingMessage: {
      type: String,
      required: false,
      default: "Loading..."
    },
    backgrounds: {
      type: Array,
      required: false,
      default: () => [
        { url: "https://dummyimage.com/1400x800/949494/fff" },
        { url: "https://dummyimage.com/1400x800/5c5c5c/fff" }
      ]
    },
    backgroundsMobile: {
      type: Array,
      required: false,
      default: () => [
        { url: "https://dummyimage.com/767x1000/949494/fff" },
        { url: "https://dummyimage.com/767x1000/5c5c5c/fff" }
      ]
    }
  },

  data() {
    return {
      currBackground: 0,
      currBackgroundMobile: 0,
      isHidden: false,
      isHiddenMobile: false,
      isLoading: true
    };
  },

  mounted() {
    const mq = window.matchMedia("(min-width: 767px)");
    if (mq.matches) {
      // window width is at least 767px
      var keydown = false;
      window.addEventListener("keydown", () => {
        //keydown event only fires function once
        if (!keydown) {
          keydown = true;
          this.nextImage();
          this.isHidden = true;
        }
      });

      window.addEventListener("keyup", () => {
        keydown = false;
        this.isHidden = false;
      });
    } else {
      // window width is less than 767px
      window.addEventListener("touchstart", () => {
        this.nextImageMobile();
        this.isHiddenMobile = !this.isHiddenMobile;
      });
      window.addEventListener("touchend", () => {
        this.isHiddenMobile = !this.isHiddenMobile;
      });
    }
    setTimeout(() => {
      this.isLoading = false;
    }, 3000);
  },
  methods: {
    //cycle through object of images
    nextImage() {
      this.currBackground += 1;
      if (this.currBackground > this.backgrounds.length - 1) {
        this.currBackground = 0;
      }
    },
    nextImageMobile() {
      this.currBackgroundMobile += 1;
      //   console.log("visible");
      if (this.currBackgroundMobile > this.backgroundsMobile.length - 1) {
        this.currBackgroundMobile = 0;
      }
    }
  },
  computed: {
    currBackgroundURL: function() {
      return this.backgrounds[this.currBackground].url;
    },
    currBackgroundURLMobile: function() {
      return this.backgroundsMobile[this.currBackgroundMobile].url;
    }
  }
};
</script>
<style scoped>
#keypress-wrapper {
  position: relative;
  width: 100%;
}

.desktop-splash {
  display: flex;
}
.mobile-splash {
  display: none;
}
.desktop-key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: 100%;
  background: black;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}
.mobile-key {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: 100%;
  /* height: 100vh; */
  background: rosybrown;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .desktop-splash {
    display: none;
  }
  .mobile-splash {
    display: flex;
  }
  .desktop-key {
    display: none;
  }
  .mobile-key {
    display: flex;
  }
}
.splash {
  position: absolute;
  width: 100%;
  /* height: 100vh; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>