Javascript IsInView и Matchmedia вместе взятые - PullRequest
Новая
       97

Javascript IsInView и Matchmedia вместе взятые

0 голосов
/ 22 февраля 2020

Я сделал анимацию с помощью Adobe Animate cc.

Для лучшего пользовательского опыта, я хочу, чтобы он воспроизводился при прокрутке на небольших устройствах <768 пикселей. Кроме того, чтобы вызвать его только тогда, когда он полностью виден. И если вы прокрутите дальше и вернетесь назад, было бы ужасно, если бы его можно было запустить снова. </p>

Я попытался объединить два сценария: matchmedia (https://github.com/paulirish/matchMedia.js/) и isinview ( https://github.com/zeusdeux/isInViewport/wiki) для правильного запуска функции.

Мне удалось заставить ее работать частично, к сожалению: • она запускает функцию в верхней части блока. • это не вызывает функцию снова при переворачивании назад. • Мне не удалось заставить просмотр работать только на экранах <768 пикселей. Он работает на всех экранах. </p>

Функция i wi sh для запуска называется init (), которая находится в div "animation_container".

Вот часть кода для запуска анимация, когда виден inviewport: 

$(function isInViewport(){
if (matchMedia('only screen and (max-width: 768px)').matches) // smartphone/iphone... maybe run some small-screen related dom scripting?
{
    $('animation_container').isInViewport({"tolerance": 100, "debug": true} function init() { if (status === 'entered') {alert('Entered'); }})
    function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
    typeof define === 'function' && define.amd ? define(['jquery'], factory) :
    (factory(global.jQuery));
    }(this, (function ($) { 'use strict';})
      }
}

Может кто-нибудь дать мне подсказку?

Frédéri c.

...