We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Add Fade In effects after Reloader?

Home Forums General Questions Add Fade In effects after Reloader?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44717
    mOnz
    Customer

    Helo there..

    I want to ask, how to add ‘Fade In’ effects after reloader?
    Anyone can help me?

    Thank you all.. :)

    #44743

    What exactly must Fade in?

    Co-founder and lead graphics specialist at Soft8Soft.

    #44751
    mOnz
    Customer

    What 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. B-)

    #44753
    jdhutchinson
    Customer

    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

    #44775

    Here’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.

    #44778
    jdhutchinson
    Customer

    Thank 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.

    #44779

    This is just a fake of preliader was hidden you can’t hide real preliader.

    Co-founder and lead graphics specialist at Soft8Soft.

    #44792
    mOnz
    Customer

    Here’s an example for you. To controll speed of fade in effect change Duration in Animate param puzzle.

    Thanks Mikhail.. Thanks for your effort. :good:
    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.. :D

    And 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.

    #44812
    mOnz
    Customer

    Hi all.. Forget about my question above.
    I’ve got the solution. B-)

    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/
    :yahoo:

    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’

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.