More CSS ugghhh

What is harder than coding everyday?

That's right...blogging about it everyday...but for reals I won't have it any other way, this really keeps me on track no matter what happens on the day of. I know this is becoming a mini-rant that no one will read...but the process of learning includes learning about myself.

Okay today I did more of the CSS review tutorial and worked on my site a bit...
The tutorial talked about hamburger menu... yup...

With the continue use of BootStrap CSS framework we can use the
.collapse and .navbar-collapse with the .sr-only to hide the hamburger when in normal desktop view and only active it during extra small phone view.

Yup the CSS can get real dry real fast.
On other note I added more to my website this time scroll effects on my name text on top of the splash image.

<div id="splash">
  <img class="full-img" src="public/assets/images/splash.png" alt="">
    <div class="hidden-xs hidden-sm">
      <div class="splash-name" id="splash-fade-0"><p class="cbutton--effect-stana">ZHENTING<br />ZHOU</p></div>
      <div class="splash-name" id="splash-fade-1"><p class="cbutton--effect-stana">ZHENTING<br />ZHOU</p></div>
      <div class="splash-name" id="splash-fade-2"><p class="cbutton--effect-stana">ZHENTING<br />ZHOU</p></div>
      <div class="splash-name" id="splash-fade-3"><p class="cbutton--effect-stana">ZHENTING<br />ZHOU</p></div>
      <div class="splash-name" id="splash-fade-4"><p class="cbutton--effect-stana">ZHENTING<br />ZHOU</p></div>
      <div id="splash-title">
        <p><span class="glyphicon glyphicon-circle-arrow-right" id="splash-title-space" aria-hidden="true"></span>WEB DEVELOPER</p>


So above is the html code and with the js code below to trigger it

// load scroll func
$(function() {
  //parallex scroll
  function scrollPage(env) {
      // env = "dev";
      // ypos is base for scroll high math
      var ypos;
      var prlxZindex;
      var splashImgPos;

      function splashImg() {
        var splashSpeed = -0.35;
        var startOffset = 265;
        // base on same scroll degree, splash image scroll small
        splashImgPosOne = ((ypos * (splashSpeed))+startOffset) + 'px';
        splashImgPosTwo= ((ypos * (splashSpeed+0.05))+startOffset) + 'px';
        splashImgPosThree = ((ypos * (splashSpeed+0.1))+startOffset) + 'px';
        splashImgPosFour = ((ypos * (splashSpeed+0.2))+startOffset) + 'px';
        splashImgPosFive = ((ypos * (splashSpeed+0.3))+startOffset) + 'px';
        var splashNameArray = ['splash-fade-0','splash-fade-1','splash-fade-2','splash-fade-3','splash-fade-4'];
        $("#"+splashNameArray[0]).css({ 'top': splashImgPosOne });
        $("#"+splashNameArray[1]).css({ 'top': splashImgPosTwo });
        $("#"+splashNameArray[2]).css({ 'top': splashImgPosThree });
        $("#"+splashNameArray[3]).css({ 'top': splashImgPosFour });
        $("#"+splashNameArray[4]).css({ 'top': splashImgPosFive });

      $(window).on('scroll', function() {
          //scroll triggers run these functions
          ypos = window.pageYOffset;


          //log report scroll
          if (env == 'dev')
            console.log("current scroll ->", ypos, "target pos ->", splashImgPos);
      console.log("running scrollPage...")
  // scrollPage("live");


The idea behind it is to have all the text stack on top of each other in the begging and once the scroll starts it will start to move them creating the smear effect.


Popular posts from this blog

CSS Review

Hash Table