electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

Can I use old school javascript? #33

Closed stratboy closed 5 years ago

stratboy commented 5 years ago

Hi, great script, and I'd like to use! :) But i'm still old-school javascript, so for now I'm not doing transpiling. I see you're using modern js syntax like const and arrow functions and the like. Is it still possible to use it with plain old school syntax?

electerious commented 5 years ago

The dist folder contains the transpiled JS that comes without const and arrow functions: https://github.com/electerious/basicScroll/blob/master/dist/basicScroll.min.js

stratboy commented 5 years ago

Thank you

Tobias Reich ha scritto:

The dist folder contains the transpiled JS that comes without const and arrow functions: https://github.com/electerious/basicScroll/blob/master/dist/basicScroll.min.js

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/electerious/basicScroll/issues/33#issuecomment-442832426, or mute the thread https://github.com/notifications/unsubscribe-auth/AAatXtNYHCjqdSuwqy6XXb_VK6jNNwB3ks5uz-A3gaJpZM4Y5f-x.

stratboy commented 5 years ago

I just found out that this will work properly, but won't log anything in console under the inside hook:

var speed_parallax_bg = document.querySelector('.section.speed .parallax-bg');
var speed_parallax = basicScroll.create({
  elem: speed_parallax_bg,
  from: 'top-bottom',
  to: 'bottom-top',
  props: {
    '--speed-bg-scrolled': {
      from: '0'
      ,to: '-34%'
      ,timing: 'quadInOut'
      ,inside: function(instance, percentage, props){
        console.log(instance, percentage, props); // TEST LOG
      }
    }
  }
})

speed_parallax.start();
electerious commented 5 years ago

You need to start the instance with speed_parallax.start()

stratboy commented 5 years ago

No excuse me, I'm already doing it, I update my post. Still it works, except that it doesn't log.

stratboy commented 5 years ago

Solved the log thing: the issue here was that I was putting the inside prop under props, while it should be putted outside the props.

var speed_parallax_bg = document.querySelector('.section.speed .parallax-bg');
var speed_parallax = basicScroll.create({
  elem: speed_parallax_bg,
  from: 'top-bottom',
  to: 'bottom-top',
  props: {
    '--speed-bg-scrolled': {
      from: '0'
      ,to: '-34%'
      ,timing: 'quadInOut'
    },
  },
  inside: function(instance, percentage, props){
     console.log(instance, percentage, props); // TEST LOG
  }
})

speed_parallax.start();