Page 1 of 2 12 LastLast
Results 1 to 10 of 23

Thread: Parallax Effect in NOF2015

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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
    998

    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
    998

    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 Since_v4's Avatar
    Join Date
    Mar 2014
    Location
    Caribbean
    Posts
    674

    Default

    Quote Originally Posted by Steve Raubenstine View Post
    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.
    Hello Steve,

    Thank you for opening this thread.

    I too noticed more and more web sites using the Parallax effect for the past 12 months or so.
    The precursor of this design comes from web sites where the owner wants to sell a book nobody wants to read as can be seen here.

    There are many "web sites" older than that one which managed to stay online after huge spamming campaigns, but I no longer remember them.

    Here and also here you can see modern ones.

    Anyone reading this post, do not buy these books / newsletters / services!

    The Parallax effect web sites are built on the assumption that visitors will buy the book immediately when they (the visitors) reached at the bottom of the web page. Such 1-page web sites target dreamers who will never trade successfully and who in fact will 99% end up giving their petty savings to serious market players.

    The 1-page web site trend is old, starting with 1995. It spilt in blogs which used to be 1-page web presence.

    The Parallax effect in full splendour is now being applied to more web sites than cyber-trading e-books sales web sites.
    So be it.
    To me, it reflects an emergency to sell, and something from which I - a web site owner and web surfer/buyer - cannot but stay away.

    To me, the Parallax effect is proof that software makers such as NOF and Internet users look for new ways to beautify the web presence, which is good.
    In my opinion, the web site design should not supersede the importance and quality of the product advertised. I do not want to be duped by fancy designs into buying something from the Net which I later regret but rather by the web site unique content, something which I really need.

    I for one pass up the Parallax effect and am looking forward what the next big thingamajig will be ...
    John - I am born to tease, not to please.
    For NOF beginners: read everything here and practice on mock web sites first.
    Before asking a question, search to see if it has not been asked and answered already.

  8. #8
    Senior Member Trimdoner's Avatar
    Join Date
    Apr 2010
    Location
    Durham, UK
    Posts
    214

    Default

    Quote Originally Posted by Since_v4 View Post
    I too noticed more and more web sites using the Parallax effect for the past 12 months or so.
    The precursor of this design comes from web sites where the owner wants to sell a book nobody wants to read as can be seen here.
    No sign of any parallax actions on there.... are you just confusing that with one-page websites?

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

    Default

    My thought exactly. Take another look at the example and notice how some of the backgrounds scroll over top of others that don't move.

    Here are a couple of more advanced examples that are fun to look at:

    http://www.dangersoffracking.com/

    http://shibui.me/web/scroll/index.html
    Ray Cambpell
    Sounds In Sync
    Linked in

  10. #10
    Senior Member Since_v4's Avatar
    Join Date
    Mar 2014
    Location
    Caribbean
    Posts
    674

    Default

    Quote Originally Posted by RayC View Post
    My thought exactly. Take another look at the example and notice how some of the backgrounds scroll over top of others that don't move.

    Here are a couple of more advanced examples that are fun to look at:

    http://www.dangersoffracking.com/

    http://shibui.me/web/scroll/index.html
    Both web sites have no value, well, at least to me.
    They represent great web master/designer effort but nothing extraordinary.
    Children playing with coloured crayons do a similar comic job.

    I for one already forgot about the Parallax effect.
    Let's see what the yearend news will be ...

    Thank you for dialogue gentlemen.
    John - I am born to tease, not to please.
    For NOF beginners: read everything here and practice on mock web sites first.
    Before asking a question, search to see if it has not been asked and answered already.

Posting Permissions

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