Application init

Method used to initialize application.
In case the navigation will be in Ajax SITE.run(); needs to be called after each url change. 

<script type="text/javascript">
  window.onload = SITE.run.bind(SITE);
</script>

Ajax API: Modal open

Open the popup with transition and initialize the modules inside it. 

<script type="text/javascript">
  ANIMATIONS.modalDetails.open(markup);
</script>

Parameters

markup : HTML String Markup of the popup modal.

Example

<div id="modal-team-details" class="modal fade modal-team-details in" aria-hidden="false">...</div>

Ajax API: Modal next

Load and transition to next popup and initialize the modules inside it.

<script type="text/javascript">
  ANIMATIONS.modalDetails.next(markup);
</script>

Parameters

markup : HTML String Markup of the next popup.

Example

<div id="modal-team-details" class="modal fade modal-team-details in" aria-hidden="false">...</div>

Ajax API: CategoryList filter

Loading and transition to new contents, initialization of the modules inside it.
It can be used on the aside navigation of pages like shop_landing_men.html 

<script type="text/javascript">
  ANIMATIONS.categoryList.filter(markup);
</script>

Parameters

markup : HTML String Markup of filtered content.

Example

<div class="category-header" data-stagger="" data-stagger-delay=".2">...</div>

Ajax API: Load more

Loading and transition of new tiles/contents.
It can be used on the "Load More" buttons. 

<script type="text/javascript">
  ANIMATIONS.loadMore(params);
</script>

Parameters

params : Object

Properties

html : HTML String New contents / rows / cells

lastElement : Node DOM Element after which the contents will be appended.

Ajax API: Culture Latest Stories Switch Tab

Loading and transition of new contents.
It can be activated through the buttons "LATEST" and "TRENDING" in the box "LATEST STORIES" in culture.html. 

<script type="text/javascript">
  ANIMATIONS.culture.latestStoriesSwitchTab(markup);
</script>

Parameters

markup : HTML String New contents / rows / cells

Example

<div class="row latest-stories-row col-with-division" data-stagger="" data-stagger-presets="culture-details">...</div>

Ajax API: Culture Summer Looks Switch Tab

Loading and transition of the new slider.
It can be activated through the buttons "WOMENS" and "MENS" in the box "SUMMER LOOKS" in culture.html. 

<script type="text/javascript">
  ANIMATIONS.culture.summerLooksSwitchTab(markup);
</script>

Parameters

markup : String Markup of the new slider.

Example

<div class="looks-slider">...</div>

Interaction API: Fade on Scroll

By adding the attribute data-stagger to an element it's possible to set a 'fade on scroll' animation to all first level childrens of that element.
It's possible to be more specific on the selectors and parameters declaration for the tween by adding a custom presets in the file global/javascript/components/StaggerTweens.js 

<ul class="col-xs-24 col-md-8 col-md-offset-8 brands-list clearfix">
   <li data-stagger data-stagger-presets="brands-nav">
        <div class="brands-section-title">A</div>
        <ul id="section-a">
            <li><a>Adidas</a></li>
            <li><a>Adidas</a></li>
            <li><a>Adidas</a></li>
            <li><a>Adidas</a></li>
            <li><a>Adidas</a></li>
            <li><a>Adidas</a></li>
        </ul>
    </li>
</ul>

Attribute

data-stagger-delay : Number Set a delay (in seconds) between the execution of each tween.
It can be used to slow down the fade on scroll transition. 

<li data-stagger data-stagger-delay="1">...</div>

data-stagger-presets : String Name of the custom preset. 

<li data-stagger data-stagger-presets="brands-nav">...</div>