![]() Scroll - testing for a “scroll to” link in the navbar.Download - link to a zip of the blocs project file.Navbar - added a navbar in the global header.Hero page - added hero structure without an image in the “section-one” class bloc.Experiment page - without changing the code, I added blocs before the “section-one” class bloc and it changed how the parallax effects functions.Working code page - blank page with the code described in this thread.Parallax page - mockup of the page I am trying to build with parallax for mobile (doe not have any of the code from this thread).Looking at the navbar on the landing page, here are the links: The example page does include a download link for the blocs project file: I have built an example site of what I am trying to do and some mostly experiments with the code and different page structures. The desired page structure is 12 blocs that alternates between parallax and static with different images for some of the parallax backgrounds.īloc1-hero-nav - (12.jpeg) parallax background, hero bloc navbar, gradient overlayīloc2-intro - static purple color backgroundīloc3-about - (12.jpeg) parallax background with gradient overlayīloc4-coach - static no background img colorīloc5-services-hero - (camera.jpeg) pararlax background, gradient overlayīloc6-services - static no background img or colorīloc7-tales - (7.jpeg) párallax background with overlaysīloc8-pricing - static no background img or colorīloc9-contact-hero - (3.jpeg) parallax background, gradient overlayīloc10-contact-form - static no background img or colorīloc11-newsletter - (14.jpeg) parallax background, overlaysīloc-placeholder - will add all referenced parallax images and hide visibilityīloc12-footer (global footer) - static no background img or color This seems like a different solution for getting parallax effects to work, but maybe has some ideas on a solution for this. I see what the code is and how the different section classes worked on the different blocs, but I don’t fully understand what the “commands” are in the coding and how to manipulate those commands to get the page effect on my page. But as I said, I am new, and coding is bit over my head. I’ve read the code above from and have built and example site using his code that gets a parallax working on mobile. I’ve gone through some of tutorials to learn, but this seems to be more in need of a code solution because blocs doesn’t support natively the implementation that works with iOS restrictions for the effect. I would like to get parallax working on mobile (iOS and iPad) for site I am trying to build. Hi everyone, newbie here, and since everyone has so much free time these days, I decided to resurrect an old issue and give the code wizards something to work on! ![]() If the main subject of your images isn’t able to fit into these confines, it becomes a meaningless image, so it’s often better to use static images on mobile variants. In the second image, the mobile version retains its height proportionately but chops off a significant amount of the left and right of the image. You can see what I mean below: The first image is the desktop version with a parallax background and it’s quite easy to see what the image is about. Therefore, you have to select images where the central portion only is relevant to the site. ![]() ![]() Furthermore, the background images have to go into a full width container both in Sparkle and blocs, which means that background images extend well beyond the edges of the device screen (the images do not scale). So, it’s still a bit of a hit or miss exercise. On some OS versions, parallax doesn’t work at all. However, that said, I have had client issues with some sparkle made sites where choppiness and jumping have appeared on some mobile devices. The reasons that apps like Sparkle can cope with it better is that you are effectively creating a number of different websites for different device sizes (its not responsive - it’s adaptive) this makes it much simpler to incorporate solutions that work on all devices. So, there isn’t really a simple on/off solution to deal with parallax on mobiles so you have to be prepared to create an alternative method that looks like parallax scrolling, such as the method highlighted in this thread. The issues centre around drains on resources. Android devices can cope with it relatively well, although some versions of the OS can produce choppiness or stuttering (much to the annoyance of users). iOS in particular doesn’t like things such as events that control parallax effects on desktop browsers. I think the answer lies in “best practice”.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |