SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    56 Post(s)
    Tagged
    0 Thread(s)

    Now this is cool - parallax page scroll..

    Never seen this before - Wired's Xbox 1 article has this effect on the pictures where as you scroll down through the article the picture reveals change. Look

    http://www.wired.com/gadgetlab/2013/05/xbox-one/

    Anyone want to help take a crack at reverse engineering this visual effect?

    (And, oh yeah, they also talk about the Xbox 1)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I didn't check to see how they were doing it but you can do it quite easily with background-attachment fixed.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	width:960px;
    	margin:auto;
    }
    .test1 {
    	height:300px;
    	margin:auto;
    	border:1px solid #000;
    	background:#f2f2f2 url(images/zimg4.jpg) no-repeat fixed 50% 50%;
    }
    .test2 { background-image:url(images/zimg5.jpg) }
    .test3 { background-image:url(images/zimg6.jpg) }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>Scroll effect</h1>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<div class="test1">
    				<h2>Test1</h2>
    		</div>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<div class="test1 test2">
    				<h2>Test2</h2>
    		</div>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<div class="test1 test3">
    				<h2>Test3</h2>
    		</div>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    		<p>Scroll up and down</p>
    </div>
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quite a lot of sites do that, actually, although they go to town with JS to make it even fancier:

    http://www.creativebloq.com/web-desi...olling-1131762


Bookmarks

Posting Permissions

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