Comment afficher la météo locale avec fond adaptatif dans Webflow ?
Apprenez à afficher la météo locale du visiteur avec un fond qui s'adapte aux conditions météo dans Webflow.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher la météo locale du visiteur avec un fond qui s'adapte aux conditions météo dans Webflow.
Exemple
Autorisez la géolocalisation pour voir votre météo — ou simulez une condition
| Condition | Icône | Dégradé de fond |
|---|---|---|
| Ensoleillé | ☀️ | Or vers orange |
| Nuageux | ⛅ | Gris bleuté |
| Pluvieux | 🌧️ | Bleu profond |
| Neigeux | ❄️ | Bleu clair pâle |
| Orageux | ⛈️ | Anthracite sombre |
| Brumeux | 🌫️ | Gris clair |
1. Créez le conteneur dans Webflow
Créez un Div avec l'ID weather-widget. Le script injecte le contenu et le style (fond dégradé, icône, température) automatiquement. Le Div peut être placé n'importe où dans votre page.
2. Ajoutez le script dans Footer code
(function() {
var el = document.getElementById('weather-widget');
if (!el) return;
var weatherConfig = {
sunny: { icon: '☀️', label: 'Ensoleillé', bg: 'linear-gradient(135deg,#ffd700,#ff8c00)', color: '#111' },
cloudy: { icon: '⛅', label: 'Nuageux', bg: 'linear-gradient(135deg,#b0bec5,#78909c)', color: '#fff' },
rainy: { icon: '🌧️', label: 'Pluvieux', bg: 'linear-gradient(135deg,#4169e1,#1e3a8a)', color: '#fff' },
snowy: { icon: '❄️', label: 'Neigeux', bg: 'linear-gradient(135deg,#e3f2fd,#90caf9)', color: '#111' },
stormy: { icon: '⛈️', label: 'Orageux', bg: 'linear-gradient(135deg,#37474f,#1a1a2e)', color: '#fff' },
foggy: { icon: '🌫️', label: 'Brumeux', bg: 'linear-gradient(135deg,#cfd8dc,#90a4ae)', color: '#111' },
};
function getCondition(code) {
if (code === 0) return 'sunny';
if (code <= 3) return 'cloudy';
if (code <= 48) return 'foggy';
if (code <= 67) return 'rainy';
if (code <= 77) return 'snowy';
return 'stormy';
}
function render(condition, temp, city) {
var cfg = weatherConfig[condition] || weatherConfig.sunny;
el.style.cssText = 'background:' + cfg.bg + ';border-radius:16px;padding:1.5rem;' +
'display:flex;align-items:center;gap:1rem;transition:all 0.5s;';
el.innerHTML = '<span style="font-size:40px;">' + cfg.icon + '</span>' +
'<div><p style="font-size:20px;font-weight:500;color:' + cfg.color + ';margin:0;">' +
temp + '°C — ' + cfg.label + '</p>' +
'<p style="font-size:13px;color:' + cfg.color + ';opacity:0.7;margin:0;">' + (city || 'Votre position') + '</p></div>';
}
render('cloudy', '...', 'Localisation en cours...');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = pos.coords.latitude, lon = pos.coords.longitude;
fetch('https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon + '¤t_weather=true&timezone=auto')
.then(function(r) { return r.json(); })
.then(function(d) {
var w = d.current_weather;
render(getCondition(w.weathercode), Math.round(w.temperature), 'Votre position');
});
}, function() {
render('sunny', '22', 'Dubaï (démo)');
});
} else {
render('sunny', '22', 'Dubaï (démo)');
}
})();Conclusion
Un widget météo avec fond adaptatif crée une expérience contextualisée. Cas d'usage :
- Pages d'accueil de sites lifestyle ou voyage
- Applications SaaS avec personalisation contextuelle
- Sites locaux qui veulent montrer leur ancrage territorial
Autorisez la géolocalisation pour voir votre météo
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
