kwernet 0 Posted February 5 Report Share Posted February 5 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); } } Quote Link to post Share on other sites
ivan.popelyshev 1094 Posted February 5 Report Share Posted February 5 mousewheel works only on PC's. To scroll on mobiles you have to add pointerevents for multiple fingers, maybe @themoonrat knows how to do that Quote Link to post Share on other sites
kwernet 0 Posted February 10 Author Report Share Posted February 10 Hello @ivan.popelyshev thank you for this point, @themoonrat do you know a way to do that ? Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.