01 Dec 19 by Administrator 390 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 238
16 May 20 by Administrator 63

facebook sharing meta settings

03/10/2019 02:18:00 by Administrator 275
https://developers.facebook.com/docs/sharing/webmasters A Guide to Sharing for Webmasters This document describes how you optimize web-hosted content that people share to Facebook, regardles

AOS Effects

01/12/2019 18:37:00 by Administrator 391
 Set animation using data-aos attribute: <div data-aos="fade-in"></div> And adjust behaviour by using data-aos-* attributes: <div data-aos="fade

Form Entry List Types

by 366
Add the following nos to the data-formview="1" etc to the link View Only List and View Only Entry Only Entry First on update go to List List Only List First on Edit or Add go to Entry Show Bo

twitter sharing meta settings

03/10/2019 02:16:00 by Administrator 196
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started Getting Started with Cards To get started with implementing Cards markup, specify the type of card f

Form Header Button Defination

by 326
data-headbtn="000000111" each character defines one button (index starts from 0 ) i.e. Previous Record Next Record Add New Record Entry Form List Form Entry and List Form Show Hidden Field

Database Update

01/01/2020 11:28:00 by Administrator 170
ALTER TABLE Account ADD ALink varchar(3500)GO ALTER VIEW [dbo].[vAccount]ASSELECT a1.CompanyId, a1.AccountId, a1.AccountTypeId, a1.ARoleIds, a1.PAccountId, a1.ACode, a1.OCode, a1.ATitle, a1.Gender, a

ismobile javascript code

14/04/2020 20:06:00 by Administrator 96
ismobile javascript code added to admin and master page at the top 

facebook api for adhvik.online

23/09/2019 03:15:00 by 206
https://developers.facebook.com/docs/facebook-login/web && <script>window.fbAsyncInit = function() {FB.init({appId : '1208343976013791',cookie : true,xfbml : true,version : 'v4.0'});F

Owl Classes

02/12/2019 05:30:00 by Administrator 235
Classes This is an example of how html is rendered. With the following options you can change almost every class the way you want <div class="owl-carousel owl-theme owl-loaded"> <div c

General Master List

11/01/2020 14:01:00 by Administrator 220
$(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'