Make HTML responsive to viewport

Question

I have created my first Webpage and featured a parallax/SplitScroll using ScrollMagic.js

When I use "developer tools" on chrome to view the page in mobile view, the parallax doesn't work as the triggers seem to be a bit off.

I've had a look online to see how I can fix the parallax in a mobile view and came across this Parallax scrolling not working on mobile css

From this answer, I have seen that parallaxes often do not work in mobile view. and it is recommended I disable the parallax when a certain viewport is reached.

As you can see on this codepen I have created https://codepen.io/Jaderianne/pen/jjgWpv when the screen is small (resize the browser) the text in the parallax view looks rather squashed so I think it would be best I disable the parallax when a certain viewport is reached.

As I am still learning web dev, and this is my first webpage I am unsure of how to disable the parallax when on a smaller screen. I think i'll need to use @media in my CSS but am unsure what needs to be enclosed in this..

Could someone help me, please?

The code is visible in my codepen which I have linked above.

Some of the HTML:

<section id="About" class="about">

<div class="about-title">
  <h2>About Us</h2>
</div>

<div class="about-pages">
  <div>
    <h2>About 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 3</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, 
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
</div>
</section>

THE CSS CAN BE SEEN ON THE CODEPEN.

Javascript:

function splitScroll() {
const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  duration: '200%',
  triggerElement: '.about-title',
  triggerHook: 0
})

.setPin('.about-title')
.addTo(controller)

new ScrollMagic.Scene({
    duration: '200%',
    triggerElement: '.services-title',
    triggerHook: 0
  })

  .setPin('.services-title')
  .addTo(controller)

}

splitScroll();

I would like About 1, About 2 and About 3 to appear directly under About Us, and vice versa for the Services section (when in mobile view)

score 0 · Answer 1 · answered Jul 16 '19 at 13:52

I’m not sure if this is the best way to do this But you could try creating a new div with the same HTML (excluding anything linked to the JavaScript) but designed for mobile and hiding it using ‘display: none;’ then putting all of the styling for the non-parallax mobile view, along with ‘display: block;’ (for the mobile HTML) and ‘display: none; (for the desktop parallax HTML) inside of:

@media screen and (max-width: 500px) {

}

That will mean that that css will only show when the screen size is lower than 500px (phone width)

score 0 · Answer 2 · answered Jul 16 '19 at 14:11

0

You need to destroy your controller so parallax doesnt work anymore, also if the viewport width is less than 800px parallax will not be created (change this variables as you wish, in css and in JS)

To destroy the controller you can use

controller.destroy()

Here is the codepen: https://codepen.io/anon/pen/XLvaEQ

answered Jul 16 '19 at 14:11

Robert garcia

581
2
7

I have viewed your codepen. When you decrease the browser size and then increase it again this adds an extra white box under both "About Us" and "Services", which causes the parallax effect to no longer work. The solution is what i want, but without adding the white boxes. – RianneJ Jul 16 '19 at 14:26

Make HTML responsive to viewport

2 Answers2