kwernet

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Hello @ivan.popelyshev thank you for this point, @themoonrat do you know a way to do that ?
  2. Hello :) I tried to make a canva which can scroll on mobile and desktop. I have succeeded to scroll on desktop and even with touchpad, but i can't to find a way to scroll on my mobile. I have already manage the scroll with mouse wheel but i haven't succeeded with touchscreen. Do you have an idea to do work this below: Thank you for your response :) this.container = new PIXI.Container(); this.app.stage.addChild(this.container); this.images = [t1, t2, t3, t4]; this.WHOLEWIDTH = this.images.length*(this.width + this.margin) loadImages(this.images, (images)=>{ this.loadImages = images; this.add() this.render() this.scrollEvent(); }) } scrollEvent() { document.addEventListener( 'mousewheel', (e) => { this.scrollTarget = e.wheelDelta / 3; }, { passive: true }, ); } add() { let parent = { w: this.width, h: this.height, }; this.thumbs = []; this.loadImages.forEach((img, i) => { var nameEnum = { 0: { name: 'Ecocampus3', value: '/Ecocampus3' }, 1: { name: 'Hoppin World', value: '/HoppinWorld' }, 2: { name: 'Distrame', value: '/Distrame' }, 3: { name: 'Club les Piranhas du Nord', value: '/CAPN' }, }; let texture = PIXI.Texture.from(img.img); texture.title = nameEnum[i]; const sprite = new PIXI.Sprite(texture); let container = new PIXI.Container(); let spriteContainer = new PIXI.Container(); let mask = new PIXI.Sprite(PIXI.Texture.WHITE); mask.width = this.width; mask.height = this.height; sprite.mask = mask; sprite.anchor.set(0.5); sprite.position.set(sprite.texture.orig.width / 2, sprite.texture.orig.height / 2); let image = { w: sprite.texture.orig.width, h: sprite.texture.orig.height, }; let cover = fit(image, parent); spriteContainer.position.set(cover.left, cover.top); spriteContainer.scale.set(cover.scale, cover.scale); container.x = (this.margin + this.width) * i; container.y = this.height / 10; spriteContainer.addChild(sprite); container.interactive = true; container.on('mouseover', this.mouseOn, { passive: true }); container.on('mouseout', this.mouseOut, { passive: true }); container.on('click', this.redirect, { passive: true }); container.on('touchstart', this.redirect, { passive: true }); container.on('touchmove', this.redirect, { passive: true }); container.addChild(spriteContainer); container.addChild(mask); this.container.addChild(container); this.thumbs.push(container); }); } redirect(e) { let e1 = e.currentTarget.children[0].children[0]; let e2 = e1.texture.title.value; window.location.replace(e2); } mouseOut(e) { let e1 = e.currentTarget.children[0].children[0]; gsap.to(e1.scale, { duration: 1, x: 1, y: 1, }); e1.children[0].text = ''; } mouseOn(e) { let e1 = e.target.children[0].children[0]; const skewStyle = new PIXI.TextStyle({ fontFamily: 'Raleway', fontSize: '60px', dropShadowColor: '#fff', fill: '#fff', fontWeight: 'bold', }); let e2 = e1.texture.title.name; const basicText1 = new PIXI.Text(e2, skewStyle); basicText1.x = -400; basicText1.y = 100; gsap.to(e1.scale, { duration: 1, x: 1.1, y: 1.1, }); if (e1.children[0]) { e1.children[0].text = e2; } else { e1.addChild(basicText1); } }