Fancy News Head Lines Scroll Effect With Pure CSS3

Published on October 16, 2012

Hi guys! how are you doing? Today I will teach you how to create a nice fancy News Head Lines Scroll  Effect Using CSS3. If you have something to highlight in your blog or site its really useful for you to have it. So lets start.

index.html

<div class="newshead">
  <p>
    <a href="www.techumber.com/2012/10/how-to-create-slide-show-with-pure-css3.html"
      >How to Crete Slide Show With Pure CSS3
    </a>
    <a href="//www.techumber.com/2012/10/create-amazing-mack-dock-ui-using-pure.html"
      >Create Amazing Mac Dock UI Using Pure CSS3
    </a>
    <a href="//www.techumber.com//awesome-3d-rotating-menu-using-pure-css3.html"
      >Awesome 3D Rotating Menu Using Pure CSS3
    </a>
    <a href="//www.techumber.com//amazing-windows7-start-menu-using-pure-css3.html"
      >Amazing Windows7 Start Menu Using Pure CSS3
    </a>
    <a href="//www.techumber.com//the-ultimate-accordian-effect-with-css3.html"
      >The Ultimate Accordion Effect With CSS3
    </a>
  </p>
</div>

This is just an example I am taking here. The newshead is very important class. With in that class we have 5 anchor elements. Styling and Animation

.newshead {
  -webkit-border-radius: 5px;
  background-color: #222;
  border: 1px solid #000;
  border-radius: 5px;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}
.newshead p {
  -webkit-animation: anim 25s ease infinite;
  width: 2150px;
}
.newshead a {
  color: #fff;
  float: left;
  max-width: 350px;
  padding-left: 80px;
  text-align: center;
  text-decoration: none;
  width: 350px;
}
@-webkit-keyframes anim {
  0% {
    -webkit-transform: translateX(100%);
  }

  10% {
    -webkit-transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(0);
  }
  30% {
    -webkit-transform: translateX(-20%);
  }
  40% {
    -webkit-transform: translateX(-20%);
  }
  50% {
    -webkit-transform: translateX(-40%);
  }
  60% {
    -webkit-transform: translateX(-40%);
  }
  70% {
    -webkit-transform: translateX(-60%);
  }
  80% {
    -webkit-transform: translateX(-60%);
  }
  90% {
    -webkit-transform: translateX(-80%);
  }
  100% {
    -webkit-transform: translateX(-80%);
  }
}

Here, each anchor tag have the width 430px. We are using total 5 anchor tags. So 430x5 is 2150, Which is the width of _.newshead > p  selecter. Animation Here we applying _keyframes animation to move the p to different positions at different percentages. For that just apply css3 property transform:translateX To make it short here i am using only -webkit-. But the download and demo will works other browser(firefox, safari, opera). Please Share it if you like it.