Hi All

Please have a look at the Vimeo Video link below. I want to know if it is possible to do the slower scrolling of background images with the new Site Designer?

Look at the full width images - "The World's best Selling Floor Heating Brand" and "Electric Floor Heating"

How would one do this in Site Designer?

https://vimeo.com/273290318

When looking into that particular site scripts I believe they are using ScrollMagic. ScrollMagic is quite difficult to learn but can pretty much do any scrolling "magic". I am sure you would have no issue using it with SD3 as I "experimented" using RSD 2.5 with no issues.

that is true "parallax scrolling"... the fixed background picture that many use is not parallax. Codepen might be a good place to get some easy to use code... https://codepen.io/search/pens?q=parallax%20scroll&page=1&order=popularity&depth=everything&show_forks=false

Hi There
Thank you all for the information

This is quite a interesting article on the direction change needed when using parallax for the "new age".

A lot of the old parallax plugins do not function correctly anymore, but there does seem to be hope once again.....

https://developers.google.com/web/updat … arallaxing

With the new element states selectors in SD3 this appears to be possible. Still no IE support though for the new age parallax but even then one could use @supports to provide a fallback setting or alternative older working parallax for it.

Chris here is a sample of the Google parallax plugin integrated into SD3. I am still testing it out but looks like CSS 3D transforms can be used to achieve super smooth parallax effects on mobile and desktop. I have added a feature query to handle the lack of support for IE10 and IE11. Check it out....

https://gluexp.coffeecup.com/sd3/project19/index.html

looks great twinstream... would it be much trouble for you to give instructions on how you used the plugin in SD3?
Thanks!
MJ

Twinstream, that looks good, exactly what I was looking for. Would it be possible for you to upload the RSD project files for me to have a look at, I would really appreciate it

That does look good, Twinstream! Are you just using the 3d transforms for that or are you accessing the google parallex.js as well for that effect on the page?

Yes I am using the parallax script (plugin) to do the heavy lifting and formating for the parallax effect transforms. The way I started this experimental project was to import everything into SD3, working off the index.html sample they have here... https://github.com/GoogleChromeLabs/ui- … index.html

I made a custom stylesheet for the css in that file and added it to my resources and linked to it in the head section. I recreated the html with all the class names. (You can actually just paste the html into a html element to begin with also just to make sure everything works). Then I added the parallax.js file to resources and linked to it in the footer. You also need to add a second script to initiate the plugin. Its the script with the "document.addEventListener" in it. Link to that script also after the parallax.js in the footer.

From that point I worked backward adding the css from the custom.css file by commenting out different things one by one.
What I found when I completely had all the css added into SD3 was that it is completely unusable to style because you are working in the 3D world and things get collapsed and all that. So I started over and only added into SD3 the things that dont effect the design process. Some of the css is better left in the custom.css file in other words for design purposes.

One thing to note with this feature effect is that everything is wrapped in a container named viewport that handles all the 3D transforms required for the effect to occur. That means all your scrolling is done in that container. So the navbar needs to be nested inside that viewport as well as anything else. My goal is to keep working away at this till I can at least get it down to a manageable component(s) with very little custom css. Not there yet.....

By the way this is the only parallax effect I have found that does not suffer from jank or jitter that many of the other parallax plugins have fallen victim to. The only thing I have found with this plugin is that "occasionally" the sticky part gets confused. But it takes some work to make it happen.