I want a black background at startup

Tagged: Preloaders

This topic has 10 replies, 4 voices, and was last updated 3 years, 4 months ago by gf3d.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
2021-07-13 at 11:37 am #42824

gf3d
Customer

Hi there,

how can i have a black background at startup….

the preloader show a white logo within the borders of the image.
The logo is a lpg with a black background…
My customer want the whole screen to be black at startup…
except for the white logo..

How can i di this?

Greets

Ger

2021-07-13 at 1:32 pm #42825

andreyneo
Participant

Добрый день,
Подскажите как можно решить проблему? Не работает приложение на устройствах android с 10 версии. На android 9, более слабых и старых устройствах запускается без проблем. На любых устройствах apple все работает в любом браузере. Png с ошибками из консоли прилагаю.
Заране Благодарю за любую помощь.

Attachments:
You must be logged in to view attached files.

2021-07-13 at 1:53 pm #42828

gf3d
Customer

Hi thanks for the answer…but i cannot read what you wrote there

Greets

Ger

2021-07-13 at 9:10 pm #42841

xeon
Customer

Hi there,
Need a bit of clarification. Are you just wanting the preloader HTML page to have a black background or are you wanting your Verge3d scene to have a black background?

In case you are wanting your pre-loader page to have a black background you have a number of options:
1. using bgColor attribute on the preloader page
2. Using an inline style attribute on the preloader page
3. Using CSS

The easiest would be to just edit the preloader HTML page and add the bgColor attribute.

If you are wanting your Verge3D application to have a black background. There are a number of ways to do this depending on your project. This can be done in your 3D package by encompasing your scene in a black 3D object, it can be done through your environmental shader, it can be done by selecting a Black background app when creating the Verge3d project.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-07-14 at 2:29 pm #42868

gf3d
Customer

Hi xenon..i want the preloader page to have a black background…

Nor being a programmer can you explain it a bit more?

Thanks

Ger

2021-07-14 at 3:30 pm #42870

andreyneo
Participant

Привет друзья,
Проблема в том, что на устройствах android 10 версии не грузиться V3D! Все хорошо работает на android 9 и любых устройствах Apple все Ок!

2021-07-14 at 7:32 pm #42872

xeon
Customer

What are you using to create your preloader page?

If you are using Webflow:
Open your HTML file,
On the left side (Navigator) select Body
then
On the right side (Background Properties), scroll down to the Background section and change the color to black. Hex code: #000000
If you have created a large DIV block to center your preloader, you will have to change the background color of the DIV block.

Altenatively, you can modify the preloader page CSS:

.body {
overflow: auto;
height: auto;
background-color: #000000;
-o-object-fit: fill;
object-fit: fill;
}

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-07-14 at 7:40 pm #42873

andreyneo
Participant

Thank you so much.

2021-07-14 at 7:42 pm #42874

haris
Customer

You can use the Verge 3d preloaders pack it’s quite simple and amazing
https://verge3d.blogspot.com/2021/07/how-to-use-verge-3d-preloaders-pack.html

2021-07-15 at 7:18 am #42895

gf3d
Customer

Hi Xenon,

i Did as you wrote here….

I edited the css file but no changes….

I´ve uploaded the css file.

maybe you just have a look at it.

Thanks

Ger

2021-07-15 at 7:21 am #42896

gf3d
Customer

Hi xenon again,

i´m not sure wether the css files has uploaded.

so this is what is written in it…..

/* __V3D_TEMPLATE__ – template-based file; delete this line to prevent this file from being updated */
.v3d-simple-preloader-logo {
background-image: url(“jameslogo3d.png”);
background-size: cover;

}

.body {
overflow: auto;
height: auto;
background-color: #000000;
-o-object-fit: fill;
object-fit: fill;

}

#v3d-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;

}

.fullscreen-button {
position: absolute;
bottom: 20px;
right: 260px;
width: 50px;
height: 50px;
cursor: pointer;
background-size: 100% 100%;
display: none;
z-index: 0;
}

.fullscreen-open {
background-image: url(‘images/fullscreen_open.png’);
}

.fullscreen-close {
background-image: url(‘images/fullscreen_close.png’);
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

Greets

Ger
Author

Posts