css transitions - How to animate using css and waypoints -


i have simple code

h2 { font-size: 4em; text-align: center; } h2:after {     background: #aaa none repeat scroll 0 0;     content: " ";     display: block;     height: 1px;     margin: 1em auto;     width: 120px;     /*transition-property: width;     transition-duration: 2s;     transition-timing-function: linear;     transition-delay: 1s;*/     transition: width 2s linear 1s; }

i want underline animated once parent comes in contact viewport. here's html: 

<article id="con" class="content">  <div class="container"> <div class="row">   <h2 data-animate="fadein">contact</h2>   <h3>howdy!</h3>   <p>want hello? need creative help? send me message…</p>  </div> </div> </article> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/1.1.6/waypoints.min.js"></script>
h2 { font-size: 4em; text-align: center; }  h2:after {      background: #aaa none repeat scroll 0 0;      content: " ";      display: block;      height: 1px;      margin: 1em auto;      width: 120px;      transition: width 2s linear 1s;  }
<div style="height:1300px; background:#eee;"></div>  <article id="con" class="content">   <div class="container">  <div class="row">    <h2 data-animate="fadein">contact</h2>    <h3>some heading</h3>    <p>some text show, may dummy text or of sort. when moon emptyt water.</p>      </div>  </div>  </article>

"dummy text: submit question. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum."


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more