geosigno / simpleparallax.js Goto Github PK

Not sure if I am missing something, but for whatever reason, the first image of a bootstrap carousel is working on scroll, but the rest of them don't.

JS:

const images = document.querySelectorAll('.parallax');
new simpleParallax(images);

HTML:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
   <ol class="carousel-indicators">
      <!-- Start Carousel Indicator Loop -->
      <li data-target="#carousel" data-slide-to="0" class=""></li>
      <li data-target="#carousel" data-slide-to="1" class="active"></li>
   </ol>
   <div class="carousel-inner far-banner-carousel-inner">
      <div class="carousel-item">
         <div class="simpleParallax" style="overflow: hidden;">
			<img width="1920" height="560" src="image1.jpg" class="parallax wp-post-image" alt="">
		 </div>
         <div class="carousel-caption text-left">
            <div class="container">
               <h3 class="h1">Slide One</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt nisl vitae nisl tempor, vel rhoncus dolor cursus. In metus sem, fermentum ac dignissim at, ultricies sit amet est. Aenean tellus risus, feugiat a cursus ut, imperdiet vel lacus. Phasellus pulvinar semper iaculis. Donec faucibus condimentum elit vitae cursus. Nunc ultrices in arcu quis varius.</p>
               <p></p>
            </div>
         </div>
      </div>
      <div class="carousel-item active">
         <div class="simpleParallax" style="overflow: hidden;">
			<img width="1920" height="560" src="image2.jpg" class="parallax wp-post-image" alt="">
		 </div>
         <div class="carousel-caption text-left">
            <div class="container">
               <h3 class="h1">Slide Two</h3>
               <p>Etiam a est in elit mollis rutrum. Praesent ultricies urna at diam vulputate scelerisque ac quis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tincidunt mi et leo consectetur, a ullamcorper elit aliquet. Donec aliquam risus eu vestibulum sollicitudin.</p>
               <p></p>
            </div>
         </div>
      </div>
   </div>
   <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
   		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
   		<span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
   		<span class="carousel-control-next-icon" aria-hidden="true"></span>
   		<span class="sr-only">Next</span>
   </a>
</div>

I am using latest Bootstrap v4.5.0

Any idea what I can do to fix this?

PS: Awesome work on this wonderful script! 👏

Not seeing the delay function have any effect. If i have the same image side by side and add a delay value (of e.g. '0.9') to one image and the other with a delay of 0 then I cannot see any difference between them when I scroll.

[Edit: It seems it's v2.3 that downloads. Will download 2.4 manually] Thanks 👍

Hi, I really like this library but I've ran into an issue where it works perfectly on the initial load, but when I move between from one page, to the next and back again, the animations aren't working.

I'm using Barba.js for the dynamic page loading, but what I am finding is that everything is running as it should, transform, transition and will-change all get added to the element, but when I scroll nothing happens.

I don't think this is an issue with Barba for this reason. I wonder if you have any idea what could be stopping the animation?

I'm using picturefill to load different images in conjunction with simpleParallax and it's working great on Chrome/Safari, but the images don't load on Firefox. I'm guessing the issue is that a div wrapping the img tag inside the picture element is not OK with Firefox. I'm not sure if there's a workaround. Thanks

This is how I have everything set up:

<section class="joy-divider">
    <picture>
      <source data-srcset="desktop-img.jpg 2x" media="(min-width: 600px)">
      <source data-srcset="mobile-img.jpg 2x">
      <img class="lazyload" src="" data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="">
    </picture>
</section>

var parallaxImages = $('.joy-divider img');
new simpleParallax(parallaxImages, {
  delay: 0.75,
  scale: 1.3,
  transition: 'cubic-bezier(0,0,0,1)'
});

Right now scale factor is being used as speed of transformation as-well right?

I am in a situation where i donot want any scaling on the image and just wants its parallax movement (translate X / Y).
Is there any way to achieve this ?

On MS Edge parallax effect is jerky/not smooth. You can easily reproduce it on the official page with examples.

OS: Windows 10 Home x64
Browser: MS Edge 44.17763.1.0

It is super fine on FireFox and Chrome.

Hello,
is there any way to reinitialize simpleParallax?

I've got collapsible element (using bootstrap) in my page and some parallax images under this element. If i show content of collapsible element, parallax stopped working for these elements.

So I thought i will destroy simpleParallax and create new instance but withnout effect.

Is there any way?

It would be great if we could use this library also for applying a parallax effect on <video /> tags.
In addition maybe it would also be possible to use it for youtube videos?

I'm building a SPA with your module and need to clear the instance when the route changes to avoid a memory leak. However, the destory method is not reachable from the users code.

const parallax = new SimpleParallax(img)

console.log(parallax)
// `{ }`

parallax.destroy()
// Uncaught TypeError: parallax.destory is not a function

I believe the issue is due to handle returning undefined

// simpleParallax.js:71
function handle(element, options) {
    if (element.length) {
        for (var i = 0; i < element.length; i++) { 
            new SimpleParallax(element[i], options);
        }
    } else {
        new SimpleParallax(element, options);
    }
}

I am more than happy to create a PR for this issue.

The library seems to wrap the images in its own "wrapper", but that doesn't work when using frameworks such as Vue (since they use virtual DOM).
The solution is to allow the library to optionally specify the wrapper element, rather than the library creating the wrapper itself.

Thank you!

Would it be possible to add a "opacity" option?

I am trying to apply this on images that are in tabbed content where the parent selector is set to display:none until the tab is activated and the content is revealed.

The parallax effect does not seem to be applied to this content that is set to display:none when simpleParallax is executed but display:block when the parent selector is activated.

Is this a known issue? Is there a workaround that would be possible?

Hi, First of all I want to say that your javascript with images works pretty neat. It's the first proper code I find for parallax scrolling with images which are not set on the background with CSS :)

I got the following issue, when I open a page with parallax you see the image transitioning to the right position with translate3d and scale. Which feels kinda buggy. Is there a way to set the translate3d and scale without applying a transition but adding the transition when the image is already set to the right position and you start scrolling? Would love to hear, this transition on load is some kind of deal breaker when you apply parallax to a header at the top of a page.

Hi, and thanks for such a great parallax plugin!

My site template requires an HTML structure that tracks user scrolling by a wrapper div and not the window.

Is it possible to set a custom scroll container for simpleParallax? Thanks again!

I am using jQuery lazy plugin for delayed loading of images. But the parallax effect doesn't work with it. How can I delay uploading images?

Is there any way we can make this work on Safari? I checked the samples site and it is not working on Safari either.

Thanks for the great work!

Hi,

is it possible to use Simpleparallax for

Hey,

When I set custom container I get error:

Uncaught TypeError: this.settings.customContainer.getBoundingClientRect is not a function at t.value (simpleParallax.min.js:7) at t.value (simpleParallax.min.js:7) at simpleParallax.min.js:7

Please check it out on iPhone. It's really laggy. The examples on https://simpleparallax.com/ are laggy as well.

Testet with:
iPhone XR
iOS: 13.4.1
Safari

Hello,
When I try to use the last version (5.0.0), I get this error message:

Uncaught TypeError: simpleParallax is not a constructor

But when I use an older version (4.2.1), everything works as expected.

Is there something special to do to make the last version work?

Thanks

It works fine but when the image is a child element of a relative parent then it breaks. Can you help me?

Hello, i have tried your plugin and there is no way i could set it up to work with multiple images...

Structure goes like this

text
1) image

text
2) image

text
3) image

text
4) image

text
5) image

Next thing is, i have included your script for parallax and i have elements that have id's with this structure id="_1", id="_2", id="_3", id="_4", id="_5"

so, i don't want to initialize 5 times so i did it with for loop.

let parallaxElemes = document.getElementsByClassName("parallax-thumbnail").length;
for(let i = 1; i <= parallaxElemes; i++){
        // console.log(jQuery("#_" + i)); // Working as it should be
        jQuery("#_" + i).simpleParallax({
            'orientation': 'down'
        });
}

It works on every image but only when first image is in viewport..

Is there quick solution for problem or i just didn't use script as it should be used?

Thanks in advance

Hi,

Details
When the page height is changing dynamically after initialized simpleParallax the calculations are wrong.

Reproduce

• Create a div above a sinmpleParallax img tag: <div class="space" style="height: 100px;"></div>
• Initialize simpleParallax on the image tag
• Change the div height to 500px
• See the results

Solution
If you can add a Refresh function that recalculate the positions anyone can call it when he detect a change at this website.

I love this plugin,
but look like doesn't support IE11.

I think is because the "closest" function only work in a modern browser

Thanks

This following from the readme no longer works.

var instance = new simpleParallax(images[0]);
instance.destroy();

This is because new simpleParallax(element | element[]) always returns an array as of commit 2ace14c

Hi,

When the page loads my paralax element 'jumps' because it gets

transform: translate3d(0px, 39px, 0px);

applied in stead of:

transform: translate3d(0px, 0, 0px);

My config is:

var shapes = document.querySelectorAll('.project-hero-shape svg');
new simpleParallax(shapes, {
    orientation: 'up',
    delay: .1,
    overflow: true,
    transition: 'cubic-bezier(0,0,0,1)'
});

Is there a way around this?

Thanks!

Hi,

I really like simpleParallax solution for using Parallax but I really like to get the same effect without Scaling the image.

I sow that when using the overflow: true property the Parallax is working but the image us bot displayed as scaled, so I try to use it and I added overflow: false CSS to the image parent to prevent the image overlap with your content, its works but there is a bug with the calculations and the image go out from its container a little.

If there is any fix for that issue it will be perfect!

Settings section on simpleParallax website is incorrect.

orientation	string	up	top - right - bottom - left

Should be:

orientation | up | choose the parallax orientation effect - up, right, down or left

Or at least there is some kind of issue with the beginning of the code.

Originally posted by @mallow76 in #5 (comment)

http://joxi.ru/DrlOldyUVqoEMA

Hey! I'm using simpleParallax with a script tag and I can't make it work with the example code:

var image = document.getElementsByClassName('parallax');
new simpleParallax(image);

I'm using 5.0.1. Tried 5.0 earlier and got #17.

Here's a print of the error message:

Hi, great plugin! I installed via NPM and followed the setup guide but am getting the below error, any ideas?

ReferenceError: window is not defined at Object.<anonymous> (/node_modules/simple-parallax-js/dist/simpleParallax.min.js:7:227) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (/gulpfile.js:41:24) at Module._compile (internal/modules/cjs/loader.js:689:30) 192-168-1-8:$ gulp /node_modules/simple-parallax-js/dist/simpleParallax.min.js:7 !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("simpleParallax",[],e):"object"==typeof exports?exports.simpleParallax=e():t.simpleParallax=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t

The beginning part of the code in the minified version of 3.1.1 is missing (from CDN and dist in download).

I tried to use the code provided from README.md; however, the code breaks because on the compiled library, customContainer is a boolean type, but on the README, it is supplied with a string value.

GitHub user follow link in the website footer leads to a 404 page.

Hello!

Is it possible to remove the div that nests the image? It gives problems if you want to maintain the aspect ratio of the image.

Thank you

It works on regular images, buy I'm unable to get it to work with

<picture>
                    <?php $image2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'orginal'); ?>
                    <?php $image1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'orginal'); ?>
                      <source srcset="<?php echo $image2xretina[0]; ?>" media="(min-width: 1600px)">
                      <source srcset="<?php echo $image1xretina[0]; ?> 1x, <?php echo $image2xretina[0]; ?> 2x">
                      <img class="thumbnail img-fluid imagen-fondo" srcset="<?php echo $image2xretina[0]; ?>" alt="<?php the_title(); ?>">
                   </picture>

Demo: https://codepen.io/7iomka/pen/ExjQRqO
Thanks!

hi ,
Would it be possible to use this library for applying a parallax effect on <figure> element
So the parallax could work on the <img> and <figcaption> tag at the same time ?
Here is an exemple for the markup

 
<figure>
 <img src="bubbles-work.jpeg">
 <figcaption>Bubbles at work</figcaption>
</figure>

Thanks

How to add or place text on top center the image?

When I set a breakpoint (ex. 1024) and I reduce the window the effect correctly ends. When I enlarge the window the effect doesn't restarts.

It may be useful that, with overflow:true, orientation:down and scale:1 the "sliding effects" is maintained and that it starts at "0" point transform: translate3d(0px, 0px, 0px);

Hi ! im Lucien ✋

i open this issue because i have test this library but with Overflow this not work.

whith other it's ok ! 👍

Link for test: https://spjs-issue.netlify.app/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      width: 100vw;
      height: 200vh;
      margin: 0;
      padding: 0;
      position: relative;
    }
  </style>
  <body>
    <img class="toto" src="https://creativetacos.com/wp-content/uploads/2018/11/Free-iPhone-Xr-Mockup-696x464.jpg" alt="" srcset="">
    <!-- Java script  -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>
    <script>
      var image = document.querySelector('.toto');
      new simpleParallax(image,{
        overflow: true
      });
    </script>
  </body>
</html>

Please, let users know on the README page, that IE browsers are not supported. It used Element.closest() and Intersection Observer API. It needs a polyfill. A polyfilled version would be the best :)

Thank you!

Works fine in Firefox but sometimes in Chrome it initialises fine but nothing happens when you scroll.

If I inspect element I can see that the translate3d doesn't change on scroll.

I am not getting any errors in the console.

I am using the most simple code:

 let images = document.getElementsByClassName('js-parallax');
new simpleParallax(images);

SimpleParallax version: 5.4.0
Chrome version: 81.0.4044.122

Like this one : https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

The plugin indeed put all inline style but scroll doesn't change anything... Any guess?

Tested on iOS 13.3.1/13.4 iPhone 6/SE/7/8

Dude I think a parallax lib is a bit unnecessary but why not. I guess it's primarily for Webdesigners. Whatever it's very laggy on mobile safari as mentioned on Reddit. Have a look on it 😉

I'm using this in an Angular 7 project. initializing seems to be working fine, but when i try to remove the effect from the image (by calling this.parallaxInstance.destroy();) the image is being completely removed from the page.

Is this the intended behavior? I do not want to remove the image from the DOM, just remove the effect from the image.

The parallax effect is working on Firefox and Chrome. However, it is not working in MS Edge. When opening my website with MS Edge, I get the following error:

The code that I am using to run the parallax is the following:

jQuery(function($){
    //Add paralax to home page featured image
    var image = document.querySelectorAll('.attachment-post-thumbnail');
    new simpleParallax(image, {
	    scale: 1.5
    });
});

On develop branch, webpack has been set instead of gulp/express/browserify. This is working as before.

Now we need to use full potential of es6 class and import ( for example polyfills should be imported and not been added directly into simpleParallax main class ).

Also, now that webpack is set in UMD library we don't need to have the function(root, factory) at the top of simpleParallax class. We should only have the class at top level.

This induces that handle function should be optimized. I'm not sure of the best approach to do it.

Any volunteers most welcome.