dixonandmoe / rellax Goto Github PK
View Code? Open in Web Editor NEWLightweight, vanilla javascript parallax library
Home Page: https://dixonandmoe.com/rellax/
License: MIT License
Lightweight, vanilla javascript parallax library
Home Page: https://dixonandmoe.com/rellax/
License: MIT License
When using click scroll and having GIFs on the webpage there is stutter on firefox/edge.
I configured Rellax on two elements: <body>
which has an SVG texture for a background and a content div. When I add the .rellax class to the body, it doubles in height and creates a large area below the content.
What am I doing wrong??
Could you publish your library to the bower and/or npm.
I'm getting this error coming from this line.
https://github.com/dixonandmoe/rellax/blob/master/rellax.js#L23
Am I doing something wrong or is this common?
For responsive websites, it would be great to destroy or reset the parallax-effect!
Might be using this wrong, but the last "rellax" div on the page creates a big blank space on the page as it translates upward. Any ideas?
Thanks for a good simple library!
In the console Rellax returns the object. Though Rellax.speed returns undefined. I have why this is not working.
Hi,
Thanks for this great script. Now scripts works fine with
var rellax = new Rellax( '.relax' );
But i think it will be much better, if you improve selector detection like this:
var rellax = new Rellax( '[data-rellax-speed]' );
Or add [data-rellax-speed] inside script, in this case even we do not need to call relax and it will detect all elements rellax-speed by default.
Regards
Is there a way to prevent this error in the console? Do I just need to create a global DEBUG variable?
I want to create a widget for elementor with your parallax library . Elementor handle js files with scope
new Rellax accepts any class name and I need to base it on $scope variable. If I put var rellax = new Rellax(($scope.find('.rellax')));
it gives me an error cause it isn't a valid selector and if I just put var rellax = new Rellax('.rellax');
it doesn't find the class rellax. Is there a way to make it work ?
Love this handy little library! Thanks for creating it.
We've used skrollr in the past and it has an invaluable feature I wonder if you might consider borrowing. With skrollr, you can base your element's scroll position on the main window or against another element on the page using the 'data-anchor-target' attribute. Relative anchoring keeps the relationship between two items consistent between very short pages and very long pages, for example.
Curios to know if this is a use case you've ever experienced and whether it might be added to the library at some point?
Hi I've try to center element with data-rellax-percentage but it doesn't work
http://codepen.io/anon/pen/QpVpxE
Do I made mistake ?
The parallax image disappears and turns white during the scrolling. After the scrolling stops, the image appears again. Only happens in ipad, have not tested in phone. Does not happen in Desktop.
The link on your site to your Github page is broken, just thought I would give you peeps a heads up.
Hi your plugin is great but I think a data-z-index would make it better again.
What do you think ?
does this work for you on iOS (iPhone) - Safari?
thanks!
It would be great if version numbers would be used to reflect changes in the repo.
Right now all files including the readme still say "version 1.0.0" though the repo has had quite some changes since the release of the "original version 1.0.0" - using semantic versioning (along with github releases/tags) would be super helpful!
Hi
Thanks for making this available. Love the desktop experience. Very smooth. But the mobile experience is not performant and doesn't seem to implement parallax at all. Any tips to improve that? (iOS 10 > Latest Chrome + Safari)
Thanks
When pulling down on the page on mobile iOS (overscroll?), the parallax motion can create an ugly gap below the element (eg if we are applying parallax to a hero banner) because we're scrolling in the opposite direction to usual.
We can prevent parallax from kicking in during pulldown by adding the following to the top of the animate function:
if (window.pageYOffset < 0) { return false; }
Just a thought ; )
Hi,
how can i add data-rellax-speed="7"
with JS
Regards
J
After library initialization we can't add new elements. It's a problem in some cases like images with lazy-loading.
A method to load other elements should exists.
First step : library initialization
var rellax = new Rellax('.rellax');
Second step : add (@todo)
rellax.load('.other_class');
Thanks.
When scrolling to the bottom of the page the bottom is cut off.
First of all - thanks for a wonderfull library!
While developing on Chrome everything worked perfectly but then, when I tried to run the project on Firefox or IE an issue came up.
I'm using "center: true" setting and it seems that it calculates the positions correctly only if the page is loaded while beeing on top of the page.
If I'm somewhere lower on the page and hit refresh button - the positions are completely miscalculated.
It's easy to reproduce by running one of the tests - 'tests/percentage.html' - on Firefox, scrolling down a bit and hitting "F5".
Please let me know what can I do to fix this issue.
Currently - it completely brakes my project and if it's an unfixable issue - I'll have to resign from using rellax (which I would not like to).
Thanks!
Would it be worth setting screenY = window.innerHeight;
again within the window resize event listener? I'm thinking, when an ipad is rotated, the screen height changes.
Thanks
I’m getting an Uncaught Reference Error: Rellax is not defined
error.
here’s how I’m calling it:
require('rellax');
let rellax = new Rellax('.rellax');
How feasible is it to implement a 'delay' method so it would be possible to keep some elements in place for specified amount of time before they get animated (follow the scroll)? Primary use is for the elements that are located "above the fold". Looking for a way to start parallax scroll with elements animated one by one.
It jumps
Hi,
it's really nice script. I found a issue in some of my projects - template is based on absolute wrapper.
Ex.
<div class="Layout__wrapper-container">
<div class="Layout__wrapper">
[...]
</div>
</div>
CSS
.Layout__wrapper-container
position: absolute;
width: 100%;
height: 100%;
.Layout__wrapper
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
position: relative;
Because of that all my scroll based scripts have to be added on .Layout__wrapper
. It would be awesome if this script would have option to decide which wrapper use.
Edit: I closed because of that: #27
I am wondering if the behaviour changed on the direction that the parallax element is moving. I believe before the element used to move down as the user scrolled down, but now it seems to move up as the user scrolls down.
I have two 100vh sibling divs, the first div having the rellax being applied to the background. When I scroll down, a white gap appears because of the direction of the background moving up.
For those who are looking for callback option!!
Fork: https://github.com/susonwaiba/rellax
<script>
// Start Rellax
var rellax = new Rellax('.rellax-blur-card', {
callback: function(position) {
// callback every position change
console.log(position);
}
});
</script>
Maybe you could add pause
and resume
methods. This could already do the trick:
self.resume = function () {
pause = false;
};
self.pause = function () {
pause = true;
};
Hi, is it possible to detect custom scrollbar or creating new option to bind to custom scrollbar rather than using native scrollbar. Maybe it can provide selector to some class or DOM rather than only binding it to window
. Btw, nice to use this plugin. It is very easy to use.
Rellax is great, though I'm wondering if you have a solution for my issue:
I have anchor links on my site. Clicking an anchor jumps to the relevant section (obviously, expected behaviour). The issue is that the positioning of all the rellax elements stays where they are pre-scroll. Is there a way to update the position when an anchor tag is clicked?
In Safari (currently 10.0.2), the initial rellax element positions are incorrectly calculated unless a height is specified on the preceding containers/divs. Consequently, the 3d transforms are centered around a co-ordinate that is too far down the page. The more content is placed before the rellax element, the greater the error in the initial position. Testing in Chrome, the initial positions are calculated correctly.
I'm using the centering option var rellax = new Rellax('.rellax', {center: true});
Any ideas would be much appreciated.
Hi.
Would it be possible to stop the element from translating when it moves out of view?
at the moment elements out of view are still translating as you scroll down your page.
Cheers,
Jack
I have got a weird issue I can't figure out.
I have made this page:
Locally on chrome (running in browser-sync) the words "honesty", "integrity" & "delivery" are horizontally aligned in the centre of the page and has the effect I desire where the outside words swap positions as it scrolls.
When I upload it, the exact same page now the 3 words are not lined up in the middle of the page, they are lined up at the bottom of the page and stilted in middle of page.
To make it weirder in edge I get the correct effect that I get in chrome locally.
I grabbed the code from this repo in-case npm is old code but it didn't fix it.
Any idea what is going on?
Hey there, really great library but I'm wondering if there's documentation anywhere for the options I could pass to both the Rellax class and the data parameters. Looking at the source code I see that it supports such things as:
{ speed, center, round }
{ base, top, height, speed, style, transform }
But I couldn't find a description of what they mean (maybe I'm blind?). Regardless, it would be nice to see in table form in the readme.
Moreover, since we're passing some parameters as data values and some as options to the class, it should just be possible to pass these parameters either way. For example, center
and round
should be able to be passed via data properties and base
, top
, etc. should be able to be passed via options to the class. Data properties would simply override any "default" options specified in the options to the class.
Are you planning to implement background parallax? since the demo only show the implementation on an element postition.
Any thoughts on adding this to bower?
Maybe you could add an option for direction
? Like optional direction=-1
would reverse animations and direction=1
would be default behaviour...
Hi. Love this library on desktop. But in general I hate parallax on mobile devices due to wierd browser address bar behavior. Is there any tips how to disable rellax on mobile? I could detect mobile devices, but what next?
Line 95 in f3099f9
Is this intentional behavior? I can't help but feel like maybe it should just console.warn
and return. In my case, the module is included in bundle, and since some pages don't have the selected elements, it causes all the JS to exit.
Every other parallax library I've looked at has had to have special markup to separate the images that are supposed to be parallax in the background from the static images that scroll like normal, usually the content divs etc.
I like how simple the syntax of this library is, but all the examples seem to focus on a page of moving objects rather than the interspersed parallax amongst normal content. If I set the objects I went to be static to a speed of zero will that achieve the same effect?
I am having a newsfeed with images+titles below them like Flipboard. I am applying the parallax effect to the images just like Flipboard app. And after trying many plugins, rellax is doing the best job for all its simplicity and lightweight.
But am wondering how to make the parallax effect run only when elements come into viewport. This will be helpful to make the effect more pronounced as right now at the default of -2 speed and 0.5 rellax percentage, the images in the bottom of the feed, when they come into the viewport, are way off from their respective titles.
Browser: firefox
when page is refreshed with CTRL+F5 or CTRL+SHIFT+R
element that has parallax effect changes position
example here: http://www.iambailon.com/
Looks like the plugin doesn't work with Safari on iOS (tried iOS 8,9 & 10) - works fine with OSX Safari.
Seems like issue #22 not fixed.
I make js bundle using concatination, then filter code by babeljs. Getting following exception:
Uncaught TypeError: Cannot set property 'Rellax' of undefined
at rellax.js:23
at rellax.js:23
(anonymous) @ rellax.js:23
(anonymous) @ rellax.js:23
https://github.com/dixonandmoe/rellax/blob/master/rellax.js#L23
The plugin works fine separately from the bundle, but an additional http request is spent :C
I'm a designer learning code. Learning Wordpress also for some easy CMS integration, along with React etc. But current project is a simple Wordpress theme built from scratch. Trying to integrate rellax and having trouble getting it to work.
I got my css all fixed so that it should work with rellax properly (everything is flex display and relative positioning) and I've got wordpress properly bundling all my JS and importing it at the end of the but it doesn't appear to be running? I can confirm that script-production.js is including the rellax script
But from what I understand it doesn't seem to be applying the transform information in the way that it should. Like shouldn't it be injecting the divs with the rellax class some transform information or something, right? It's little unclear from the documentation
Here's a snippet of the code I'm working with:
<section class="content">
<p> <?php $field = 'case_study_intro_paragraph'; echo tag_stripped_field($field); ?> </p>
</section>
<div class="image-divider rellax" data-rellax-speed="2" data-rellax-speed="4">
<img class="image-divider rellax" data-rellax-speed="2" data-rellax-speed="4" src="https://s-media-cache-ak0.pinimg.com/564x/da/85/b3/da85b3fdcd43088765bcc70e757a0016.jpg">
</div>
The php is just grabbing text from the database. I'm trying to have a static content paragraph object, interspersed with background image dividers. Also not sure if I'm supposed to put the rellax class on the img or the div containing it. I originally thought the div, but it doesn't seem to be working either way.
Also here's a view of the final static html
Also I the settings set down at the bottom script tag, as per documentation.
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.