CODEWITHSUNDEEP
javascriptjqueryhtmlcssparallax
user3662478
user3662478

Reputation: 11

Parallax Curtain Reveal Effect with jQuery and CSS3

It is really difficult to explain what kind of effect I mean. But let me try. :)

When you scroll down one DIV with text Block moves over a fixed background DIV with a background image. Now when the DIV on top leave the bottom area and moves to the top of the viewport you can seen the half (and later the full) new background image. But the Background Images are not moving, they are fixed. Only the Page Content with Text Blocks moves when you scroll down.

If you still see a question mark then take a look at this website, there you can see the concept in use.

So my question is how can I recreate this effect only with CSS3 and jQuery (Without YUI etc.)? I don't really understand the logic that is needed for this to work. How do I need to animate the DIVs and where should I place them in the HTML Document.

Below you find some tests I did (But they don't work)

<!DOCTYPE HTML>
<html lang="en">
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
    <title>Agency</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script>
 $(document).ready(function() {
 $("div.blankItem").css("min-height", $(window).innerHeight()-44);
 $("div.red").css("min-height", $(window).innerHeight()-44);
 var windowHeight = $(window).innerHeight()+ 44;
 var total = - windowHeight - 400;
 $('div.red').css('-webkit-transform', 'translate3d(0,' + total + 'px,0)');
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);

 $(window).resize(function() {
 $("div.blankItem").css("min-height", $(window).innerHeight()-44);
 $("div.red").css("min-height", $(window).innerHeight()-44);
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
 //$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
 });

 $(function(){
 $(window).bind({scroll: Scroll, touchmove: Scroll});
 });


 function Scroll(){
 //  var op = (window.pageYOffset-$(window).innerHeight()-44-356);
// $("div.pageContentBackground").css("bottom", + op);
var scrollTop = $(window).scrollTop();
var pageYDoc = 1300;
var factor = 0.8;
var pageYViewport = pageYDoc - scrollTop;
var imageY = -1 * parseInt(pageYViewport * factor);
//var tr = -200; // You'd need to calculate this value
/**$('div.red').css("-webkit-transform", "translate3d(0, " + tr + "px, 0)");
*/
//var offset = total + $(window).scrollTop()+400;
$('div.red').css({'-webkit-transform': 'translate3d(0, '+ imageY + '%, 0)'});
// $('div.blue').stop().css('bottom', $(window).scrollTop() -       $(window).innerHeight()-44-400 + "px");
console.log(offset);
}
});
</script>
<style>
 * {
 padding: 0;
 margin: 0;
 }
 ul, li {
 margin: 0;
 padding: 0;
 }
 a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
 }

 html {
 -ms-text-size-adjust: none;
 -webkit-text-size-adjust: none;
 }

body { 
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear;
font-family: 'Open Sans', Helvetica;
color: #F0F2ED;
-webkit-font-smoothing: subpixel-antialiased !important;
}
    div.pageMenu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 44px;
    background-color: #333;
    z-index: 10;
    opacity: 0.99;
    }
    a.pageMenuButton {
    position: fixed;
    top: 8px;
    right: 44px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    }
    div.pageHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #daddda;
    z-index: 1;
    padding-bottom: 10px;
    }
    div.pageContent {
    position: absolute;
            top: 100%;
            width: 100%;
            z-index: 5;
            max-width: 100%;
            overflow: hidden;
    }
    div.pageContentBackground {
    position: fixed;
    left: 0px;
    width: 100%;

    }
    div.red {
    background-color: red;
    z-index: 2;
    }
    div.blue {
    background-color: blue;
    z-index: 3;
    }
    div.pageContentBody {
    width: 100%;
    z-index: 2;
    }
    div.pageContentBodyItem {
    width: 100%;
    height: 400px;
    background-color: #fff;
    display: block;
    }
    div.blankItem {
    background: transparent;
    width: 100%;

    display: block;
    }
    </style>
</head>
<body>
    <div class="pageMenu">
        <div class="pageMenuLogo">
        </div>
        <a href="#" class="pageMenuButton">&#9776;</a>
    </div>
    <div class="pageHeader">
    </div>
    <div class="pageContentBackground red">
        </div>
    <!--<div class="pageContentBackground blue">
        </div>-->
    <div class="pageContent">
        <div class="pageContentBody">
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
            <div class="blankItem">
            </div>
            <div class="pageContentBodyItem">
            </div>
        </div>
    </div>
    <div class="pageContentFooter">
    </div>
    </div>
</body>

Upvotes: 1

Views: 4790

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

This is my try: http://codepen.io/rafaelcastrocouto/pen/bCxAd

Although there are lots of differences in the sites, they are still kinda alike. Notice that my parallax only woks on big screens.

The JS is pretty small:

var lastScrollTop = 0;
var backgroundImages = $('.backgroundImage'); 
$(window).scroll(function(e){
  var st = $(this).scrollTop();
  var ah = $(this).height();
  backgroundImages.each(function(i){
    var img = $(this);
    var pos = img.position().top;
    var hei = img.height();
    if ((st + ah) > pos && st < (pos + hei)){
      var p = ((pos - st)/ah) + 0.25;
      if(i == 1) console.log(p);
      img.css('background-position', '50%'+(p*100)+'%');
    }
  });
  lastScrollTop = st;
});
$(window).scroll();

Upvotes: 1

Related Questions