Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: Parallax Effect in NOF2015

  1. #1

    Default 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


    1. Set publishing output to HTML5 Dynamic
    2. Add the script to the site from the Layout properties panel in PageView
    3. 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.
    4. 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).
    5. Set a background color or image on each Layout Region alternating between the two types.
    6. Using the CSS property sheet panel set the background-attachment: fixed and background-position: center of each Layout Region using images.
    7. 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.

  2. #2
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default

    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.
    Ray Cambpell
    Sounds In Sync
    Linked in

  3. #3

    Default

    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.

  4. #4
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Hi Steve,

    very nice effect. I have used your template as an example and it works nice

    http://www.nof-tutorials.com/Paralla...rgrund-Effekt/
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  5. #5

    Default

    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.

  6. #6
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Unfortunately this is not really working on mobile devices
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  7. #7
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    2,000

    Default

    have you added the needed tag for mobiles?
    <meta name="viewport" content="width=device-width, initial-scale=1">

  8. #8
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    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.
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  9. #9
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    2,000

    Default

    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.

  10. #10
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    1,000

    Default

    Well - neither me - but today it feels like people are looking first with the mobile device. One hour after I have published this page on Facebook I had my first complain

    It should be even all on percentage to work correctly on mobile devices - right now there is still a static width. Technical I have tried a mobile and responsive webdesign here - so it should be possible.

    http://www.nof-tutorials.com/Respons...rlage-NOF2015/
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •