creating scroll animation with css

Question

I am trying to create a header menu when I scroll down it to get involved with animation into a circle and when it scrolled up it will be come back again . I checked the window is top if not then animate with javascript . But my code is not working .

$header = $('.header__fake');

$(window).scroll(function() {

    var scroll = $(window).scrollTop();

    if (scroll > 20) {
        $header.addClass('animated').removeClass('fix');
    } else {
        $header.removeClass('animated').addClass('fix');
    }
  
});

body {
  background: #02021a url("http://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
  font-weight:lighter;
  letter-spacing:1px;
}

.content {
  width: 320px;
  position: relative;
  margin: 0 auto;
}

.content h2 {
  margin: 35px 0 0;
}

.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}

.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}

.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
}

.content .header__fake i {
  display: block;
}

.content .header__fake .btm__border {
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.content .header__fake .icn__wrap {
  cursor: pointer;
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
  margin-right: -20px;
}

.content .header__fake .icn__wrap .icn__hamburger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  -ms-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  display: block;
  width: 18px;
  height: 1px;
  z-index: 999;
  background: #fff;
}

.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
  content: "";
  float: left;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  margin: 5px 0 0;
}

.content .header__fake .icn__wrap .icn__hamburger:before {
  margin: 6px 0 0;
}

.content .header__fake .icn__wrap svg {
  z-index: 10;
}

.content .header__fake .icn__wrap svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.animated .btm__border {
  left: 100%;
  right: 4px;
}

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.fix .btm__border {
  -webkit-animation: fix 0.2s linear;
  animation: fix 0.2s linear;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  right: 5px;
}

@-webkit-keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}

@keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0px;
  }
}

    <div class="content">

        <h2>Scroll to see the magic.</h2>

        <div class="header__fake">

            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>

        </div>


        <h1>Hmm<span>Now scroll back up.</span></h1>

    </div>

Please take a look at my answer below. If this solved your issue, please mark it as the answer so that this thread can be marked as 'solved'. If my answer doesn't solve your issue, please comment on the problem below my answer and I will look into it. Thank you. — Bharath
– Bharath, Commented Nov 9, 2016 at 20:13

Bharath · Accepted Answer · 2016-11-08 20:49:56Z

1

I pasted above code in JSfiddle. It works perfectly. See it here

The problem could be with your jQuery lib initialization.

answered Nov 8, 2016 at 20:49

Bharath

966 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

creating scroll animation with css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related