none
How did they do this? RRS feed

All replies

  • Wordpress - it's a wordpress theme, here

    The clue to this is in the View Source;

    <link rel="stylesheet" type="text/css" media="all" href="http://www.gelatomuseum.com/eng/wp-content/themes/Five3/style.css" />

    I just searched Google for "Five3 Wordpress theme" and got the above web site.


    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)




    • Proposed as answer by AndrewOZ1 Friday, February 8, 2013 9:06 AM
    • Edited by AndrewOZ1 Friday, February 8, 2013 9:07 AM
    Friday, February 8, 2013 9:05 AM
  • Yuck, that took forever to load and I'm on a 20mps connection. Some CSS 3 gradients and corners with a jQuery slideshow. I don't see what is so special about it other than they have a block of conditional comments just below the doctype that are 100% unnecessary IMHO.

    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Friday, February 8, 2013 3:14 PM
  • I had a very negative reaction to that site.  SLOW on a high speed connection, one long continuous page, lots of splash for very little actual information.

    All about the "fancy" and very little about the user experience.

    Friday, February 8, 2013 5:57 PM
  • I had a very negative reaction to that site.  SLOW on a high speed connection, one long continuous page, lots of splash for very little actual information.

    All about the "fancy" and very little about the user experience.

    The OP didn't ask if you liked the page, he asked how they did it.

    I spent a couple of minutes looking at it and it wasn't obvious to me how it was done. I think though that it has background images that are overlaid that have different sizes and are offset uniquely in the y dimension. Because they have different sizes they move at a different rate when the scroll bar is moved.

    Friday, February 8, 2013 11:27 PM
  • Just because the OP only asked how it was done doesn't mean he shouldn't be interested in how people react to it, if he's planning on using that wordpress theme.

    How it was done was answered: it's a wordpress theme that uses jquery effects, including a slideshow. (Look at the source.)

    Saturday, February 9, 2013 12:12 AM
  • No, it is not a jQuery effect. Turn javaScript off on your browser and it works just the same.
    Saturday, February 9, 2013 12:27 AM
  • Look at the source.  Jquery slide show "Tiny slide show", and all the javascript references, including the jquery library.  If you turn off javascript, the slideshow stops working.  Are you thinking of other effects?

    Edit: if you are talking about the images going "over" each other when scrollling, that done with layers, relatively positioned to different containers, some absolutely positioned, over large background images.

    Take a look at the source.  (Easiest, if you are interested, is to open the page wih EW, set the layers panel to show, and poke around.)


    • Edited by KathyW2 Saturday, February 9, 2013 1:17 AM
    Saturday, February 9, 2013 12:56 AM
  • There is nothing unique about a slide show. What he was talking about was images going "over" each other when scrolling. While some of the elements do have layering, I went through and change everything to positition:null. The effect of the images sliding over each other while scrolling still happens. It is not therefor "done in layers" as you claimed. More likely what I said earlier in this thread.
    • Edited by Time Bandit Saturday, February 9, 2013 1:26 AM
    Saturday, February 9, 2013 1:24 AM
  • There is nothing unique about a slide show. What he was talking about was images going "over" each other when scrolling. While some of the elements do have layering, I went through and change everything to positition:null.  The effect of the images sliding over each other while scrolling still happens.

    I'm not sure position : null;  is valid CSS.  I could be incorrect here, but according to www.w3.org, "null" is not one of the values listed for the "position:" statement. (http://www.w3.org/wiki/CSS/Properties/position)

    Therefore,  my assumption is that changing the position value to "null" shouldn't / wouldn't have any effect on the images/scrolling effect.

    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)



    • Edited by AndrewOZ1 Sunday, February 10, 2013 9:38 PM
    Sunday, February 10, 2013 9:34 PM
  • Actually, Andrew, the CSS parser is designed to simply ignore anything it does not understand. So, in the case of replacing a valid position property value (absolute, relative, etc.) with an invalid value such as null, the effect is the same as commenting out that rule completely. This would probably definitely have an effect on the display, depending upon what the original property was used for.

    Note that I often use this when testing, as a method to do a quick comment-out of a CSS property, by adding an "x" to the property name, like so:

    p {
       line-height:1.3;
    }

    becomes

    p {
       xline-height:1.3;
    }

    The parser simply ignores that rule, and it is much faster to either add or remove than true CSS comment delimiters, like so:

    p {
       /* line-height:1.3; */
    }

    I am basically lazy, and given the choice, will take the fast, easy way every time...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Sunday, February 10, 2013 11:06 PM
  • If the css for an element is declared to be position : relative and you want it to return to position:"normal" (if you would) you would say in javaScript:

    document.getElementById("theElementName").style.position = "";

    Which in English is "null";

    Null basically means not defined.

    I AM SICK OF FIGHTING THIS #@* &^%$ @#$!^&* EDITOR! IT KEEPS STRIPPING MY DOCUMENT OF STUFF MAKING THE TEXT  UNINTELLIGIBLE. DAMN! 

     


    • Edited by Time Bandit Monday, February 11, 2013 12:10 AM
    Monday, February 11, 2013 12:04 AM
  • Yeah, the editor removes position, z-index, and visibility rules when written correctly, as they would be in ordinary CSS, as well as some elements when the angle brackets are included. Since this is a forum about Web development, makes it kinda hard to provide examples.

    BTW, the default, or 'position:"normal"', is static (elements appear in normal page flow as dictated by source order).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Monday, February 11, 2013 5:44 AM