jquery - CSS/Javascript Scroll Replace Text -


i'm trying accomplish couple things js/css can't figure out. here's i've got far: http://codepen.io/melissall/pen/ppwpqe

  1. i want headline centered in image until text scrolls up.

  2. i've got css transition changes color of text, don't want timed, based on position of headline. example of mean, check out how logo changes color in link: http://www.leaderbagco.com/

i've tried searching examples, can't seem find helps. if can point me in right direction, appreciated.

there's code:

html

<div id="image"></div> <div id="container" class="row">   <div id="heading" class="large-12">     <h2>heading lorem ipsum sit dolor</h2>   </div>   <div id="content" class="large-12">     <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. donec nisi ante, pulvinar lorem id, pellentesque facilisis diam. cras placerat libero ut urna auctor faucibus. morbi facilisis diam et massa facilisis, vel vulputate ex malesuada. fusce varius, ex id vulputate accumsan, arcu orci scelerisque purus, et tempor orci leo et nisi. aliquam aliquet massa vel nibh dictum viverra. mauris dapibus quam ut magna congue porttitor. aenean suscipit tortor urna dapibus dignissim. in ornare risus et mauris pellentesque pharetra. nunc et ultrices erat. maecenas interdum dignissim turpis, in porta erat. donec tortor urna, finibus ut quam ac, aliquam ullamcorper arcu. vivamus id est quis ante volutpat laoreet. proin fringilla pharetra est sagittis. fusce non magna mauris. proin iaculis aliquet mi, pellentesque dui porttitor ac. </p>   </div> </div>

css

h2{   color: #ffffff;   font-size: 4em;   font-weight: 700;   font-family: 'roboto condensed', sans-serif; } #image  {   background: url(http://7-themes.com/data_images/out/78/7039061-beautiful-tropical-beach-wallpaper.jpg) no-repeat center center fixed;    -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;   height: 500px; } #heading{   position: relative;   top: -250px;   text-transform: uppercase;   color: #fff;   } #heading h2{   color: #fff;   padding-top: 20px; }  #heading h2.bgchange{     color: #f00;       -webkit-transition: color 1s;        -moz-transition: color 1s;         -ms-transition: color 1s;          -o-transition: color 1s;             transition: color 1s; } #content{   padding-top: 100px; }

js

var windw = this;  $.fn.followto = function ( pos ) {     var $this = this,         $window = $(windw);      $window.scroll(function (e) {         if ($window.scrolltop() > pos) {             $this.css({                 position: 'absolute',                 top: pos             });         } else {             $this.css({                 position: 'fixed',                 top: 0             });         }     }); };  $('#heading').followto(490);  $(window).scroll(function() {   var addremclass = $(window).scrolltop() > 470 ? 'addclass' : 'removeclass';     $("#heading h2")[addremclass]('bgchange'); });

edit #1:

i've got sort of working css, have run other issues. new link here: http://codepen.io/melissall/pen/pjrzdx

new issue #1: headline doesn't stick above copy anymore. had remove js there because interfering heading positions.

new issue #2: if scroll down far enough, white text on image reappears.

edit #2: got sorted (in codepen @ least) adding js detects when page hits point , changes heading , copy relative , absolute positions. , there's other junk in there. code messy, , still has flaws, functions in codepen @ bare minimum of wanted do. here's final code if else trying similar: http://codepen.io/melissall/pen/pjrzdx

have heard : parallax? https://github.com/wagerfield/parallax

that website mentioned use same concept.

i checked link provided can see 2 images: http://cdn.shopify.com/s/files/1/0556/3397/t/1/assets/leader-bag-co-bk.png?17257 http://cdn.shopify.com/s/files/1/0556/3397/t/1/assets/leader-bag-co-wh.png?17257

so not changing logo color image instead.

see website top 50 parallax effects: http://www.creativebloq.com/web-design/parallax-scrolling-1131762

i hope answer can in something.


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more