defina seu globo
Cinco passos para mostrar
seu mundo com globos 3D
Passo 1.
Crie um recipiente de globo 3D
Adicione uma tag <div> à página. Dê a ela uma classe fs-3dglobe-container para deixar tudo organizado
Adicione à tag <div> o atributo do recipiente fs-3dglobe-element = container
Adicione à tag <div> o atributo de imagem de globo .jpg fs-3dglobe-img = https://urlofyourjpg.com
Você pode carregar sua imagem de globo .jpg no painel de recursos do Webflow e copiar a url da imagem hospedada!
A div com fs-3dglobe-container vai conter seu globo.
Acrescente altura e largura a esta classe para definir dimensões para seu globo.
Acrescente altura e largura a esta classe para definir dimensões para seu globo.
Para melhorar os resultados e o desempenho, recomendamos carregar imagens .jpg com resolução de 8192x4096 pixels e um tamanho de arquivo inferior a 4 MB. A imagem deve seguir o padrão de projeção cilíndrica equidistante.
Isso é muito confuso? Temos exemplos de globos que você pode baixar na página Recursos.
Passo 2.
Configure o marcador e a dica de contexto
Adicione uma tag CMS Dynamic List. Adicione o atributo fs-3dglobe-element=list
Adicione uma tag <div> ao marcador do globo. Adicione fs-3dglobe-element = pin
Adicione uma tag <div> à dica de contexto do globo. Adicione fs-3dglobe-element = tooltip
Adicione uma tag Bloco de texto para a latitude. Adicione fs-3dglobe-element = lat (isto pode ficar oculto)
Adicione uma tag Bloco de texto para a longitude. Adicione fs-3dglobe-element = lon (isto pode ficar oculto)
Passo 3.
Conecte os campos do CMS
Conecte cada elemento ao seu respectivo campo do CMS
Campos obrigatórios:
Latitude
Longitude
Personalização do marcador:
Adicione qualquer campo do CMS para personalizar dinamicamente o conteúdo de seu marcador (isto é, texto, imagem, etc.)
Personalização da dica de contexto:
Adicione qualquer campo do CMS para personalizar dinamicamente o conteúdo de sua dica de contexto (isto é, texto, imagem, etc.)
Latitude
Longitude
Personalização do marcador:
Adicione qualquer campo do CMS para personalizar dinamicamente o conteúdo de seu marcador (isto é, texto, imagem, etc.)
Personalização da dica de contexto:
Adicione qualquer campo do CMS para personalizar dinamicamente o conteúdo de sua dica de contexto (isto é, texto, imagem, etc.)
Passo 4.
Estilize e personalize
Estilize seu marcador e sua dica de contexto como preferir. Os marcadores e as dicas de contexto são 100% amigáveis no Webflow Designer. Você pode criar marcadores e dicas de contexto com formas, tamanhos, cores e efeitos únicos.
Coloque qualquer conteúdo dinâmico ou estático dentro do marcador e da dica de contexto. Adicione imagens, fotos, ícones, títulos, textos, links, vídeos, div art, Lottie e ainda mais.
Dicas de contexto
Por que o Weglot?
Desenvolvedores No Code em todo o mundo estão descobrindo a maneira mais fácil de traduzir sites e aplicativos de clientes.
1960s
O primeiro protótipo viável da Internet foi inventado.
Por que o Weglot?
Desenvolvedores No Code em todo o mundo estão descobrindo a maneira mais fácil de traduzir sites e aplicativos de clientes.
Por que o Weglot?
A primeira mensagem da história foi transmitida no dia 24 de maio de 1844, às 8h45 da manhã. Morse, em Washington, telegrafou para Vail, em Baltimore: "O que Deus possibilitou!".
Canadá
4700
Sites do Webflow
Há 250 milhões de anos
O supercontinente chamado Pangea se formava. As florestas de coníferas, os répteis e os synapsidas (antepassados dos mamíferos) eram comuns.
Montserrat
Aa
800 Extra negrito
3000 BCE
Os primeiros idiomas escritos são desenvolvidos pelo povo sumério do sul da Mesopotâmia.
APOLLO 11
Buzz Aldrin, 21 de julho de 1969
Pouso na Lua
Passo 5.
Copie e cole os scripts
Cole o arquivo css na tag <head> das configurações da página.
Cole os três arquivos Javascript na tag <body> das configurações da página.
Page Settings
Inside<head> tag
<link async rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/styles.min.css">
Page Settings
Before </body> tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/3dglobes@1/FsGlobe.min.js"></script>
Está pronto.
Publique seu projeto e veja
seu globo 3D ganhar vida!
seu globo 3D ganhar vida!
Está com preguiça? ✌
Clone este projeto do Webflow com todas as etapas implementadas.
CLONE NO WEBFLOW