Aller au contenu
Support de Zwii
Iron

[AIDE] Effet Parallax en CSS (ou JS)

Messages recommandés

Bonjour à toute la communauté.


Je m'arrache les cheveux depuis quelques jours pour tenter de faire une effet parallax avec défilement en pur CSS (ou JS) avec quelques images en background avec Zwii.

 

J'ai réussi mais le souci c'est que dans toutes mes tentatives, cela ne fonctionne pas si on passe sur un navigateur utilisant Webkit (ou Webview). Bref, tout ce qui passe par Chrome et ses dérivés.

Donc sur mobile, ça marche pas du tout sauf si on passe par Firefox, là l'effet fonctionne.


Apparemment, de ce que j'ai compris, pour cet effet parallax sur mobile, c'est un peu la fête du slip.


Dans mes recherches sur le Web, j'ai donc trouvé ça : https://github.com/marrio-h/universal-parallax

Le site de démo fonctionne sur tous les navigateurs et même sur mobile. YES !


J'ai donc mis cela sur un Zwii tout neuf pour tester.

Mais alors, c'est complètement pété avec Zwii. En gros, ça s'affiche mal, ça dépasse de partout et l'effet est raté. J'ai essayé de "bidouiller" le code CSS, mais c'est vraiment pas top.


Donc, je m'en remets à vous.

Vous avez peut être déjà un code CSS ou JS qui fonctionne partout et sur mobile aussi ?

Peut-être que @roger pourrait y regarder si il a quelques minutes à lui, en bidouillant le code que j'ai trouvé ci-dessus ?


Bref, merci à vous tous qui pourrait m'aider.

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 42 minutes, roger a dit :

 

J'ai donc téléchargé le script sur le github pour un premier test chez moi dans l'attente de tes réponses ici (ainsi j'anticipe un peu et vais faire une test sur un e version officielle 9.2.10)

 

 

La 9.2.10 ne semble pas être officielle encore

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @roger pour tes tests si rapide ! Ce n'était pas si pressé que ça. Mais merci à toi de te pencher dessus.

 

Je ne peux pas te montrer ce que j'avais essayer de faire car c'est un site en local et non en ligne.

 

Je viens de regarder sur ton site clone. ça fonctionne et ce n'est pas "pété" comme moi.

Par contre, je trouve l'effet Parallax un peu moins "marqué" que l'original.

Mais c'est un excellent début.

 

Merci à toi

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Oui effectivement, c'est que recherche. Merci à toi @roger

Faut que j'étudie la "bête" pour voir si ça colle à ce que je veux faire.

 

Tu as essayé sur mobile et avec Chrome pour l'effet était bien présent ?

Tu as choppé le script ou du coup ?

 

Edit :

 

J'ai trouvé le script. Marche pas sur mobile en passant par Chrome avec le site de demo

Et sur ton site, sur mobile via Chrome, aucunes images n'apparaient.

 

Et oui, j'avais dit que c'était une galère pour les mobiles.

Mais on va trouver, c'est sur.

Modifié par Iron

Partager ce message


Lien à poster
Partager sur d’autres sites

Je suis entrain tester tout ça.

Effectivement on ne peut pas faire plus simple.

 

Merci pour la découverte @roger

 

Par contre, je rencontre un souci depuis quelques temps et qui n'a rien à voir avec notre effet : dès que j'édite avec Zwii le code source Html => rien ne s'enregistre.

Je saisi mon code , je fais OK puis Enregistrer => Je ré-édite le code Html => Rien n'est enregistré.

Si j'édite le code puis fait OK pui ré-édite de suite le code = Y'a rien !

 

Je suis sous Firefox, j'ai vidé cache et autre, toujours pareil.

 

EDIT:

 

Je viens de tester sous IE11 => Idem, tout ce que j'édite ne s'enregistre pas

Modifié par Iron
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir Iron

je me suis laisser piéger également ça n 'enregistrait pas , c 'était les droits sur mon serveur auto hébergé qui n ' étaient pas bon
Dans ton cas c 'est peut être différent ?
en espérant que tu puisses trouver une solution ...

Bonne soirée

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai essayé de reproduire l'effet parallax de la page du site de zwii https://zwiicms.com/

en utilisant le fichier trouvé par @roger : résulat ici https://augras.eu/zwii91dev59/parallax-javascript

Mais comme vous pouvez le constater le résultat n'est pas à la hauteur.

Le problème est que le fond remonte en laissant beaucoup trop de blanc avant qu'il ne soit recouvert pas le reste : en fait le fond devrait rester en place... j'ai joué sur le seule paramètre à disposition en mettant plein d'autres choses que 1.8 mais rien à faire.

Et ensuite quand on clique sur les petites flèches pour faire apparaître la page ça fonctionne mais c'est instantané alors que le but est que ça se fasse doucement : là encore ça m'échappe.

Philippe 

 

 

 

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Je suis comme toi. Je n'arrive pas à effectuer un parallax correct sans qu'il y ait ce f***u espace blanc qui apparaisse.

Et sous Android via Chrome par exemple, les effets ne passent toujours pas.

 

Je vous avoue que je suis à 2 doigts de laisser tomber.

Partager ce message


Lien à poster
Partager sur d’autres sites

Normalement pour que l'image de fond ne bouge pas background-attachment: fixed; devrait faire l'affaire, je crois, mais ça n'a aucun effet : je me demande si ça rentre pas en conflit avec le script utilisé.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 1 heure, augras a dit :

Normalement pour que l'image de fond ne bouge pas background-attachment: fixed; devrait faire l'affaire, je crois, mais ça n'a aucun effet : je me demande si ça rentre pas en conflit avec le script utilisé.

Oui c'est ça, ça ne fait aucun effet.

Je me suis posé la question également si ça ne rentrait pas en conflit avec autre chose.

Et c'est dingue que sous mobile, les effets ne passent pas.

 

A priori et comme je le disais auparavant, c'est un effet qui a du mal à passer partout et beaucoup indique de ne pas le mettre en place pour les mobiles.

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai indiqué "petites flèches" mais ça correspond aux chevrons et à ce que tu as encadré en vert.

Ces chevrons chez moi font la même chose que ta petite maison bleue : on clique sur une image pour aller à l'ancre correspondante... le problème étant que ce n'est pas un effet progressif. 

Sur la page de zwiicms.com c'est la même chose et c'est apparemment du css pour avoir cet effet progressif doux, mais je n'ai pas réussi à reproduire.

Merci pour ton aide @roger.

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Je vous donne le code des pages de Zwii :

 

<div id="cover">
	<div class="inner">
		<div class="speech">
			<span class="zwiico-mimi speechMimi"></span><!--
			--><h1 class="speechBubble">Zwii !</h1>
		</div>
		<p>Un CMS pour créer et gérer facilement son site web sans aucune connaissance en programmation.</p>
		<div id="get">
			<a href="https://zwiicms.com/public/archive/ZwiiCMS-9210.zip" id="downloadStable" onclick="ga('send', 'event', 'Téléchargement');">
				<span class="zwiico-download"></span>9.2.10 <small>19/11/2019</small>
			</a><!--
			--><a href="http://forum.zwiicms.com/" onclick="ga('send', 'event', 'Forum');">
				Support
			</a>
		</div>
		<div id="social">
			<span id="forkongithub">
				<a href="https://github.com/fredtempez/ZwiiCMS/">
					Fork me on GitHub
				</a>
			</span>			
			<a href="https://github.com/fredtempez/ZwiiCMS/" title="GitHub" target="_blank" onclick="ga('send', 'event', 'GitHub');">
				<img src="public/image/github.png" alt="GitHub" width="32" height="32">
			</a>			
			<a href="https://validator.w3.org/" title="W3C Validate" target="_blank" onclick="ga('send', 'event', 'w3cValidator');">
				<img src="public/image/W3C_HTML5_certified.png" alt="w3cvalidator">
			</a>		
			<a href="https://phpsources.net/scripts/php/cms/versions/679_wiicms" title="PHP Sources" target="_blank" onclick="ga('send', 'event', 'PhpSources');">
				<img src="public/image/php-source.png" alt="PhpSource" width="32" height="32">
			</a>			
		</div>
		<a href="#why" id="go">
			<img src="public/image/arrow.png" alt="Pourquoi choisir Zwii ?" width="32" height="32">
		</a>
	</div>
</div>
<div id="container">
	<div class="inner">
		<h1 id="why">Pourquoi Zwii ?</h1>
		<div class="row">
			<div class="col-4">
				<img src="public/image/rocket.png" alt="Simple et complet" width="64" height="64">
				<h2>Simple et complet</h2>
				<p>À l'aide de son interface complète et simple d'utilisation créer et maintenir votre site web devient un jeu d'enfant !</p>
			</div>
			<div class="col-4">
				<img src="public/image/x.png" alt="Sans base de données" width="64" height="64">
				<h2>Sans base de données</h2>
				<p>Ne demande aucune base de données SQL, le contenu de votre site tient dans un seul fichier JSON.</p>
			</div>
			<div class="col-4">
				<img src="public/image/art.png" alt="À votre image" width="64" height="64">
				<h2>À votre image</h2>
				<p>Personnalisez les couleurs, les images, la disposition des élements et autres effets depuis une interface dédiée !</p>
			</div>
		</div>
		<div class="row">

			<div class="col-4">
				<img src="public/image/profile.png" alt="Multi-utilisateurs" width="64" height="64">
				<h2>Multi-utilisateurs</h2>
				<p>Créez vos utilisateurs puis classez les dans des groupes afin de restreindre ou non leur accès aux pages et aux autres fonctionnalités.</p>
			</div>
			<div class="col-4">
				<img src="public/image/folder.png" alt="Gestionnaire de fichiers" width="64" height="64">
				<h2>Gestionnaire de fichiers</h2>
				<p>Gérez vos fichiers ultra simplement depuis un gestionnaire de fichiers complet et moderne !</p>
			</div>
			<div class="col-4">
				<img src="public/image/tools.png" alt="Modulable" width="64" height="64">
				<h2>Modulable</h2>
				<p>De nombreux modules à utiliser en fonction de vos besoins : création de formulaire, news, galerie photos, etc.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-4">
				<img src="public/image/compose.png" alt="Éditeur de texte" width="64" height="64">
				<h2>Éditeur de texte</h2>
				<p>L'éditeur de texte WYSIWYG vous permettra une mise en page simple et efficace sans aucune connaissance en programmation !</p>
			</div>
			<div class="col-4">
				<img src="public/image/tablet.png" alt="Template responsive" width="64" height="64">
				<h2>100% responsive</h2>
				<p>Repose sur une structure de template moderne compatible PC, tablette et smartphone en même temps !</p>
			</div>
			<div class="col-4">
				<img src="public/image/unlocked.png" alt="Open source" width="64" height="64">
				<h2>Open source</h2>
				<p>Complètement gratuit et open source, distribué sous <a href="LICENSE.txt" onclick="ga('send', 'event', 'Licence');">licence GNU GPL v3</a>.</p>
			</div>
		</div>
	</div>
	<div id="footer">Développé avec <span class="zwiico-heart"></span> par <a href="http://remijean.fr/" target="_blank" onclick="ga('send', 'event', 'Portfolio');">Rémi Jean</a> de 2008 à 2018, désormais maintenu avec <span class="zwiico-heart"></span> par <a href="https://www.facebook.com/ftempez/" target="_blank">Frédéric Tempez</a> et toute <a href="http://forum.zwiicms.com/" onclick="ga('send', 'event', 'Forum');">la communauté</a>.</div>
</div>

Et le script  en jquery :


$("#go").on("click", function() {
	$("html, body").animate({
		scrollTop: $("#why").offset().top
	}, "slow");
	return false;
});

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci également @roger pour tes recherches : c'est effectivement le même code que @Fred a donné, et ça fonctionne parfaitement lorsque l'on clique sur les chevrons ou ce que l'on veut, prévu pour ça https://augras.eu/zwii91dev59/parallax-javascript    

Par contre je ne l'ajouterai pas directement dans effectparallax.js sinon il est limité à une utilisation par page. Je mets 

<script type="text/javascript">
$("#va").on("click", function() {
    $("html, body").animate({
        scrollTop: $("#apercu").offset().top
    }, "slow");
    return false;
});
</script>

dans la partie body de configuration du site : on peut ainsi ajouter autant de chevrons que l'on veut dans une page en adaptant #va et #apercu et recopiant les lignes du script autant de fois que nécessaire.

 

Il ne reste plus qu'a trouver comment empêcher l'image de fond de bouger !

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 48 minutes, augras a dit :

que @Fred a donné, et ça fonctionne parfaitement lorsque l'on clique sur les chevrons

C’est tout simplement le script intégré dans la page d’accueil de Zwii.  
Il ne fonctionne que sur une page puisqu’il pointe sur un id plutôt qu’une classe et ainsi pas  nécessaire de cloner les lignes de jquery. 

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...