how to have a jquery fade animation with html/css -


i trying come duplicate of this

i want duplicate flame icons. these appear in each section on far right or left away central container have text.

<section id="ourfires" class="portfolio page-section add-top add-bottom">     <!-- inner-section : starts -->     <section class="inner-section">         <!-- container : starts -->         <section class="container">             <div class="row">                 <article class="col-md-12">                     <h1 style="text-align:left;"><span class="animated" data-fx="bounceinright">our fire</span></h1>                     <article id="article"><hr class="hr"></hr></article>                     <div class="clearfix"></div>                     <div id="mid">                         <p class="promod-text dark-text">our fire <b>big brand ideas</b> not have <b>edge in market</b> , make difference in <b>bottom line</b>,but ieas are: </p>                         <div>                             <ul id="navlist" class="promod-text dark-text" >                                 <li>locally relevant</li>                                 <li>creatively imagined , executed</li>                                 <li>internationally recognized</li>                             </ul>                         </div>                     </div>                  </article>             </div>         </section>         <!-- container : ends -->     </section>     <!-- inner-section : ends -->     </div> </section> 
#ourfires{    background-color:#ffffff; }

if want icon fade in when page arrive position of fire icon have use js because have know when icon on screen, js change class when icon on screen, animation css, idea change opacity 0 1 element want fade in , set transition animate process, can use

var elementtoanimate = document.queryselector(".fire-icon");  var heightviewport = window.innerheight;      function foundposition(){      /* scroll distance */      var desplaced = self.pageyoffset || document.documentelement.scrolltop;        /* desplaced + half of viewport, animate icon when arrive half of screen */      var positionanimate = desplaced + (heightviewport / 2);        if(elementtoanimate.offsettop < positionanimate){          elementtoanimate.classlist.add("animate-css");      }  }    onscroll = foundposition;
html, body, .big-div{      height: 100%;  }    .fire-icon{    opacity: 0;    margin-left: 250px;    -webkit-transition: 1s;    transition: 1s;  }    .fire-icon.animate-css{    opacity: 1;    margin-left: 0;  }
scroll see animation  <div class="big-div"></div>      <div class="fire-icon">          <img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" alt=""/>      </div>      <div class="big-div"></div>

you can customize animation wish, above example illustrate, or can use animate.css.

you can see http://ksesocss.blogspot.com/2015/06/javascript-con-furoya-lazy-load-estoy.html lot.

here jsfiddle play with.


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more