DEV Community

loading...

Responsive Full-page Parallax Slider (Remake)

takaneichinose profile image Takane Ichinose Updated on ・2 min read

Redesigned thing

This is a fork (and remake) of 'Responsive Full-page Parallax Slider'

I used the technologies that I learned recently:

  • VueJS in most of the functionalities.
  • GSAP just for scrolling.

I also redesigned the layout based on how I am doing my current designing style.

There are now 3 layers of parallax effect here.


The concept is just similar, but the designing is different.

Before, I wanted the text to be bordered by black border, but now, I removed it.

Before, the background colour of the image is not masked by black background. Now I tried to mask it.

There are also a difference in functionality. Example, before, scroll is only done by clicking the links, at the bottom of the screen. But after learning few technologies, I can make it scroll, while you still can click the buttons below.

Also the thing threw me back, I haven't used any libraries and preprocessors before. That is why, the source code is more complex before.


Preview of the new pen

Here is the preview of the pen that I created recently


Comparison

For a comparison, here is also the Pen of the old one.


Conclusion

After years of learning, and practising, your skills will improve. Not only the speed, but also the way you're thinking of a concept of design.

In Addition, I didn't use any libraries or preprecessors before, that is why the source code before is not really good.

We should not stop learning, and practising. There are still many things we could learn at the future.

Discussion

pic
Editor guide