CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Valentin
Valentin

Reputation: 280

Headline Animation

I am currently trying to write a small animation based on an other website. I am basically trying to copy the effect, but it doesnt seem to work correct.

CodePen: http://codepen.io/wagnva/pen/xwemvL
Website where i am trying to copy it from: http://html5up.net/spectral

To clarify: I want the two lines to from the middle to the outside and only as far as the text is long.

Code here too:

HTML:

<header>
    <h1>Welcome</h1>
</header>

CSS:

header h1{
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 6rem;
  color: black;
  opacity: 0;
  transition: opacity 1.5s ease 0s;
  position: absolute;
  display: inline-block;
}

header h1:before,
header h1:after{
  content: "";
  display: block;
  height: 2px;
  background: black;
  box-sizing: border-box;
  width: 1%;
  transition: width 5s ease 0s;
  position: relative;
}

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
}

JS:

$(document).ready(function(){

  $(window).on("load", function(){
      $("header h1").addClass("welcome-transition");
      console.log("Stuff");
  });

});

Upvotes: 0

Views: 222

Answers (3)

Shomz
Shomz

Reputation: 37701

No complications, no hacks - these simple four rules on h1 will fix it (and it is also a proper approach): 

display: block;       /* to make it easier to center */
width: 550px;         /* this goes on :after element as well */
margin: 64px auto;    /* centering */
position: static;     /* necessary for the above to work, 
                         but simply removing absolute positioning is fine, too */

http://codepen.io/anon/pen/EVJrwo

Upvotes: 0

fuyushimoya
fuyushimoya

Reputation: 9813

  1. You applied width: 100%; to .welcome-transition, which cause the h1 expand to the width of its parent instead of its own text width.

  2. To move from middle to outside, you can first move the :before and :after to center, then apply both position and width to it.

I've alter your code with comments for changes, check if it's what you want.

$(document).ready(function(){
  $(window).on("load", function(){
      $("header h1").addClass("welcome-transition");
      console.log("Stuff");
  });
});
/* I just want it to be center */
header {
  text-align: center;
}

header h1{
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 6rem;
  color: black;
  opacity: 0;
  transition: opacity 1.5s ease 0s;
  
  /* I just want it to be center */
  position: relative;
  display: inline-block;
}

header h1:before,
header h1:after{
  content: "";
  display: block;
  height: 2px;
  background: black;
  box-sizing: border-box;
  width: 1%;
  
  /* As we also need position effect, add left's setting too. */
  transition: width 5s ease 0s, left 5s ease 0s;
  position: relative;
  
  /* Make the position starts at middle */
  left: 50%;
}

/* To Make the h1 fix the text's width, don't specify it's width to 100%, or it become the body's width */
.welcome-transition{
  opacity: 1;
}

.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <h1>Welcome</h1>
</header>

Upvotes: 1

service-paradis
service-paradis

Reputation: 3398

Your code is almost good. You want your lines to bes only as wide as your text. Currently your h1 have width:100%.

So you can change this part:

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
}

for

.welcome-transition,
.welcome-transition:before,
.welcome-transition:after{
  opacity: 1;
  width: 100%;
} 
.welcome-transition{
  width: auto;
}

If you want your title to be centered, you can add the following:

header {
  text-align: center;
}

Hope this help!

Upvotes: 0

Related Questions