01 Dec 19 by Administrator 616 DevelopmentCss

 Set animation using data-aos attribute:

  <div data-aos="fade-in"></div>

And adjust behaviour by using data-aos-* attributes:

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Anchor

There is also a setting that can be used only on per-element basis:

  • data-aos-anchor - element whose offset will be used to trigger animation instead of an actual one.

Examples:

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

This way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.

You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:

<div data-aos="fade-in" data-aos-id="super-duper"></div>

Then you'll be able to listen for two custom events then:

  • aos:in:super-duper
  • aos:out:super-duper

Predefined options

Animations

  • Fade animations:

    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations:

    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations:

    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations:

    • zoom-in
    • zoom-in-up
    • zoom-in-down
    • zoom-in-left
    • zoom-in-right
    • zoom-out
    • zoom-out-up
    • zoom-out-down
    • zoom-out-left
    • zoom-out-right

Anchor placements:

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

Easing functions:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

Tags:

Share Post
Development 28 Nov 19 by Administrator 366
16 May 20 by Administrator 204

Simplcity Global Services Google Analytics Code

by 515
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-70404856-1"></script><script>window.dataLayer = window.da

User Roles

by 489
Super Admin : Defined for developer and application other implementation to show some information required during development of the application. Admin : Definded for client only. Other roles as per

Review calculations

23/09/2019 02:10:00 by Administrator 418
(5*252 + 4*124 + 3*40 + 2*29 + 1*33) / (252+124+40+29+33) = 4.11 and changealter table posts ALTER column TotalViews varchar(100)252+124+40+29+33 === this value added to TotalViews

Creating a quick and dirty jQuery contentEditable Plugin

17/08/2019 03:38:00 by Administrator 454
Here is the link for Creating a quick and dirty jQuery contentEditable Plugin https://weblog.west-wind.com/posts/2009/May/25/Creating-a-quick-and-dirty-jQuery-contentEditable-Plugin

General Master List

11/01/2020 14:01:00 by Administrator 352
$(function() { $('#glist').off('click','div').on('click', 'div', function(e) { var s1 = $(this).text().split('-'); var g1='a.GTypeId='+s1[0]; $('#gtitle').text(s1[1]); $('#gslist').data('condition'

Category vs Tags

19/09/2019 17:38:00 by Administrator 428
A tag is more specific and addresses items you discuss in a particular blog post. A tag is usually only a word or two and reflects the keywords or points of your article.

Animation.css Effects

02/12/2019 04:49:00 by Administrator 303
Animations To animate an element, add the class animated to an element. You can include the class infinite for an infinite loop. Finally you need to add one of the following class

Check serverside unique value

by 544
to check server side unique value add  noduplicate class to the input function is in account.js

Youtube Channel Custom Url Requirements

28/11/2019 02:18:00 by Administrator 366
Custom URL eligibility To create a custom URL for your channel, your account needs to: Have 100 or more subscribers Be at least 30 days old Have an uploaded photo as a channel icon Have uploa

Sports Sagaa Google Analytics Code

by 812
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-70404856-2"></script><script>window.dataLayer = window.da