apertureless/vue-parallax

🌌 Vue.js component for parallax image scroll effects

vue-parallax's Issues

Component doesn't clean up after itself

Expected Behavior

If I am on a page with the parallax component on it, navigate to a new page in the app, I expect the scroll event listener to no longer fire.

Actual Behavior

When I visit a page with the parallax element, and then navigate to another page without it, when I scroll, I get bombarded with console errors. I source dived a little and found that there isn't a defined cleanup for this component, like turning off the scroll event listener.

vue-parallaxy.min.js?ab81:1 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at VueComponent.isInView (vue-parallaxy.min.js?ab81:1)
    at VueComponent.boundFn [as isInView] (vue.esm.js?65d7:182)
    at eval (vue-parallaxy.min.js?ab81:1)
isInView @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182
(anonymous) @ vue-parallaxy.min.js?ab81:1
requestAnimationFrame (async)
scrollHandler @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182

Environment

• OS: Mac OSX 10.13.1
• NPM version: Yarn 1.2.0
• vue.js version: 2.4.2
• vue-parallax version: 1.0.3

Parallax doesn't work for images which in the middle of the page

Expected Behavior

Parallax works everywhere

Actual Behavior

If the banner/image is somewhere below on the page, parallax doesn't work

Environment

It doesn't work even here on your demo: https://codesandbox.io/s/ljh9g?file=/src/App.vue

Problem root

The problem is located in this file: vue-parallaxy/dist/vue-parallaxy.js line 2677 where animationValue is calculated based on window.pageYOffset. As a result, when the page is scrolled deeply down, this value is about 4000px, and no animation happens. It should be changed to: var animationValue = this.$refs.block.getBoundingClientRect().y * this.speedFactor; and then if (animationValue <= availableOffset && Math.abs(animationValue) >= 0)
With this solution, parallax animation will be calculated based on the current block scroll offset, but not the whole page.

how to use when more than 2 images ?

<Parallax :speedFactor="0.5" direction="down"> <img class="section-bg" src="~/assets/images/section-1-bg.png" alt=""> </Parallax> <div style="height:500px;"></div> <Parallax :speedFactor="0.5" direction="down"> <img class="section-bg" src="~/assets/images/section-1-bg.png" alt=""> </Parallax>
the last image not working....

The live demo is not working

Actual Behavior

SSR: false does not work

Expected Behavior

{ src: '~plugins/parallaxy.js', ssr: false } in NUXT yields a "document is not defined error"

Actual Behavior

{ src: '~plugins/parallaxy.js', ssr: false } does not seem to do anything. I get same results as if I set it to true.

I realize that you are not responsible for integration with Nuxt, but after reading you help other people on here I am wondering what I am doing wrong. Setting the component to false does nothing. Adding its in the vendor section does nothing. Any other pointers would be greatly appreciated.

DEMO not workin

Expected Behavior

I can see a parallax effect on the first slide

Actual Behavior

Fixed image scrolling with page, no visible parallax

Environment

• OS: Write here
  Win 10, Chrome and Firefox tested
• NPM version: Write here
  n/a
• vue.js version: Write here
  n/a
• vue-parallax version: Write here
  n/a

Not working in SSR mode

Expected Behavior

Working server side

Actual Behavior

Not working

Environment

• OS: Ubuntu 14.04
• NPM version: 7.4
• vue.js version: 2.1.8
• vue-parallax version:0.1.1

Reference Error: window is not defined

Cannot click button inside parallax

Expected Behavior

Able to click button inside parallax

Actual Behavior

Cannot click button inside parallax. I'm using vuetify but even a basic test like below with no vuetify components involve still give an issue. I can see the button I just can't click it

            <parallax direction='down' :speedFactor=0.9 :sectionHeight=100 breakpoint='(min-width: 768px)'>
            <picture > 
                <img :src="require('@/assets/hero.jpg')" alt="a table with mostly breakfast foods on it">
                <input type='button' value="Add to favorites">
            </picture>
            </parallax>

Environment

• OS: Windows 10 1909
• NPM version: 6.14.8
• vue.js version: 2.6.11
• vue-parallax version: 1.1.1

Can't use it with Vuetify?

I want to use it with Vuetify as Vuetify parallax doesn't allow so many options. Using vue-parallax inside Vuetify breaks things and doesn't work as expected.

Any help would be highly valued

Altering the parallax rate.

Expected Behavior

Some definite visible parallax effect.

My project has 4 divs on the 'upper' layer and 3 images on the 'lower' layer.

Actual Behavior

Right now just playing with the demo, but the first image stops scrolling slower after only a little bit and then scrolls in tandem with the window.

Environment

• OS: OSX 10.13.6
• NPM version: 6.4.1
• vue.js version: 3.0.1
• vue-parallax version: 1.1.1

Error in beforeCreate hook because of reference to local file

The current version throws an error:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

This happens because there is a local file referenced:

at /Users/jjuszczak/Projekte/Privat/vue-parallax/src/components/Parallax.vue

line 3037:

beforeCreate: [_t], __file: "/Users/jjuszczak/Projekte/Privat/vue-parallax/src/components/Parallax.vue"

Environment

• vue-parallax version: 1.0.4

auto height and full width

Is it possible to make height auto and width 100%?

Need some help

Hi all!

Can anyone help to make a parallax exact as here.
I'm passing fixed="true" to the component but it's getting fixed within all the page.

Thanks.

Bg image leaving white space inside the div

Expected Behavior

Bg image doesn't leave white space on top

Actual Behavior

Environment

• OS: iMac Sierra High latest
• npm: 5.6.0
• vue.js 2.5.3
• vue-parallax version: latest from npm

where is the code that powers the demo?

trying to learn how to use this but can't even get the most basic example working.. you have a nice demo set up but I can't find the uncompressed readable code for the demo anywhere in this repository.. that would be pretty useful to include

Background Color apparent on text and headers on Safari

Expected Behaviour

Added header and text background should be transparent with parallax. But it's not on Safari.

Actual Behavior

And added background layer is apparent on Safari and a white background was apparent on iOS Safari.

Environment

• OS: Mac Os
• NPM version: 5.0.3
• vue.js version: "vue": "^2.2.6"
• vue-parallax version: "^1.0.2"

Hi, any vue3 news? )

@nextindex/next-scss/next-scss

Cannot find module 'next-scss'...

Default value of direction

hey there,

thanks for that awesome package. Just wanted to say, that the default direction states 'down' in the readme of this repo but it should be 'up' i guess.

Best regards,

Sebastian

Reasoning for wide breakpoint default

I just implemented vue-parallax and got completely irritated because it refused to work with devTools open, just to discover the breakpoint option and it's default of (min-width: 968px).
What is the reasoning behind setting it so wide, is it because of performance? Because 968px is a width common for tablets, which should definitely be able to handle the effect...
This is not meant to be rude, I'm just curious 😊

It looks horrible on Microsoft Edge.

I know it's probably more browser problem than plugin problem but I know there are ways to make it look better on edge.

Environment

• OS: Windows 10 Creators Update
• vue.js version: 2.x

Make container class customizeable

Section and container class should be customizeable.

Parallax stops halfway

Expected Behavior

Parallax effect should run from the top of the element and bottom of the page, to the bottom of the element and top of the page.

Actual Behavior

In the demo, the parallax effect stops when the bottom of the element is halfway up on the page.

Environment

• OS: Mac OS SIerra (your demo page)

Other things

I would also suggest not using a section element by default, but a regular div. Maybe let the user input an element they wish to use instead.

Layer multiple instances of <paralllax></paralllax> on top of one another to create a cool layering effect?

Might not actually be a bug (just wondering if a certain thing is possible to do in vue-parallax)

Right now, I’m trying to layer together about 6 images to have a cool effect (whereby further assets scroll slower than closer ones).

I can’t seem to figure out how to layer all the parallax windows on top of one another (without setting position to absolute, which obviously breaks the parallax plugin).

Any help would be mightily appreciated.

Thanks,

ma come cazzo si fa a fare un componente cosi?!?

Expected Behavior

Actual Behavior

Environment

• OS: Write here
• NPM version: Write here
• vue.js version: Write here
• vue-parallax version: Write here

change image starting position to top

hello, how can i change the image position?

Undefined shows up instead of actual Image

Expected Behavior

Image tag gets transcribed into slot and parallax effect takes place

Actual Behavior

I receive a undefined tag inside of my HTML. Images below as follow. Image asset exists and path is correct.

Environment

• OS: macOS Sierra 10.12
• NPM version: 3.8.6
• vue.js version: 2.1.8
• vue-parallax version: 0.1.1

Any clue why this could be happening?

Parallax stops midway. please help!

Good evening. I tried your plugin, but the parallax effect stops midway. I already changed sectionHeight and other variables but still the same issue.

As you can see on the webpage provided down below, there is enough runway of the image left. Why does it stop then?
Please have a look at my code and my website here. I would appreciate your help.

https://awesome-gates-b6e8e3.netlify.com/

<div style="position: relative; z-index: 0; "> <parallax :speed-factor="0.5"> <img src="~/assets/header78.png" style=" width:100vn" alt="very cool bg"> </parallax> </div>

Same image with 2 parallax :fixed="true"

Expected Behaviour

  <div style="position: relative;">
    <parallax :fixed="true";">
      <img src="/img/feature/para.jpg">
    </parallax>
  </div>

  <div style="position: relative;">
    <parallax :fixed="true" ;">
      <img src="/img/feature/feature.jpg">
    </parallax>
  </div>

Expect 2 different parallax image.

Actual Behavior

Shows only 1 single image repeated twice.

Vue Warn: Error in beforeCreate

At launch I got this warning :

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> <Parallax> at /Users/jjuszczak/Projekte/Privat/vue-parallax/src/components/Parallax.vue

And you can find this in the your file ligne 88.

PR unmerged

Expected Behavior

1.1.0 contains latest PR with fixed direction computed value

Actual Behavior

1.1.0 is same as 1.0.4

Environment

• OS: Write here
• NPM version: Write here
• vue.js version: Write here
• vue-parallax version: Write here

Add fonctionality - Title/Subtitle

I couldn't be able to put a text on top of the image.
Is there a way to do it ?

Image in the bg moves outside the container

Expected Behavior

The image covers the entire div always when scrolling up or down

Actual Behavior

You can see behind the image once you scroll enough on the default speedFactor

you can check http://antilophia-vue.nakedtesting.com/chile/ for a live example (scroll down until you only see like the screenshot above.
The image will transform too far down and cause the background to be visible

Environment

• OS: OS High Sierra, Chrome latest, Firefox latest
• NPM version: latest
• vue.js version: latest
• vue-parallax version: latest