testMaterialize.html

<template>
  <!-- <link rel="stylesheet" media="screen" href="styles/materializeAlt.css" /> -->
  <section class="au-animate">


    <main>
      <div class="container">
        <div class="row">

          <div class="col s12">

            <div id="introduction" class="section scrollspy">
              <h4>Introduction Oct 30</h4>
              <p class="caption">ScrollFire is a jQuery Plugin that executes callback functions depending on how far into the page you've scrolled. We'll show you how you can use this plugin with many demos and examples.</p>
            </div>
            <div class="col s3">
              <img id="image-test2" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050" style="opacity: 1;">
            </div>
            <div id="initialization" class="section scrollspy">
              <h4>jQuery Plugin Initialization</h4>
              <pre>
                <code class="language-javascript col s12">
                  var options = [ {selector: '.class', offset: 200, callback: 'globalFunction()' }, {selector: '.other-class', offset: 200, callback: 'globalFunction()' }, ]; Materialize.scrollFire(options);
                </code>
              </pre>
            </div>
            <a class="btn waves-effect waves-light" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
            <div class="row">
              <!-- Dropdown Structure -->
              <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
              </ul>
            </div>
            <div class="row">
                <img class="materialboxed  tooltipped" data-position="top" data-delay="50" data-tooltip="click me to enlarge" data-caption="A picture " width="650" src="http://lorempixel.com/580/250/nature/2">
</div>

            <div id="options" class="section scrollspy">
              <h4>jQuery Plugin Options</h4>
              <table class="hoverable highlight">
                <thead>
                  <tr>
                    <th>Option Name</th>
                    <th>Description</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>Selector</td>
                    <td>The selector for the element that is being tracked.</td>
                  </tr>
                  <tr>
                    <td>Offset</td>
                    <td>If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.</td>
                  </tr>
                  <tr>
                    <td>Callback</td>
                    <td>This string is the function call that you want to make when the user scrolls to the threshold. It will only be called once.</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- Demo -->
            <h2 class="header">ScrollFire Demo</h2>
            <p>Scroll through slowly to get sense of what ScrollFire can do for you. This is the ScrollFire code that we have used on this page.</p>
            <pre>
              <code class="language-javascript">
                var options = [</code>
              <code id="call-1" class="language-javascript">{selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )' },</code>
              <code id="call-2" class="language-javascript">{selector: '#staggered-test', offset: 205, callback: 'Materialize.toast("Please continue scrolling!", 1500 )' },</code>
              <code id="call-3" class="language-javascript">{selector: '#staggered-test', offset: 400, callback: 'Materialize.showStaggeredList("#staggered-test")' },</code>
              <code id="call-4" class="language-javascript">{selector: '#image-test', offset: 500, callback: 'Materialize.fadeInImage("#image-test")' }</code>
              ]; Materialize.scrollFire(options);
              </code>
            </pre>

            <ul id="staggered-test" show.bind="isLoaded">
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
              <li class="" style="transform: translateX(0px); opacity: 1;">
                <h4><a href="#">List Item</a></h4>
                <p>This is a description</p>
              </li>
            </ul>
            <!-- <img  class="whoosh" src="//www.placehold.it/300" /> -->
            <!-- <img show.bind="isLoaded" ref= "image-test" id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050" style="opacity: 1;"> -->
            <img show.bind="isLoaded" id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050" style="opacity: 1;">


          </div>


        </div>
      </div>

  </section>
</template>

testMaterialize.js

import {
  inject
}
from 'aurelia-framework';
import {
  HttpClient
}
from 'aurelia-http-client';
// import $ from 'jquery';
// import 'Dogfalo/materialize';
/////////////////////////////////
export class Test {
  isLoaded = false;

  constructor(router) {
    this.message = "Test materialize!";
  }


  // attached() {
  activate() {

    }

    attached() {
      // alert ('loaded')


      $(document).ready(function() {
        console.log('timer 1')

        var options = [{
            selector: '#staggered-test',
            offset: 50,
            callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )'
          }, {
            selector: '#staggered-test',
            offset: 205,
            callback: 'Materialize.toast("Please continue scrolling!", 1500 )'
          }, {
            selector: '#staggered-test',
            offset: 400,
            callback: 'Materialize.showStaggeredList("#staggered-test")'
          }, {
            selector: '#image-test',
            offset: 500,
            callback: 'Materialize.fadeInImage("#image-test")'
          }

        ];
        Materialize.scrollFire(options);



        $('.materialboxed').materialbox(),

          $('.collapsible').collapsible({
            accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
          }),

          $('.tooltipped').tooltip({
            delay: 50
          }),

          $('#flow-toggle').toggleFlowTextButton,
          $('.slider').slider({
            full_width: true
          }),

          $('.modal-trigger').leanModal(),
          $('.dropdown-button').dropdown({
            inDuration: 300,
            outDuration: 225,
            constrain_width: false, // Does not change width of dropdown to that of the activator
            hover: true, // Activate on hover
            gutter: 0, // Spacing from edge
            belowOrigin: false // Displays dropdown below the button
          });

      });
      this.isLoaded = true;
    }


  }