What’s the best way to make items fade in/out when scrolling?
What’s the best way to make items fade in/out when scrolling? For example a panel at the bottom of the screen that by the time it makes it to the top of the screen it fades out/ in.
]]>
D5 Creation
< ![CDATA[
https://lh3.googleusercontent.com/4JIcZSbNubzg-rZ-QC_2wFqtitkBg7SGxG9kSDZhhToT3xMJMUjZRAom2yRkAMXeLRbdxBmUATI
]]>
< ![CDATA[
https://lh3.googleusercontent.com/sXkaPB6agw5r5T0s3zdkcROsU2VbQt-nsgAQ5IsxoZsxSgCtgeb2ZYgs_t5S4WAmDVLo8Y80LQk
]]>
< ![CDATA[
https://lh3.googleusercontent.com/BP4SzWxIDO7XxARuzAnZH4IclxTUusZaGQFGVY22MwjilXtPh5VUOvDZ84g7HunNJ4Fz1CUW9Ws
]]>
< ![CDATA[
https://lh3.googleusercontent.com/8cR0B86-F3haeO1Ja60F9r98xhJnLYen4awUWbszUk8xim4KnVjlVQS8kP3QVKcX7pR8mNh5I6c
]]>
< ![CDATA[
Trying to replicate something similar to the these photos.
]]>
< ![CDATA[
The best way I can think of is a script on the position changed event. There take the positionY (or X) and set the transparency of the item accordingly.
]]>
< ![CDATA[
TrianguloY Would you happen to have an example. I’m very new to scripting but love the concept. I have used your other scripts with success but don’t know how to get one started.
]]>
< ![CDATA[
This is a basic skeleton to you to test and learn. If you want to apply the transparency to different items just duplicate the corresponding lines (remember to use different names)
If you want an item to fade off while another fades on just do (1-p)*255.
If you have more questions just ask, but check the api reference and try yourself a bit before 🙂
————
var cont = getEvent().getContainer();//get the container
var bar = cont.getItemByName(“itemName”);//get the item
var p = cont.getPositionY()/cont.getHeight();//get the current page, position divided by size
p=1-p;//invert, so that 0->1 and 1->0
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,p*255).commit();//set the value
]]>
< ![CDATA[
TrianguloY Thank you
]]>
< ![CDATA[
TrianguloY I’m using the script…
var cont = getEvent().getContainer();//get the container
var bar = cont.getItemByName(“Pg2️⃣”);//get the item
var p = cont.getPositionX()/cont.getWidth();//get the current page, position divided by size
p=1-p;//invert, so that 0->1 and 1->0
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,p*255).commit();//set the value
var cont = getEvent().getContainer();//get the container
var bar = cont.getItemByName(“Pg3️⃣”);//get the item
var p = cont.getPositionX()/cont.getWidth();//get the current page, position divided by size
p=1-p;//invert, so that 0->1 and 1->0
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,(1-p)*255).commit();//set the value
This fades PG2️⃣ out while fading PG3️⃣ in. How would I also fade PG2️⃣ out when PG 1️⃣ fades in? I have tried many different combinations of this script but just can’t seem to figure it out.
https://lh3.googleusercontent.com/Q87XI7_C5crTH2Zty_ySgb3cU8j3T500o6kYiqu5PBbVYWo6JqtmL5zYRsWCt7yZEV9hbVYNrYw
]]>
< ![CDATA[
But all the items are in the same container or different? (From the screenshot I guess in the same).
The script takes the position of the container, calculates a 0-1 value and change the transparency of an item (in your case two different values p and 1-p)
But you have three items and so I don’t understand what you want. Could you explain with more details?
]]>
< ![CDATA[
Sorry. I have three panels side by side on a single desktop I’ve labeled them PG1️⃣ PG 2️⃣ and PG3️⃣ using the script above, when scrolling from home to the page right of home, Pg 2️⃣fades out while Pg3️⃣fades in. Trying for the same effect when scrolling from home page to page left of homescreen, wanting Pg2️⃣ to fade out while Pg1️⃣fades in
]]>
< ![CDATA[
I was trying to show with the screen shot that panel (PG3️⃣) was faded out while on home page but also wanting (PG1️⃣) to do the same
]]>
< ![CDATA[
https://lh3.googleusercontent.com/S_6X3TwpbnB12mbOZQRLn3hqP_-Xtp5wKhjDmfUNKjdo_rHlqDqt1m4KBpRCEdTsNwNrj9Gr9Wg
]]>
< ![CDATA[
Ah, that makes sense. Couldn’t test, but try this (change the names with the emojis):
var cont = getEvent().getContainer();//get the container
var pp = cont.getPositionX()/cont.getWidth();//get the current page, position divided by size
var bar = cont.getItemByName(“Pg1”);//get the item
var p=1-math.abs(pp+1);
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,p*255).commit();//set the value
bar = cont.getItemByName(“Pg2”);//get the item
p=1-math.abs(pp-0);
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,p*255).commit();//set the value
bar = cont.getItemByName(“Pg3”);//get the item
p=1-math.abs(pp-1);
p=p<0?0:p>1?1:p;//clamp the value between 0 and 1 ( check ?: ternary operator for details)
bar.getProperties().edit().setInteger(“i.alpha“,p*255).commit();//set the value
]]>
< ![CDATA[
Got this error. Tried taking out (math.aps)on line 5 then it made pg1️⃣ fade in but pg2️⃣ didn’t fade out. and PG 3️⃣ quit fading at all
https://lh3.googleusercontent.com/fXl4AQj3bh0Xq9HKC6pQPfPvr46J8z_IokMbzc1firdm0WcVs6vUKEt65SBIBPN8NogKu-TQTk4
]]>
< ![CDATA[
Arg, it’s ‘Math’, not ‘math’ (capital letter)
Change it, don’t remove it
]]>
< ![CDATA[
Works great! Thanks again. Wish I could pay you back for your help. I have extra google rewards money if theres a way to send it to you. Any ideas?
]]>
< ![CDATA[
Thanks 🙂 but don’t worry. (And I think it is difficult to transfer credit from Google play, but even impossible to transfer rewards-gained one)
]]>
< ![CDATA[
Do you have any templates or apps for sale? I could buy, so you could at least get a little something. I have $30 that’s goin to waste at the moment.
]]>
< ![CDATA[
Not at the moment.
I thought of making one of those ‘1€’ donation apps, but never did. I’ll tell you if someday I finally make it. Thanks anyway.
]]>