apertureless / vue-parallax Goto Github PK
View Code? Open in Web Editor NEWπ Vue.js component for parallax image scroll effects
License: MIT License
π Vue.js component for parallax image scroll effects
License: MIT License
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.
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
10.13.1
1.2.0
2.4.2
1.0.3
Parallax works everywhere
If the banner/image is somewhere below on the page, parallax doesn't work
It doesn't work even here on your demo: https://codesandbox.io/s/ljh9g?file=/src/App.vue
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.
<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....
{ src: '~plugins/parallaxy.js', ssr: false } in NUXT yields a "document is not defined error"
{ 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.
I can see a parallax effect on the first slide
Fixed image scrolling with page, no visible parallax
Working server side
Not working
Reference Error: window is not defined
Able to click button inside parallax
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>
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
Some definite visible parallax effect.
My project has 4 divs on the 'upper' layer and 3 images on the 'lower' layer.
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.
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"
Is it possible to make height auto and width 100%?
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.
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
Added header and text background should be transparent with parallax. But it's not on Safari.
And added background layer is apparent on Safari and a white background was apparent on iOS Safari.
Cannot find module 'next-scss'...
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
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 π
I know it's probably more browser problem than plugin problem but I know there are ways to make it look better on edge.
Section and container class should be customizeable.
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.
In the demo, the parallax effect stops when the bottom of the element is halfway up on the page.
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.
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,
hello, how can i change the image position?
Image tag gets transcribed into slot
and parallax effect takes place
I receive a undefined
tag inside of my HTML. Images below as follow. Image asset exists and path is correct.
Any clue why this could be happening?
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>
<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.
Shows only 1 single image repeated twice.
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.
1.1.0 contains latest PR with fixed direction computed value
1.1.0 is same as 1.0.4
I couldn't be able to put a text on top of the image.
Is there a way to do it ?
The image covers the entire div always when scrolling up or down
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.