Jump to content
Search Community

krishie

Members

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by krishie

    HTML overflow: hidden Preventing JavaScript Scrolling in Parallax Application

    in GSAP

    Posted

    Hi krishie  :)

     

    pls remove  overflow: hidden; from html tag CSS and just add to body 

     

    http://phrogz.net/css/htmlvsbody/bodyoverflowing.png

    Hi Diaco,

     

    Thanks for the reply. I did as you suggested but doing that removes the parallax effect from the page which I want to have. I did that earlier, but it just removes the parallax effect. I guess it's the html tag CSS height property, which is constraining the scroll.

     

    Do you have any other suggestion or reference to any post where parallax scrolling is implemented ONLY IN GSAP (NO JQUERY OR ANY OTHER LIBRARY). I tried to search a lot, but I am not getting a pure GSAP implementation.

    HTML overflow: hidden Preventing JavaScript Scrolling in Parallax Application

    in GSAP

    Posted

    I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen.

     

    Following is my code for reference. Please someone help & let me understand the reason behind it.

     

    CSS

    @import url(http://fonts.googleapis.com/css?family=Nunito);

    html {
      height: 100%;
      /* OVERFLOW HIDDEN NOT ALLOWING JAVASCRIPT SCROLL */
      overflow: hidden;
    }

    body {
      margin:0;
      padding:0;
      /* perspective: 1px;
      transform-style: preserve-3d; */
      height: 100%;
      overflow-x: hidden;
      font-family: Nunito;
    }

    h1 {
      font-size: 250%;
      margin: 0;
      padding: 0;
    }

    p {
      font-size: 140%;
      line-height: 150%;
      color: #333;
    }

    .slide {
      position: relative;
      min-height: 100vh;
      box-sizing: border-box;
      box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
      transform-style: inherit;
    }

    .slide:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right:0;
    }

    .title {
      width: 50%;
      padding: 5%;
      border-radius: 5px;
      background: rgba(240,230,220, .7);
      box-shadow: 0 0 8px rgba(0, 0, 0, .7);
    }

    .slide:nth-child(2n) .title {
      margin-left: 0;
      margin-right: auto;
    }

    .slide:nth-child(2n+1) .title {
      margin-left: auto;
      margin-right: 0;
    }

    .slide, .slide:before {
      background: 50% 50% / cover;
    }

    .header {
      text-align: center;
      /*font-size: 175%;*/
      color: #fff;
      text-shadow: 0 2px 2px #000;
    }

    #title {
      background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
      background-attachment: fixed;
    }

    #title h1 {
      padding-top: 80px;
    }

    #slide1:before {
      background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
      transform: translateZ(-1px) scale(2);
      z-index:-1;
    }

    #slide2 {
      background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
      background-attachment: fixed;
    }

    #slide3:before {
      background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
      transform: translateZ(-1px) scale(2);
      z-index:-1;
    }

    #slide4 {
      background: #222;
    }

    .fixed-header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      text-align: center;
      color: #fff;
    }

    HTML BODY

    <body>
  <div id="scroll" class="fixed-header">CLICK HERE TO SCROLL</div>

  <div id="title" class="slide header">
    <h1>Pure CSS Parallax</h1>
  </div>

  <div id="slide1" class="slide">
    <div class="title">
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
    </div>
  </div>

  <div id="slide2" class="slide">
    <div class="title">
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
    </div>
  </div>

  <div id="slide3" class="slide">
    <div class="title">
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
    </div>
  </div>

  <div id="slide4" class="slide header">
    <h1>The End</h1>
  </div>
</body>

    JavaScript

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/plugins/ScrollToPlugin.min.js"></script>
  <script>
    (function() {
      var
      $ = function(selector, el) {
        if (!el) {el = document;}
        return el.querySelector(selector);
      },
      $$ = function(selector, el) {
        if (!el) {el = document;}
        return el.querySelectorAll(selector);
      };

      $('#scroll').addEventListener('click', function(e) {
        // GSAP CODE
        var posTop = $('#slide1').offsetTop;
        TweenLite.to(window, 2, {scrollTo: posTop});
      });
    }());
  </script>

    Kindly help.

×
×
  • Create New...