If you want a “fadeIn” effect instead of “fadeInUp/fadeInDown” effect do the following:

1. Open up your script.js file.
2. Find section “1. LOADING”.
3. Find the following code:

$("#intro .container-mid").fadeIn("slow");
$('#intro.intro-1 img.logo').addClass('animated fadeInDown);

setTimeout(function() {
$('#intro.intro-1 h1').addClass('animated fadeInUp');    

setTimeout(function() {
$('#intro.intro-1 p').addClass('animated fadeInUp');

setTimeout(function() {
$('#intro.intro-1 .arrow-wrap').addClass('animated fadeInUp');

setTimeout(function() {
$('#bg-effect-1 canvas').addClass('animated fadeInUp');  

setTimeout(function() {
activeOverlays = 1;
$('#bg-effect-1 canvas').css('opacity','1');  
$('#intro.intro-1 .arrow-wrap').css('opacity','1');
$('#intro.intro-1 p').css('opacity','1');
$('#home-screen .content-block h1').css('opacity','1');
$('#intro.intro-1 img.logo').css('opacity','1');

}, 1000); 

}, 500);

}, 500);

}, 500);

}, 500);

4. Update it to:

$("#intro .container-mid").fadeIn("slow");
$('#intro.intro-1 img.logo').addClass('animated fadeIn');

setTimeout(function() {
$('#intro.intro-1 h1').addClass('animated fadeIn');    

setTimeout(function() {
$('#intro.intro-1 p').addClass('animated fadeIn');

setTimeout(function() {
$('#intro.intro-1 .arrow-wrap').addClass('animated fadeIn');

setTimeout(function() {
$('#bg-effect-1 canvas').addClass('animated fadeIn');  

setTimeout(function() {
activeOverlays = 1;
$('#bg-effect-1 canvas').css('opacity','1');  
$('#intro.intro-1 .arrow-wrap').css('opacity','1');
$('#intro.intro-1 p').css('opacity','1');
$('#home-screen .content-block h1').css('opacity','1');
$('#intro.intro-1 img.logo').css('opacity','1');

}, 1000); 

}, 500);

}, 500);

}, 500);

}, 500);

5. That’s it.

Thank you very much for the fast support it is a pleasure! Thanks

Thank you for your feedback. We try to do the best for our customers.

Hi

Do you want to move the effect to another place or do you want to hide it as long as the overlays are active / visible?

You need html,css and js to run it.

html – to define the “canvas” element
css – to make canvas element fullscreen
js – to run the canvas constellation effect

There is no real tutorial but a lot of code snippets just google “canvas constellation effect”.

I would like to move the effect to another place, correct!

I am currently checking out this link: http://codepen.io/acauamontiel/pen/mJdnw

If you have any other suggestions for moving it, please let me know (For example, say I wanted to transfer your exact constellation canvas effect to a plain black page).

Thanks again!

Ok, if you want to move / customize the effect I can’t help you anyways because this would not fit my support terms.

http://themeforest.net/item/gravity-coming-soon-under-construction/8875822/support

But I strongly recommend to use some code from codepen or rip gravity down to the constellation effect and update the background to “color” and make it black via config.js file if you want a plain black page.

Hi,

please send me your files in zip via mail I will try to find the problem asap.

What kind of hosting do you use (provider,hosting kit name)?

What other form you tested?

Kind regards

Avanzare

Hi,

I didn’t hold the rights and I don’t sell them with the template.

Kind regards

Avanzare

The problem is that it’s to much content for panorama view the only thing you can do is to allow the container to overflow.

You can do this with following code:

#intro .container-mid {
    left: 0;
    overflow: auto;
    width: 100%;
    top: 0;
    transform: translate(0);
}

Add it in the media query.

I’ll just leave it as is, the full website will be up soon anyhow. Thanks for your prompt response and excellent customer support.

Thanks a lot for your feedback.

Sorry must have been a caching issue, as it’s all working now!

Alright if you have something else feel free to contact me via my contact form on my profile.

Hi,

Gravity is using a loading plugin without gifs.

http://github.hubspot.com/pace/docs/welcome/

But you can overwrite the css spinner with for example your gif.

How to find the css spinner class:

1.Open layout.css

2. Search for the “2. LOADING” section

3. Find the following code

.pace .pace-activity
{
    position: fixed;
    z-index: 2000;
    top: 50%;
    right: 50%;

    display: block;

    width: 36px;
    height: 36px;

    -webkit-animation: pace-spinner 400ms linear infinite;
       -moz-animation: pace-spinner 400ms linear infinite;
        -ms-animation: pace-spinner 400ms linear infinite;
         -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;

    border: solid 2px transparent;
    border-top-color: #1fb8b2;
    border-left-color: #1fb8b2;
    border-radius: 100%;
}

4. Edit it

That’s it but if your image is to large and not centered correctly add following css rule:

transform: translate(50%,-50%);

I answered your mail.

Just change the background option from image to youtube.

That’s it.

I’m sorry I have currently only a small amount of test devices…

Can you confirm that it’s looking similar to this:

http://quirktools.com/screenfly/#u=http%3A//creazione.avanzare.co/gravity/demo/image/black/index.html&w=568&h=320&a=37&s=1

And again thanks for helping to improve Gravity.

Here is the problem to be more clear I couldn’t scroll up and down http://www.screencast.com/t/BZqySOqGwGHt thanks

OK, I will put a fix for this issue in the next update.

Please send me your files in .zip/.rar via mail that I can fix this issue as soon as possible.

What do you think about a logo version without byline but with an arrow boxed pointing down?

Thank you for the great feedback.

You can’t use the html template directly because it isn’t a wordpress plugin but you can upload it for example manuel on a web space and then you can set it as main page for the time you work on your wordpress.

I download them to check them but all are working as they should please check them again.

I am sorry but you can’t add more overlays and thank you.

Thanks a lot for your feedback.

I answerd your mail.

The template is not working/made with/for wordpress you have to upload it manuel on your webspace…

It’s very easy you have just to copy and update the link and if you want you can use another icon from iconfont.

My is not based on it.I am sorry but i am not available for custom work.

No worries, I manage to create what I needed and it’s working fine. Thanks. Hey, you had mentioned awhile back that you’ll be provide a Template Update on this soon? Since there was a bug on some of the browser where the Coming Soon page doesn’t display properly or something like that. As I recall from our preview forum discussion. Thanks.

The update is finished but its not even a update it a complet new template but I currently work on a config file setup type and after I finished the feature I will upload it.