-
Super Moderator
Parallax Effect in NOF2015
Hi everyone. Here's a quick tutorial on how to add a Parallax effect to your websites. This is what we'll make in only a few steps: http://netodevelopment.com/parallax/
To get started you'll need to download and save this Javascript file: http://netodevelopment.com/parallax/...dth-snippet.js
You can follow the steps outlined below on this brief video:http://youtu.be/jhh2pANuqO0
- Set publishing output to HTML5 Dynamic
- Add the script to the site from the Layout properties panel in PageView
- Create and stack several Layout Regions. The width should match the page, and I alternated the height 400px (solid bg), 600px (picture bg) for cadence.
- Using the Grid Inspector enter the CSS class nof-fullwidth for each Layout Region. (you may have to enable the Page Properties Panel by selecting "Grid Inspector" from the View Menu).
- Set a background color or image on each Layout Region alternating between the two types.
- Using the CSS property sheet panel set the background-attachment: fixed and background-position: center of each Layout Region using images.
- Publish.
The NOF2015 template is available here: http://netodevelopment.com/parallax/parallax.zip (you must have NOF2015 AU1)
The images in the Template are from https://unsplash.com and are available under the Creative Commons Zero license https://unsplash.com/license
We'll make this into a proper tutorial to put on the Wiki soon. Let me know what you think.
Last edited by Steve Raubenstine; 04-13-2015 at 02:18 PM.
-
Senior Member
Cool. Thanks, Steve.
I've seen this effect a lot lately, and I've been wondering how that is done.
Admittedly I haven't played with this yet, but I'm curious: does the "full-width-snippet.js" simply do the background expansion to, well, full width? Or is it also part of the parallax effect?
Last edited by RayC; 04-11-2015 at 12:23 PM.
-
Super Moderator
Hi Ray. The script full-width-snippet.js makes the background image of a Layout Region full browser width when the CSS class nof-fullwidth is added. More specifically the script is wrapping the Layout Region with a new 100% width DIV and copying the background CSS to the new DIV.
The script will work with the background of any Layout Region on any site by following the first four (4) steps in the tutorial above. (HTML5 Dynamic only)
The Parallax effect is achieved because the other content (Layout Regions) are partially masking the fixed 100% width background image.
The other CSS class we set on the background image was background-position. We chose “center” but you can change the focal point of the background image by choosing top, right, bottom or left.
Last edited by Steve Raubenstine; 04-13-2015 at 02:33 PM.
-
-
Super Moderator
Thanks Tommy. The ability to assign a CSS class to a Layout Region in NetObjects Fusion 2015 opens up terrific new functionality. I can't wait to see all the creative ways people will use this new functionality.
-
-
Senior Member
have you added the needed tag for mobiles?
<meta name="viewport" content="width=device-width, initial-scale=1">
-
Senior Member
I have tried - but this is NOT the case. This would just enlarge the whole view on the mobile device. The problem seems to be, that the mobile device just shows the different layout regions one below the other. The parallax effect get lost this way.
The layout regions with the images are not fixed and the whole page is scrolling.
The images are not masking the full background on the mobile device, they are just showing in the individual layout regions.
Last edited by Thomas Frei-Herrmann; 04-15-2015 at 06:24 AM.
-
Senior Member
hmm, maybe Steve knows what to do
I am not much of a fan of this whole mobile friendly business, it seems we are reverting to the old 640x480 days of the 90s when I started using Nof
have you ever seen a site that looks good on a 4k screen and on a mobile?
here is the most annoying website in the world for me right now http://www.formula1.com/content/fom-website/en.html because I am an F1 fan
Last edited by antonsvideo; 04-15-2015 at 06:23 AM.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules