Create a Parallax or Fixed Scrolling Effect

Hikin' Mike

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-a-Parallax-Fixed-Scrolling-SmugMug-Website

sbphotographystudio

Hi!

Beautiful work! This really breathes new life to an old website. I started using it and it really is stunning.

I have one problem I need help with on my website. The images in the parallax coding (when viewing the website on a tablet like an iPad Pro), the images would be full size and can’t been seen between the viewport size. How can I fix this?

This is my website: www.sbphotographystudio.com

Hikin' Mike

@sbphotographystudio said:
Hi!

Beautiful work! This really breathes new life to an old website. I started using it and it really is stunning.

I have one problem I need help with on my website. The images in the parallax coding (when viewing the website on a tablet like an iPad Pro), the images would be full size and can’t been seen between the viewport size. How can I fix this?

This is my website: www.sbphotographystudio.com

Thanks!

Unfortunately I don't own a mobile device, so I can only replicate it using this: http://quirktools.com/screenfly/#u=https://www.sbphotographystudio.com/&w=1366&h=1024&a=22&s=1

I really don't understand your question as it seems to work using 'Screenfly'.

sbphotographystudio

Im sorry for not being clear. I took a screenshot of what I mean. The picture that's circled should be rendered correctly to fit within the container like how you see it on a desktop computer but when viewing it on my iPad, the picture doesn't render correctly.

Hikin' Mike

Thanks for the screenshot. Like I said, I don't own a mobile, so I'm going to have a tough time fixing it.

Does it do it on my demo?

sbphotographystudio

Yeah it does it on the demo.

SPORTDAD

I am trying to add the parallax effect to my website. I am not well versed in writing CSS or HTML, so I do not know the correct syntax for the following line:
background-image: url('image-url-here');
What do I insert for 'image-url-here'?

Hikin' Mike

@SPORTDAD said:
I am trying to add the parallax effect to my website. I am not well versed in writing CSS or HTML, so I do not know the correct syntax for the following line:
background-image: url('image-url-here');
What do I insert for 'image-url-here'?

Use the 'Share' feature and copy the 'PHOTO ONLY' where it says 'image-url-here'.

SPORTDAD

Mike, I'm loving the parallax effect that I've been able to create on a test page. Before I can finalize it, I want to increase the font size of the text in the sections. In your example above, I want to change the size of both "Section One" and the "Lorem..." text. What do I need to insertin the CSS to increase the font size for those two text blocks?

Hikin' Mike

@SPORTDAD said:
Mike, I'm loving the parallax effect that I've been able to create on a test page. Before I can finalize it, I want to increase the font size of the text in the sections. In your example above, I want to change the size of both "Section One" and the "Lorem..." text. What do I need to insertin the CSS to increase the font size for those two text blocks?

Find this:

.section {
  text-align: center;
  padding: 40px 80px;
  display: inline-block;
}

Replace it with this:

.section {
  text-align: center;
  padding: 40px 80px;
  display: inline-block;
  font-size: 18px;
}

  .section h2 {font-size: 30px;}

I will edit the tutorial as well.

SPORTDAD

I'm struggling with implementing the code. I have created a fresh page and copied the HTML and CSS code exactly as you have it on your demo page. The text blocks for each of the sections is very narrow and do not cover the full width of the page.
See: https://www.sportdad.ca/Parallax7
No idea what I could be missing since I used your code exactly. Could it have something to do with other HTML/CSS content blocks that apply to the entire website?

Hikin' Mike

@SPORTDAD said:
I'm struggling with implementing the code. I have created a fresh page and copied the HTML and CSS code exactly as you have it on your demo page. The text blocks for each of the sections is very narrow and do not cover the full width of the page.
See: https://www.sportdad.ca/Parallax7
No idea what I could be missing since I used your code exactly. Could it have something to do with other HTML/CSS content blocks that apply to the entire website?

That's odd. Possible your theme's layout is different then mine? Mine is set to stretchy. Anyway, it needs a width: 100% in the .section area. I also realized that my theme had some extra line-height and margin-bottom then the standard SmugMug sites. I also included those in the updated tutorial.

Sorry about that.

SPORTDAD

I have the parallax page working well on my desktop and my iPhone, however, when I test on my iPad, the images are super zoomed in. Instead of the entire model, I am seeing the model's chin. Is there image size settings that I should be using? I cannot go live with this until I get the images to display properly on an iPad.

Hikin' Mike

Like I mentioned earlier in this thread, I don't own a mobile device, so I really can't help. I can only re-size my monitor to replicate screen sizes, which works fine for me.

SPORTDAD

I switched @media screen and (max-width: 736px) to 1024px and it fixed the issue with displaying the images super zoomed in on the iPad. I had hoped that I could still get the parallax effect on an iPad but as long as the images display fine on the iPad I can go live with the new homepage. I hope to tackle the ability to have parallax on an iPad another day. Thank you again for your work. I love how the page looks now.

Hikin' Mike

@SPORTDAD - I'm PM'img you...

SPORTDAD

Hi Mike, The parallax effect is working well on my website. Thank you! The images look fantastic on a desktop given that they are short and wide. On a mobile device, the images get cropped. Is there a simple way to display different images on mobile devices so that I might use appropriate images for desktops and different one for mobile?

Hikin' Mike

@SPORTDAD said:
Hi Mike, The parallax effect is working well on my website. Thank you! The images look fantastic on a desktop given that they are short and wide. On a mobile device, the images get cropped. Is there a simple way to display different images on mobile devices so that I might use appropriate images for desktops and different one for mobile?

I sent you a PM June 24 and you never responded.

SPORTDAD

My apologies. I am not a frequent user of Digital Grin and missed the PM.

Hikin' Mike

@SPORTDAD said:
My apologies. I am not a frequent user of Digital Grin and missed the PM.

I figured so.

I think I have an idea and I'll get back to you.

Hikin' Mike

@SPORTDAD Can you test that testing page I posted in the PM again?

SPORTDAD

I looked at sandbox.imagesinthebackcountry.com/parallaxwebsite on my ipad and the images are very zoomed in. Too zoomed to be able to make them out well.

Hikin' Mike

That's what I thought. I think it's something to do with how iPads work. I don't own. Sorry I can't help anymore.

SPORTDAD

It works fine if i restrict media t0 1024. The images are fine on mobile and tablet. What I am trying to do is substitute the images so that a wide image (such as a swimmer with their arms extended wide) displays on the desktop and then a different, narrower (like a closeup of a face) displays on mobile.

Hikin' Mike

Totally untested. You'll need to make two copies of your HTML Where is says <!-- HTML Here -->, paste your current HTML both places.

<div class="desktop">

  <!-- HTML Here -->

</div>

<div class="mobile">

  <!-- HTML Here -->

</div>

Add this to your CSS:

.mobile {display: none;}
@media (max-width:1024px) {

 .desktop {display: none;}
 .mobile {display: block;}

}

Now you need to use two different background-image: for desktop and one for mobile. The CSS will hide the mobile when it's 1025px or larger. Then hide the desktop version when the screen is 1024px or smaller.

SPORTDAD

Mike, thanks for this. It works brilliantly to allow me to have different text on desktop vs. mobile. I will be less verbose on the mobile. But the images are still the same on desktop & mobile since the images are defined in the CSS/ I have a desktop & mobile version of HTML code, but still a single set of images. Can I have a desktop image block and mobile image block?

Hikin' Mike

I forgot one small, but important, thing. You'll need to prefix your desktop and mobile images in your CSS. As an example:

.desktop .container--image-01 {
  background-image: url('image-url-here');
  min-height: 100%;
}

.mobile .container--image-01 {
  background-image: url('image-url-here');
  min-height: 100%;
}

It works.

SPORTDAD

I will screen grab html and css

SPORTDAD

I have an idea. On desktop i could define images 1, 2 & 3. On mobile I'd define 4, 5 & 6. Then just have 6 image content blocks in the CSS. I will try that. Fingers crossed.

Hikin' Mike

@SPORTDAD said:
I have an idea. On desktop i could define images 1, 2 & 3. On mobile I'd define 4, 5 & 6. Then just have 6 image content blocks in the CSS. I will try that. Fingers crossed.

I revised my latest response.