jquery - Text opacity fade when at edge of viewport -

-

i'm trying .title fade when it's close top/bottom of screen. think problem jquery document targetting. can see, initial fade works perfectly, text not fade when close top/bottom.

you can view codepen here.

any appreciated!

    function scrollbanner() {        $(document).scroll(function() {          var scrollpos = $(this).scrolltop();          $('.title').css({            'top': (scrollpos / 3) + 'px',            'opacity': 1 - (scrollpos / 100)          });          $('.title').css({            'background-position': 'center ' + (-scrollpos / 200) + 'px'          });        });      }      scrollbanner();        $(document).ready(function() {        $(".title").delay(1000).hide().fadein(2000);      });
/* parallax base styles    --------------------------------------------- */    .parallax {    height: 500px;    /* fallback older browsers */    height: 100vh;    overflow-x: hidden;    overflow-y: auto;    -webkit-perspective: 300px;    -webkit-overflow-scrolling: touch;    perspective: 300px;  }  .parallax__group {    position: relative;    height: 500px;    /* fallback older browsers */    height: 100vh;    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;  }  .parallax__layer {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;  }  .parallax__layer--fore {    -webkit-transform: translatez(90px) scale(.7);    transform: translatez(90px) scale(.7);    z-index: 1;  }  .parallax__layer--base {    -webkit-transform: translatez(0);    transform: translatez(0);    z-index: 4;  }  .parallax__layer--back {    -webkit-transform: translatez(-300px) scale(2);    transform: translatez(-300px) scale(2);    z-index: 3;  }  .parallax__layer--deep {    -webkit-transform: translatez(-600px) scale(3);    transform: translatez(-600px) scale(3);    z-index: 2;  }  /* demo styles    --------------------------------------------- */    body,  html {    overflow: hidden;  }  body {    font: 100% / 1.5 arial;  }  * {    margin: 0;    padding: 0;  }  .parallax {    font-size: 200%;  }  /* centre content in parallax layers */    .title {    text-align: center;    position: absolute;    left: 50%;    top: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);  }  /* style groups    --------------------------------------------- */    #group1 {    z-index: 5;    /* slide on group 2 */  }  #group1 .parallax__layer--base {    background: rgb(102, 204, 102);  }  #group2 {    z-index: 3;    /* slide under groups 1 , 3 */  }  #group2 .parallax__layer--back {    background: rgb(123, 210, 102);  }
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-it6q9imjyuqimwnd9ldybustiq/8puow33aoqmvfpqi=" crossorigin="anonymous"></script>    <div class="parallax">    <div id="group1" class="parallax__group">      <div class="parallax__layer parallax__layer--base">        <div class="title">base layer lorem ipsum dolor sit amet, consectetur adipiscing elit. ut tellus risus, vestibulum non neque ut, consectetur fermentum neque. nam pharetra tellus pulvinar ante suscipit dapibus. quisque pharetra libero vel lectus placerat laoreet.</div>      </div>    </div>    <div id="group2" class="parallax__group">      <div class="parallax__layer parallax__layer--base">        <div class="title">base layer</div>      </div>      <div class="parallax__layer parallax__layer--back">        <div class="title">background layer</div>      </div>      </div>

i took closer @ code , ran in jsfiddle , figured out why scroll event wasn't firing. changed $(document).scroll $('.parallax').scroll because you're scrolling .parallax element not document. moved call scrollbanner() in $(document).ready

function scrollbanner() {    $('.parallax').scroll(function() {      var scrollpos = $(this).scrolltop();      $('.title').css({        'top': (scrollpos / 3) + 'px',        'opacity': 1 - (scrollpos / 100)      });      $('.title').css({        'background-position': 'center ' + (-scrollpos / 200) + 'px'      });    });  }    $(document).ready(function() {    $(".title").delay(1000).hide().fadein(2000);      scrollbanner();  });
/* parallax base styles    --------------------------------------------- */    .parallax {    height: 500px;    /* fallback older browsers */    height: 100vh;    overflow-x: hidden;    overflow-y: auto;    -webkit-perspective: 300px;    -webkit-overflow-scrolling: touch;    perspective: 300px;  }  .parallax__group {    position: relative;    height: 500px;    /* fallback older browsers */    height: 100vh;    -webkit-transform-style: preserve-3d;    transform-style: preserve-3d;  }  .parallax__layer {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;  }  .parallax__layer--fore {    -webkit-transform: translatez(90px) scale(.7);    transform: translatez(90px) scale(.7);    z-index: 1;  }  .parallax__layer--base {    -webkit-transform: translatez(0);    transform: translatez(0);    z-index: 4;  }  .parallax__layer--back {    -webkit-transform: translatez(-300px) scale(2);    transform: translatez(-300px) scale(2);    z-index: 3;  }  .parallax__layer--deep {    -webkit-transform: translatez(-600px) scale(3);    transform: translatez(-600px) scale(3);    z-index: 2;  }  /* demo styles    --------------------------------------------- */    body,  html {    overflow: hidden;  }  body {    font: 100% / 1.5 arial;  }  * {    margin: 0;    padding: 0;  }  .parallax {    font-size: 200%;  }  /* centre content in parallax layers */    .title {    text-align: center;    position: absolute;    left: 50%;    top: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);  }  /* style groups    --------------------------------------------- */    #group1 {    z-index: 5;    /* slide on group 2 */  }  #group1 .parallax__layer--base {    background: rgb(102, 204, 102);  }  #group2 {    z-index: 3;    /* slide under groups 1 , 3 */  }  #group2 .parallax__layer--back {    background: rgb(123, 210, 102);  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="parallax">    <div id="group1" class="parallax__group">      <div class="parallax__layer parallax__layer--base">        <div class="title">base layer lorem ipsum dolor sit amet, consectetur adipiscing elit. ut tellus risus, vestibulum non neque ut, consectetur fermentum neque. nam pharetra tellus pulvinar ante suscipit dapibus. quisque pharetra libero vel lectus placerat laoreet.</div>      </div>    </div>    <div id="group2" class="parallax__group">      <div class="parallax__layer parallax__layer--base">        <div class="title">base layer</div>      </div>      <div class="parallax__layer parallax__layer--back">        <div class="title">background layer</div>      </div>      </div>  </div>

with changes made code works. may not how intend work, it's working.


Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more