• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Hide Movieclip from HTML5 Canvas on Page Scroll

Community Beginner ,
Mar 30, 2017 Mar 30, 2017

Copy link to clipboard

Copied

Hi,

I have a HTML5 canvas animation and I would like to hide some of the movieclips when a user scrolls form the top of the web page that it is featured on. These movieclips are images that have a fade in/fade out effect and will scroll to an ID anchor when clicked. I would like these movieclips to only be shown when a user is at the top of the page but I can't seem to get this working. I have tried using an IF statement to check whether a user is at the top of the page and if they aren't then remove the mouseover, mouseout and click event listeners but this didn't seem to work. Is this possible to do? If so, how would I implement it?

The following code is what I am using to create the hyperlinked image movieclips (7 in total with different instance names) for reference:

function scrollToId(id) {

    var duration = 1000;

    var ease = createjs.Ease.cubicOut;

    var vscroll = document.getElementById(id).getBoundingClientRect().top;

    createjs.Tween.get(document.documentElement).to({scrollTop:vscroll}, duration, ease);

    createjs.Tween.get(document.body).to({scrollTop:vscroll}, duration, ease);

}

this.bus_cafe.cursor = "pointer";

this.bus_cafe.addEventListener("mouseover", BusCafe_MouseOverHandler);

this.bus_cafe.addEventListener("click", BusCafeAnchor);

this.bus_cafe.addEventListener("mouseout", BusCafe_MouseOutHandler);

function BusCafe_MouseOverHandler(evt) {

    createjs.Tween.get(evt.currentTarget.pin_bus_cafe, {override:true}).to({alpha:1}, 500);

}

function BusCafeAnchor() {

  scrollToId("bus-cafe");

}

function BusCafe_MouseOutHandler(evt) {

    createjs.Tween.get(evt.currentTarget.pin_bus_cafe, {override:true}).to({alpha:0.01}, 500);

}

Kind regards,

Peter

Views

528

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2017 Mar 30, 2017

Copy link to clipboard

Copied

where's your if-statement?

is it in a window.onscroll function?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 30, 2017 Mar 30, 2017

Copy link to clipboard

Copied

Hi Kglad,

The IF statement I am using is the following:

     if(window.pageYOffset > 0) {

          this.bus_cafe.removeEventListener("mouseover", BusCafe_MouseOverHandler);

          this.bus_cafe.removeEventListener("click", BusCafeAnchor);

          this.bus_cafe.removeEventListener("mouseout", BusCafe_MouseOutHandler);

     }

Kind regards,

Peter

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2017 Mar 30, 2017

Copy link to clipboard

Copied

LATEST

try:

window.onscroll = function (e) { 

if(document.getElementById('canvas').getBoundingClientRect().top<-10){  // or pick another non-positive number

// remove your listeners

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines