Day.png);">
Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Sorties: Star Trek: Glorious Wolf - (...) / Sorties: Dread Mac Farlane - episode 3 / News: Plein d'images cools créées par (...) / Sorties: Star Trek: Glorious Wolf - (...) / Jeux: Final Fantasy 2.0 / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

422 connectés actuellement

29190128 visiteurs
depuis l'ouverture

5179 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Blog Alioune Fall

Fairy Tail Constellations

Guelnika & E-magination

Le Comptoir Du clickeur

Tashiroworld

Offgame

Eclipso

Tous nos partenaires

Devenir
partenaire



forums

Index du forum > Entraide > [RESOLU] [Web] Html scroll looping background parallax


NOIRACIDE - posté le 04/04/2018 à 16:52:24 (2696 messages postés)

❤ 0

Domaine concerné: Html
Logiciel utilisé: Web
Hello! Ma team taff sur un site perso en ce moment et on aurait souhaité faire un effet de parallax en image en Html.
Seulement on sais pas comment faire pour faire boucler les images en parallax, on sais même pas si c'est possible en fait.
Est-ce que quelqu'un s'y connait dans le domaine?
image
Pour le code ---->
http://stackoverflow.com/questions/49432496/force-div-height-to-fit-content-with-perspective

http://lumensection.com


Nemau - posté le 04/04/2018 à 20:51:52 (52129 messages postés) - honor -

❤ 0

The Inconstant Gardener

T'as qu'à faire une grosse gif. :F

Plus sérieusement : demande à Nonor, y a une image qui défile en continue en haut du site d'Aë. Edit : en bas aussi.



Quel RPG Maker choisir ?Ocarina of Time PCPolaris 03 • Le matérialisme c'est quand tu as du matériel.


Roi of the Suisse - posté le 04/04/2018 à 21:56:25 (29765 messages postés) - honor -

❤ 0

Alerte neige !

Ça devrait être possible en modifiant l'offset du background via un code javascript.
Je crois qu'en CSS c'est :

Portion de code : Tout sélectionner

1
background-position: 100px 5px; 




EDIT:
Voici un exemple avec deux backgrounds qui ne vont pas à la même vitesse de parallaxe lorsqu'on scrolle :

Portion de code : Tout sélectionner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8"/>
<style>
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}
 
.fond{
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image:url(./fond.png);
}
 
 
</style>
<script>
window.onscroll = function() {myFunction()};
 
function myFunction() {
        var scrolling = document.body.scrollTop + document.documentElement.scrollTop;
        console.log(scrolling);
        document.getElementById("fond1").style.backgroundPosition = "0px " + (scrolling / 20) + "px";
        document.getElementById("fond2").style.backgroundPosition = "0px " + (scrolling / 7) + "px";
}
</script>
</script>
</head>
 
<body>
<div id="fond1" class="fond">
<div id="fond2" class="fond">
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>
<br>
</div>
</div>
</body>
</html>


Pour faire fonctionner cet exemple, il te faut une image "fond.png" dans le même dossier que ton fichier html. L'image "fond.png" doit évidemment comporter des zones de transparence.

Ici j'ai mis une parallaxe de 20 sur le premier fond et une parallaxe de 7 sur le second fond. Au bout de quelques scrolls, les deux fonds commencent à se détacher l'un de l'autre.



L'essentialisme c'est quand ta voiture a un moteur essence. | Es-tu une star ? | Kujira no Hara | Polaris 03 | Planète Glutko

Index du forum > Entraide > [RESOLU] [Web] Html scroll looping background parallax

repondre up

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts/Plugins | Ressources graphiques / sonores | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers