Home › Forums › General Questions › Add Fade In effects after Reloader?
- This topic has 8 replies, 3 voices, and was last updated 3 years, 3 months ago by mOnz.
-
AuthorPosts
-
2021-09-16 at 5:29 am #44717mOnzCustomer
Helo there..
I want to ask, how to add ‘Fade In’ effects after reloader?
Anyone can help me?Thank you all.. :)
2021-09-16 at 2:39 pm #44743Mikhail LuzyaninStaffWhat exactly must Fade in?
Co-founder and lead graphics specialist at Soft8Soft.
2021-09-16 at 4:45 pm #44751mOnzCustomerWhat exactly must Fade in?
Hi.. Because I needed a bit of a smooth transition for add a little bit of dramatic effect..
After the Reloader icon.. The screen went dark, then my 3d scene came in.I think it gonna be cool.
2021-09-16 at 5:14 pm #44753jdhutchinsonCustomerHi mOnz!
I’ve wondered the same thing for my whole 3 months using Verge3D. I have still not found a good solution, so I would be really keen to know what is suggested.The problem is a lack ability to really know when the app has finished loading. When my app reaches 100% according to the Verge calculation, there is a lot of lag. I create interactions for my preloader in webflow, and these all stall when Verge reaches 100%.
I think the new HTML on event puzzle option, ‘load’, could be helpful here. On event of ‘load’ for v3d-container, anim param opacity for elem v3d container, between 1 and 0, in, for example, 3s.
Jon
2021-09-17 at 11:50 am #44775Mikhail LuzyaninStaffHere’s an example for you. To controll speed of fade in effect change Duration in Animate param puzzle.
Attachments:
You must be logged in to view attached files.Co-founder and lead graphics specialist at Soft8Soft.
2021-09-17 at 1:25 pm #44778jdhutchinsonCustomerThank you Mikhail.
Is there a reason we can’t use animate param in the init tab?
Yur solution is great, but it then means we can’t use the ‘percentage’ puzzle. So we feel a little bit stuck between solutions which have their respective qualities.
2021-09-17 at 2:33 pm #44779Mikhail LuzyaninStaffThis is just a fake of preliader was hidden you can’t hide real preliader.
Co-founder and lead graphics specialist at Soft8Soft.
2021-09-18 at 2:11 am #44792mOnzCustomerHere’s an example for you. To controll speed of fade in effect change Duration in Animate param puzzle.
Thanks Mikhail.. Thanks for your effort.
But what I mean is not fade in with ‘Preloader’..
Actually, I don’t have problem with my preloader.What i want to do is : ‘After’ preloader came END.. My 3D Scene start in, from the dark into normal light.
I don’t want to turn off my light in 3D software, because it will be looping in my scene.
Please check my test site : http://www.test3.monzstudios.com
Take note after preloader/loading bar end.*And my 2nd task is : How to hide swipe icon after the visitor swiping or drag the mouse button. But i will try it later..
Hi mOnz!
I’ve wondered the same thing for my whole 3 months using Verge3D. I have still not found a good solution, so I would be really keen to know what is suggested.The problem is a lack ability to really know when the app has finished loading. When my app reaches 100% according to the Verge calculation, there is a lot of lag. I create interactions for my preloader in webflow, and these all stall when Verge reaches 100%.
I think the new HTML on event puzzle option, ‘load’, could be helpful here. On event of ‘load’ for v3d-container, anim param opacity for elem v3d container, between 1 and 0, in, for example, 3s.
Jon
Hi Jdhutchinson..
I believe, people who come here are mostly 3d artists who are lazy to learn coding like me.. :DAnd I hope the Soft8soft/Verge3d team can help us, to make it more easier for the 3d artists to put their work into the web, in a simple and fast way.
2021-09-18 at 5:13 pm #44812mOnzCustomerHi all.. Forget about my question above.
I’ve got the solution.Solution :
1. Add class in your html v3d container div, here i named it “fade-in” :<div class="fade-in" id="v3d-container"> </div>
*why i can not post full code here?
but that is what should you do!2. Then add this code in to your css file :
.fade-in {
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}@-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}@-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}@-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}Here’s what i got
https://test4.monzstudios.com/
Now my task is ‘How to showing up the Swipe button AFTER preloader END, then hide it after The Visitor click/drag/or ratate my Scene’
-
AuthorPosts
- You must be logged in to reply to this topic.