How can i extend with custom.js , index.js in demo

[baptistebriel]

How can i extend with custom.js , index.js in demo

[baptistebriel]

Hi @skhtml,

So how things are working in the demos folder;

• index.js
• custom.js
• build.js

index.js is the main entry file of the folder where I'll be importing my custom class and just initialising a new instance of the class, right away

import Custom from './custom'

const scroll = new Custom({
  opacity: document.querySelector('h1')
})

scroll.init()

custom.js will be the extended class of Smooth. In there you can add other elements to transform, apply opacity to it, etc... Just pass new elements into the options when you initialise the new class (index.js just as above) and get it back into the constructor of your custom class.

import Smooth from '../../index'

class Custom extends Smooth {
  constructor(opt) {
    super(opt)
    this.dom.opacity = opt.opacity
  }
  init() {
    super.init()
    // do something else in init of this class, like adding extra event listeners, etc..
  }
  // etc...
}

build.js is just the builded file after browserify and babel did their work.

I'll try to take some time to do another demo with the transform of the vs-section + elements inside with different speeds, will get back to you as soon as possible. :)

[skhtml]

Ah, now i understand, thank you! :) Browserify and babel make build.js from js files. Its like when i use sass and i compile it to css. :) Wow i like it!

About smooth scrolling vs-section + smooth parallax elements inside of this section. I understand now, when we scroll vs-section with this script, we also need to change in our parallax elements start trigger viewport , because its depends of vs-section.

Thanks for answer, its will be great if you make it, because i think this script is even better than scrollmagic, ets. because everything is smooth.

[baptistebriel]

Hi @skhtml,

Have a look at the parallax-page demo, this should be what you need!

Everything works the same as the parallax demo, but you'll find some differences such as the calculations to know if the element is in the viewport (because the parent element .vs-section has a transform applied as well). Elements inside this .vs-section have a position: relative so everything in this section can be a regular website (no fixed positions like the parallax demo).

Let me know what you think!

[skhtml]

I just tested it, and it works very good! Thanks , this demo is awesome! just what i need. I also test in my test project, and it works perfect as well. :))
Thanks man!

When i come back from my trip, i try add functionality like skrollr .
<div class="vs-div" data-end="0.5" data-change="x:200;y:300;opacity:1">some image</div>
Its mean from begin of viewport and until 50% (middle) of viewport this div make transform3d(200,300,0) and opacity:1

[baptistebriel]

Glad to know it worked! Feel free to re-open if you have issues!

[vishalp36]

build.js is just the builded file after browserify and babel did their work. How did you do that? Please i am new to js things...

[baptistebriel]

Hi @vishalp36 — I used npm scripts for the build process, see package.json. It's basically just using babelify indeed. If your project needs more transforms, you could use tools like gulp or webpack.

[vishalp36]

@baptistebriel thanks a (lot)^n