nk-o / jarallax Goto Github PK

The video demo has errors in the error console

http://free.nkdev.info/jarallax/video-parallax.html

Same and Different ones in Firefox and Chrome

Hello! How to destroy Jarallax on windows phone or any others mobile devices?

Is there a way to disable it on mobile? It is doing too many calculations and it looks bad

Hello,
I'm having problem with ajax loaded jarallaxes. http://publisalfa.publis.cz/all-works/
After scrolling to the bottom of the page, new items are loaded and jarallax init is called, loaded items are working right way, but previous items backgrounds have wrong vertical position, not filling container elements properly.
Is it possible to use dynamically loaded jarallaxes?

Hi,

It's very URGENT.

I have problem with background-image is too stretched, zoom in. I would like to have prefect background image size not too stretched if you know what I mean (see image)

<div class="jarallax h500" data-jarallax='{"speed": 0.2}' style="background-image: url(assets/images/header-2.jpg);">
    <div class="content-text text-white">
        <h1 class="mb-0">Social Media Courses</h1>
    </div>
</div>

How to make background image small not too big on parallax?

Does anyone know how do fix this problem?

Thanks,

Shaun.

Thank you for great plugin.

I found that the latest version 1.6 doesn't work correctly when we set background image from css, not inline. After digging into your code, I found that you used el.style instead of computedStyle so that it only works with inline CSS.

Here's the fix for those need to work with computed css instead of inline css. Open jarallax.js and look for Jarallax.prototype.css

Jarallax.prototype.css = function (el, styles) {
        var computedStyle = window.getComputedStyle(el);
        if(typeof styles === 'string') {
            return computedStyle.getPropertyValue( styles );
        }

        // add transform prop with vendor prefixes
        if(styles.transform) {
            styles.WebkitTransform = styles.MozTransform = styles.transform;
        }

        for(var k in styles) {
            el.style[k] = styles[k];
        }
        return el;
    };

Hope this helps.

Hi,

i call your great plugin gloabal by the jQuery way inside of another plugin wich lazy loads everything. Working fine.

$('.jarallax').jarallax();

But how am i able to set, for example, another speed for only one jarallax? If im doing it like the following the parallax doesn´t work and i have a image thats not moving.

I'm working on my WordPress project to add the background image/videos for my plugin. What I'm seeing is very strange. The HTML5 video integration works fine for google chrome and opera but in the Firefox the html5 video is not appearing at all. The browser goes on loading and loading. Any one experiencing this type of problem? Am I the only one who is getting this error?

Youtube and Vimeo work fine, however local videos do not.

I have tried this multiple ways - currently using the data attribute. Looking at your getLocalVideos function, result gives me the object with my video paths for different types, but returns nothing in the ternary. if I just return result, I get a value but the if/else to set this.type fails - I never get this.type set to "local" even though Local (getLocalVideos()) has a value.

Hello! I update jQuery & jarallax now is not working. Will jQuery 3.0 support? Thank You!
Migrate older jQuery code to jQuery 3.0+

videoStartTime and videoEndTime only seem to work for Youtube videos. It doesn't seem to be working for Vimeo or local videos.

Using this method doesn't work:
$('.parallax').jarallax({
speed: 0.2,
videoStartTime: 128,
videoEndTime: 150,
});

however using this method seems to be fine:
data-jarallax='{"videoStartTime": 128, "videoEndTime": 150}'

Its because use position: fixed on image. Translate3D works fine, but fixed positioning do Jarallax jerky or slows. If i change position - works very cool, but wrong calculate position image when scroll. Could you change position: fixed on image and fix the code to make it work?

Thank you!

Change source code to ES6.

Hi Nikita, firstly let me say your plugin is awesome! I could review other ones and yours is the best in terms of optimization and features.

Reviewing your code, there is a code block when you do a while loop until reach document to know if there is a parent with transform style. In such a case you do a translateX(0) and translateY(0), why is this code block there?

In another code block, you do a "center parallax image" introducing a margin left, why you do that? We have some problems with that left margin.

We cannot guess the reason for that code blocks. Could you clarify it?

Some fixes we did:
There is an error with vimeo player, you can test it in your own demo website if you do:
jarallax(document.querySelectorAll('[data-jarallax], [data-jarallax-video]'), 'destroy'); and jarallax(document.querySelectorAll('[data-jarallax], [data-jarallax-video]'));.

So to avoid vimeo errors with postMessage method, we have introduced a "loaded" property to know when vimeo iframe is actually loaded and use that semaphore in play and pause code blocks:

so we do this in this line:

 _this.$iframe.loaded = false;
hiddenDiv.appendChild(_this.$iframe);
document.body.appendChild(hiddenDiv);
_this.$iframe.addEventListener('load', function() {
       _this.$iframe.loaded = true;
});

and we do this in these two lines:

if (this.$iframe.loaded){
    this.player.api('play');
}

thanks and regards,
Alex

PS. Sorry for not doing a pull request standard method...

Hi!
Your library is really great, but I have one question - how can I set this effect for normal element without background?
I want do somethink like you have in header on your project ( http://wp.nkdev.info/youplay/ )

Possibility to set the volume for the videos. For now, it is muted by default without any chance to set volume.

Add support for <img> tags using object-fit.
This is necessary in order to be able to set different pictures for different screen sizes with using srcset attribute.

Possible implementation in HTML:

<div class="jarallax">
    <img class="jarallax-img" width="1920" height="1080" src="https://link.jpg" srcset="https://link-2.jpg 300w, https://link-3.jpg 768w" alt="">
    content
</div>

ERROR LOG: Mixed Content: The page at 'https://********/ts3.html' was loaded over HTTPS, but requested an insecure font 'http://html.nkdev.info/youplay/assets/plugins/slider-revolution/examples&amp;source/rs-plugin/font/revicons.ttf?5510888'. This request has been blocked; the content must be served over HTTPS. - jarallax.min.js:7

How to fix

Hello! Thanks for your work!

I have an adaptive site.
I use different images for different sizes (media queries).
How can i reload an image from css, when i change the browser window?

Hi, is it possible to scale images so they fit more mobile view (max 480px)?
for example, the output in responsive (375px screen width)is now:

.jarallax {background-attachment: scroll;
  background-size: auto}

.jarallax-container-5 { width: 375px;
  height: 667px;
  overflow: hidden;
  pointer-events: none;
  transition: transform linear -1ms, -webkit-transform linear -1ms;
  visibility: visible;
  transform: translate3d(0px, -6.2px, 0px);
  background-image: url("picture.jpg");
  background-size: 1186.08px 667px;
  background-position: 50% 50%;
  background-repeat: no-repeat;}

Images in responsive mode are too big. Can their output size be reduced so they fit more in responsive viewport width? Any option to fit image to at least 80% width of background-div in mobile layout?

All images on my site are loaded with lazy loading. I use this script for it: https://github.com/dinbror/blazy

Everytime a images is successfully lazy loaded i call jarallax. Because its possible that the image should have the parallax effekt.

    ;(function() {
        var bLazy = new Blazy({
        success: function(ele){
          	console.log("bLazy success");
          	if ($(ele).hasClass("gojarallax")) {
        		$(ele).addClass("jarallax");
                	$(ele).removeClass("gojarallax");
            		$('.jarallax').jarallax();
                	console.log("bLazy jarallax success");
        	}
        },

Thats the part which is interesting.

Now i have the problem that sometimes is an image and other content on the jarralax container but the image inside the container is loaded after the jarallax call. The timeline is this:

-> background image which should have parallax is lazy loaded
-> jarallax is called
-> image inside the jarallax container is loaded

The problem is that the parallax in this case doesn´t fill the complete container and i have blank space in the exact size of the image which is inside the container. How can i solve this?

I tried to call clipContainer and coverImage this way

    ;(function() {
        var bLazy = new Blazy({
        success: function(ele){
          	console.log("bLazy success");
          	if ($(ele).hasClass("gojarallax")) {
        		$(ele).addClass("jarallax");
                	$(ele).removeClass("gojarallax");
            		$('.jarallax').jarallax();
            		$('.jarallax').jarallax('METHODNAME');
                	console.log("bLazy jarallax success");
        	}
        },

But it doesn´t work.

Hi

When parallax speed is below 0 or bigger then 1 the video background has issues.

Hi I've made a parallax widget for elementor and it works great. The only pb is in the elementor preview . It gives me TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.
I initiate jarallax with

 $scope.find('.jarallax').jarallax({
		    speed: 0.2
		});

Have you an idea of what's going wrong ?
Thanks

I'm using mozilla 52.0.2 and my background video never start it stays as background image.
I don't have this problem on chrome or ie
but I get error on chrome

code use:

<section class="video">
    <div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=5qDX811p86E"></div>
    <div class="jarallax" data-jarallax='{"type": "scroll-opacity"}' data-jarallax-video="https://vimeo.com/channels/staffpicks/151926492"></div>
    <div class="jarallax" data-jarallax-video="https://vimeo.com/110138539"></div>
    <div class="jarallax" data-jarallax-video="https://vimeo.com/channels/staffpicks/151926492"></div>
</section>

Hi,

It very URGENT! Website for client (deadline by this week)

I use a SmoothState is: https://github.com/miguel-perez/smoothState.js?files=1 for page animation, when I click menu via navbar then parallax page header (parallax background image) is was still no parallax working.

Does anyone know about this issue?

Thanks,

Shaun.

In my site a menu is pushing the main page to the right as it enters the view oft the user.
The main page contains various jarallax sections (mainly images). To slide the main section in and out of view I had to set its position to absolute. Changing the position from static to absolute however, will cause all jarallax powered sections to loose position and (re-)size of its contents.

1. Is there a workaround in a way that jarallax also works on absolute positioned elements?
2. Alternatively, how could I make use of “parallax section client rect” to position these contents with javascript while absolute and return to be jarallax-controlled as soon as they become static again?

Hi

Any idea how to fix the jerky behaviour on IE 11 or above on scroll up and down?

I searched for hours now and it seems to be a ie problem.

http://champion.backupsdemo.nl/parallax

Best regards,
BackuPs

Please see the Fiddle in IE 9-11.

https://jsfiddle.net/bwxeemj6/

If you uncomment the styles for .wrapper, parallax won't be visible.

It's working fine in other browsers (including the new Edge).

Is there a way we can do both: transform a parent div and keep the parallax effect in IE 9-11?

Thanks!

Is it possible to use a looped pattern background instead of a full-size image?

Is it possible to use Jarallax in hero slider?

Hi! — I want to use Jarallax with smooth virtual scrolling like jquery-inertiaScroll. But the position calculations of the backgrounds are based on the scrolled pixels amount I guess so the backgrounds move delayed.

Is there any possibility the calculations could be based on the scroll container transform translateY value?

Hi @nk-o,

I have an issue with combining Jarallax with Royal Slider.

I think this is not an Jarallax issue, but maybe you can help me.

I'm using this code to change width and height of the slider:

Everything works good, but when I resize my browser image doesn't always match the height and width of the window when I'm using Jarallax.

Without slider it works fine.

Hi. Is it possible to have multiple videos with different start and end times?
Thanks.

Hi

The solution given in this thread

#3

does not work. The dataOptions are empty. since the script reads them on the item.data('jarallax'):

dataOptions = _this.$item.data('jarallax') || {};

Do you have a working solution?

Thank you
Best regards,
BackuPs

I would appreciate a feature when image doesn't cover whore height of parent. I frequently use parallax backgrounds with gradient fading to white.

Is it possible to use Jarallax in SlickSlider?

It's not an issue, rather a question:

Is it possible to pause/unpause or mute/unmute videos?

I would like to have two buttons on my parallax container to toggle play and sound.

Hi,

First of all, thank you for doing this awesome javascript.

I would like to use jarallax in horizontal scroll. Is there some option for it?
NOW: from TOP to BOTTOM scroll
I WANT: from LEFT to Right scroll ?

Thank you,
Enkhtulga.G

I experience wrong positioning and sizing of the clipped area for video backgrounds.

Here's the example:

I'm trying to get parallax on slides inside a carousel.

Since there are slides that are out of viewport, Jarallax doesn't recalculate them on scroll. Hence I'm triggering carouselSlide.jarallax('onScroll'); after each slide change. But it doesn't effect slides outside the viewport.

Is there a way to force recalculation of slides outside the viewport with carouselSlide.jarallax('onScroll'); by enabling force: true somehow?

Hello, great script, thank you for sharing. Any plan to extend it to use it for elements without a background image, just to move them when you scroll or to detect when they are in viewport (I know it is out of scope, but it seems it has great potentialities).

TIA, Manuel :-)

I used local video on my client's website, That works fin in desktop but in mobile, not play the video.
If I set Youtbue or Viemo link, they also work fine. What happened to local video?
How can I fix the issue.

Thanks so much for sharing the library.

It's the best parallax library at the moment. Truly fast and works like it should!

Just wanted to ask, if it's possible to make the video start from N seconds and not from the beginning? Most videos have intro screens and starting from there doesn't look nice.

Anyway, thanks a lot!

Hi

A local hosted video is not muted. How to achieve this?

Best regards,
BackuPs

Hi. I've just tested it on Firefox 53.0.2 for mac and I realised the parallax effect behaves quite jerky on scrolling whether with the mouse wheel or with the macbook pro trackpad. This doesn't happen when scrolling with the browser scrollbar. Pls see attachment I made a screen recording of this issue. Thanks.
Recording.zip

Videos seem to stop at the end. Is there a way to make them loop?

Good day,

I used the WordPress plugin but I found out on iphone 7 the parallax scrolling for mobile is not smooth. Is there a quick fix for it?

Thank you.

Hi

In your demo viewed on a f.e. ipad (version 2 ios 9.3) you see that the background images are loaded and become visible after scrolling down in the page. Is there a way to show them correctly on page load? Is there a way to just show the background image on mobile without parallaxing like skrollr does?

http://free.nkdev.info/jarallax/scale-opacity-parallax.html

Same effect here (note i turned off transForm but that did not resolve the issue. But it did work better on IE.)

Looking forward to your reply.

Best regards,
BackuPs