www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: One page scrolling website

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    57

    One page scrolling website

    I need to do something like this, the homepage. (http://www.astoriacassis.com/) Can someone help me.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,190
    Personally, I dislike the full screen background auto changing on the site you linked. I find it distracting. Also it has a hole in the middle where it is overlaid by the hotel logo (though that can be largely suppressed). JQuery is used to achieve the animated background.

    I also note that:
    - When viewed on a PC sized screen or window (i.e. 768px wide and above) the full screen background is displayed auto changing.
    - When viewed on a mobile sized screen or window (i.e. 720px and below) the background is suppressed, and the display is responsive to screens widths right down to 240px wide.

    To achieve that you need to use media-specific style sheets, or media queries. I would suggest that, to gain a deeper understanding of how the page is built and animated, you might wish to download the source files (Ctrl S) and study them.

  3. #3
    Join Date
    Jul 2013
    Posts
    57
    If I want scrolling effects with fixed navigation, is it possible to do it by using css only and using fixed width layout? Means no need responsive. I have done several trial using fullPage js plugin, its okay. but when i add an image slider (responsive slider), it ruins. the height not fit overall windows. So is it possible to used fixed width/height layout? And add scrolling effects by not using jquery? What the simplest solution?

  4. #4
    Join Date
    Jul 2013
    Posts
    57
    the image slider i'm using is 100% width. full page slider under fixed navigation bar.

  5. #5
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    You can't achieve smooth scrolling with css and html, you can achieve page jumping by using anchor tags in the page, this does not scroll or slide, this just jumps.

    It's a good idea to add anchor tags with the name attribute to get your site working and then add the nice scrolling effects with some javascript on top.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,190
    Writing the site fixed width will simplify it, but is that the objective? Ten years ago it would not have mattered, but if you want to learn how to build a site to meet modern requirements, it has to be responsive.

    Anyway, I'm confused by your reference to a "slider" as the site you mention does full page fade-in/fade-out, not slide in and out. Neither can be achieved with just html/css, but full screen fade-in/fade-out can be written quite easily in JavaScript, using the opacity settings in css3.

  7. #7
    Join Date
    Jul 2013
    Posts
    57
    okay. then how to make a button float on top of slideshow, i have put the position absolute n z index, but not working. if i put position fixed, it work.

  8. #8
    Join Date
    Mar 2012
    Posts
    1,190
    Quote Originally Posted by aelynne View Post
    okay. then how to make a button float on top of slideshow, i have put the position absolute n z index, but not working. if i put position fixed, it work.
    Position absolute takes a little getting used to. Off the top of my head I can think of two reasons why this might go wrong:
    1. You have not set the z-index?
    2. The container (body or parent div) is not set to position absolute? You have to be consistent and use position absolute for all the divs (and body). It is a completely different way of positioning content.
    3. Fixed will work because it positions relative to the screen or window. But it does not scroll with the content. That is rarely useful.

  9. #9
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Quote Originally Posted by jedaisoul View Post
    2. The container (body or parent div) is not set to position absolute? You have to be consistent and use position absolute for all the divs (and body). It is a completely different way of positioning content.
    You can use position relative on a container then position absolute on an element inside the container. The position absolute will then take it's position from the top left of the container as opposed to the top left of the browser window.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,190
    Quote Originally Posted by EpicWebs View Post
    You can use position relative on a container then position absolute on an element inside the container. The position absolute will then take it's position from the top left of the container as opposed to the top left of the browser window.
    Agreed, I was simplifying. I do not find position relative to be useful.

  11. #11
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Quote Originally Posted by jedaisoul View Post
    Agreed, I was simplifying. I do not find position relative to be useful.
    Really? How come?

  12. #12
    Join Date
    Feb 2014
    Location
    England
    Posts
    52
    Use firebug or google chrome dev tools to find out where your button is when you set it with an absolute position. If the container has position:relative; on it then the absolutely position button will take it's starting position from the container.

    Good luck!

  13. #13
    Join Date
    Jul 2013
    Posts
    57
    i have set the z-index, and position absolute. but not working. my slideshow(using responsive slider) is position relative. then i put an arrow (link) on top of the slideshow that link to the second page, using anchor. but the arrow not showing. does anyone have sample code? or anything that related with one page website with full width slider and full width fixed navbar that responsive?

  14. #14
    Join Date
    Jul 2013
    Posts
    57
    how i can make slider stick under navbar? because if using responsive slider, it become smaller and the margin between navbar and slider become bigger. and, does anyone have code sample?

  15. #15
    Join Date
    Feb 2014
    Location
    Dubai, UAE
    Posts
    149
    In the example you have mentioned i didnt like one thing only which is the background, dark green and covering whole website rest the website is very good, for another example check this http://wistech.biz/.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles