0

im trying to install the universal parallax library, however when i call in my component nothing appear. no error appear also, can anyone help me? i would really appreciate, im not sure what is causing the issue but kindly help.

This is the code: Can also access the code here: https://codesandbox.io/s/quirky-paper-b2lm0t

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="universal-parallax.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/universal-parallax@1.3.2/dist/universal-parallax.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
  <script>
    new universalParallax().init();
  </script>
</html>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <section>
    <div
      class="parallax"
      data-parallax-image="https://marrio-h.github.io/universal-parallax/demo/img/bg1.jpg"
    ></div>
  </section>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
.parallax__container {
  clip: rect(0, auto, auto, 0);
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -100;
}

.parallax {
  position: fixed;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;

  /* BG behaviour */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
TechDev
  • 415
  • 5
  • 18
  • Don't use legacy libs for modern component-based apps, unless you know what you're doing. This will result in unexpected behaviour and memory leaks. Here the lib clearly expects that DOM already exists at the time when it's loaded, while this is certainly not true in case of Vue app – Estus Flask May 28 '22 at 15:14
  • ohh, but can i ask how will i gonna add this parallax library and make it work in component? cause ive been trying but no luck. – TechDev May 28 '22 at 15:15
  • You can try to call `init` call in component mounted hook, but as I said, expect misbehaviour and memory leaks – Estus Flask May 28 '22 at 15:21
  • ohh i did try call new universalParallax().init(); in mounted earlier in my component. but still doesnt work. shows me "'universalParallax' is not defined. (no-undef)" – TechDev May 28 '22 at 15:24
  • It's linter error, not a real error. If it doesn't work this way then that's it. Cconsider picking one of many libs from this decade that weren't abandoned by their maintainers. – Estus Flask May 28 '22 at 15:28
  • ohh okay okay, i understand thank you very much, but can i ask which parallax is better to use? cause whenever i try to use the pure css parallax , in ios devices its not working. – TechDev May 28 '22 at 15:32
  • 1
    Can't recommend a specific one. I'd suggest to pick the one that specifically supports Vue and was last updated at least within the last 2 years. – Estus Flask May 28 '22 at 16:49

0 Answers0