Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 23

Thread: Parallax Effect in NOF2015

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

    Default

    Hi Steve - or whoever might be involved.

    I have tried (another one) - my own responsive (mobile device) "Parallax" test - but it does not work, at least not with your script.

    http://www.nof-tutorials.com/Paralla...kt-Responsive/

    The problem seems to be the background-image in connection with the layout-region. First of all the layout-region must have not pixel but percent as width. I am able to handle this, but somehow the width of the background-picture is not nice to me
    Tommy

    Administrator at the German NOF-Forum

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

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

    Default

    Quote Originally Posted by Thomas Frei-Herrmann View Post
    Unfortunately this is not really working on mobile devices
    Well, having a site that is broken when viewed on mobile is worse than having no mobile site at all. Too bad.
    Ray Cambpell
    Sounds In Sync
    Linked in

  3. #13
    Administrator Mike's Avatar
    Join Date
    Jan 2010
    Location
    Doylestown, PA
    Posts
    524

    Default

    I wanted to address a couple issues surfaced on this thread.

    1.) The parallax effect relies on fixed background attachment, which is costly for mobile devices to render while maintaining smooth scrolling. So most mobile OS'es disable or delay this CSS property.
    see http://caniuse.com/#feat=background-attachment

    2.) The full-width JS snippet doesn't make your site responsive, it only wraps your fixed width Layout Regions with a 100% width DIV for the purpose of displaying a full width background.
    Mike
    NetObjects Technical Support
    forums.NetObjects.com

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

    Default

    Hi Mike,

    thanks for your input

    I have a SAMSUNG Galaxy phone and tablet. It's not working with the newest Andoid-Browser nor with Chrome but Firefox is showing both of my pages pretty good, even the responsive one.
    Tommy

    Administrator at the German NOF-Forum

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

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

    Default

    For anyone trying to use this, if you are starting from scratch, one key step was missed in the instructions:

    For the Layout Regions containing images, on the CSS Property Sheet, "background-size" must be set to "cover", otherwise the image will not stretch/shrink.

    Also, by skipping the part about setting "background-attachment" to "fixed", (I.E. leaving it blank), you do not get the parallax effect, but you still get the full-width adjustment of layout regions with images, with a solid colour, or with a tiled patter/image. A nice way to have, say, a full-width footer.
    Ray Cambpell
    Sounds In Sync
    Linked in

  6. #16
    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.

  7. #17
    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?

  8. #18
    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

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

    Default

    Quote Originally Posted by Trimdoner View Post
    No sign of any parallax actions on there.... are you just confusing that with one-page websites?
    Hi Ken,

    I am not confusing anything.
    What I tried to say is that in the beginning, 1995, there were 1-page web sites just to make visitors read everything, hypnotizing them, reach at the bottom of the page and then hit them with the book price: $49, $79, $99, etc.

    Now the 1-page web sites "evolved" to be parallaxed sites, all of them building sales pressures tactics to make the visitor buy in a hurry.

    Sorry, they will not catch me ...

    That's all.
    Last edited by Since_v4; 07-16-2015 at 06:18 PM.
    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.

  10. #20
    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
  •