February 5, 2017

Responsive scroll icon

Responsive scroll icon

On my last post i have shown how to create a scroll to down icon. Now i tried a responsive design where mouse is shown on larger devices like desktop and phone on smaller devices like mobile. Check this put on your various devices.

HTML

<div class='icon-scroll'>
  <div class="icon-scroll-screen"></div>
</div>

CSS

p {
  font-family: 'Roboto Slab';
  text-align: center;
}

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}

.icon-scroll {
  width: 40px;
  margin-left: -20px;
  top: 50%;
  margin-top: -35px;
  box-shadow: inset 0 0 0 1px #000;
  border-radius: 25px;
  height: 70px;
}

.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #000;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
    transform: translateY(46px);
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
    transform: translateY(46px);
  }
}

@media only screen and (max-device-width: 768px) {
  .icon-scroll {
    height: 80px;
    border-radius: 4px;
  }
  .icon-scroll:after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    margin: 1px auto 0 auto;
    border: 1px solid #000;
    border-radius: 50%;
  }
  .icon-scroll-screen {
    position: relative;
    width: 34px;
    height: 56px;
    margin: 10px auto 0;
    border: 1px solid #000;
  }
  .icon-scroll:before {
    top: 58px;
  }
  @-webkit-keyframes scroll {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-46px);
      transform: translateY(-46px);
    }
  }
  @keyframes scroll {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(-46px);
      transform: translateY(-46px);
    }
  }
}

Note:

Try out on all your devices.

demo

2 comments:

Popular Posts

Views