Un utilisateur a demandé 👇
Salut! Très étonnant sans parallaxe. Comment mettre un effet de parallaxe sur les sections et la colonne ? Essayez un crayon jaune enfichable, mais pour une raison quelconque, cela ne fonctionne pas. Peut-être existe-t-il un plugin compatible avec Elementor ou… ?
(@boazpojo)
il y a 4 ans, 1 mois
Salut @benjober, Aucun plugin supplémentaire requis. Créez simplement un élément, sous Style, définissez une image d’arrière-plan pour celui-ci et sous Annexe, sélectionnez Permanent.
(@benjober)
il y a 4 ans, 1 mois
Oui, je sais que la stabilité est là, mais je veux ce genre de parallaxe. Voici un exemple:
http://demos.artbees.net/jupiter5/new-parallax-effect/
(@boazpojo)
il y a 4 ans, 1 mois
Salut @benjober, Nous n’avons pas d’effet intégré comme celui-ci. Il existe probablement un plugin qui peut être ajouté à Elementor.
(@12stepcovery)
il y a 4 ans, 1 mois
Bonjour @benjober
J’ai recherché comment le thème sydney https://en-gb.wordpress.org/themes/sydney/ a obtenu son effet de parallaxe (voir http://demo.athemes.com/sydney/) explorer l’ajout à un autre thème en utilisant Elementor.
J’ai découvert que Sydney utilise jQuery-Parallax https://github.com/IanLunn/jQuery-Parallax.
J’ai donc emprunté du code à Sydney et l’ai ajouté aux fonctions theme.php de mon enfant comme suit :
function jquery_parallax() {
?>
<script language="JavaScript" type="text/javascript">
;(function($) {
'use strict'
var testMobile;
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var parallax = function() {
testMobile = isMobile.any();
if (testMobile == null) {
$(".parallax").parallax("50%", 0.3);
}
};
// Dom Ready
$(function() {
parallax();
});
})(jQuery);
/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);
</script>
<?php
}
if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}Placer le sélecteur CSS ‘parallaxe’ dans l’onglet Avancé en suivant les instructions de @boaz
Créez simplement un article, sous Style, définissez une image d’arrière-plan pour celui-ci et sous Pièce jointe, sélectionnez Collant.
il aura l’effet de parallaxe que vous recherchez.
(@benjober)
il y a 4 ans, 1 mois
Merci
(@irogsinta)
il y a 4 ans
Bonjour @12steprecovery, merci d’avoir partagé comment vous avez ajouté le parallux. Je suis désolé de le dire, mais je suis relativement nouveau dans ce domaine, alors je me demandais si vous pouviez l’expliquer un peu plus. Par exemple, j’ai téléchargé le code à partir du lien github mais je ne sais pas quoi en faire. Je pense que je dois charger les 3 fichiers javascript quelque part sur mon site WordPress, mais je ne sais pas comment. J’espère que vous pourrez me donner une idée.
Timbre
(@joeleade)
il y a 3 ans, 8 mois
Tu es mon héros, @12steprecovery ! Je viens de me faire gagner une minute, pas d’essais et d’erreurs parfois. Puis-je vous envoyer de l’argent ? Sérieusement 🙂 Merci l’ami.
(@vertiges)
il y a 3 ans, 8 mois
Salut, merci pour le partage @12steprecovery. Malheureusement, cela ne fonctionne pas avec les tablettes et les téléphones (mais fonctionne très bien avec les ordinateurs de bureau). Je trouve des espaces vides au-dessus et/ou en dessous de l’arrière-plan.
À propos de
Cette réponse a été modifiée il y a 3 ans et 8 mois par.
(@vertiges)
il y a 3 ans, 8 mois
Merci Lyle, je vais certainement vérifier 😉
(@terre-terre)
il y a 3 ans, 4 mois
Bonjour, j’ai utilisé cette méthode pour deux de mes sites, cela a très bien fonctionné.
Mais comme l’élément de parallaxe 1.5 ne fonctionne pas aussi bien que le code de ce fil, l’arrière-plan ne suit pas aussi bien qu’il le devrait.
Quelqu’un at-il la même question? L’élément peut avoir apporté des modifications à sa structure idk.
Merci!
(@joeleade)
il y a 3 ans, 4 mois
Oui, @elemntor a ajouté une petite transition vers l’arrière-plan. Je posterai CSS pour résoudre ce problème dès que possible. Santé!
(@cgdannie)
il y a 3 ans, 4 mois
La solution la plus simple est de désactiver la transition vers les éléments qui contiennent la parallaxe de la classe. Ajoutez simplement le code suivant à la feuille de style de votre thème (style.css) :
.parallax {
transition: none !important;
}Mais rappelez-vous que cela désactivera les nouvelles transitions pour la bordure, le rayon de la bordure et l’ombre de la boîte pour ces éléments.
Cette réponse a été modifiée il y a 3 ans et 4 mois par.
(@snifflevalve)
il y a 3 ans, 4 mois
@cgdannie –
BRILLANT !!! 🙂 Cela fonctionne parfaitement !
@terre-terre – Envoyez le SEC à @cgdannie et cela fonctionnera très bien.
Santé! Lyle
(@terre-terre)
il y a 3 ans, 4 mois
Merci ça marche 🙂
(@terre-terre)
il y a 3 ans, 2 mois
Hé, c’est encore moi ! XD
Quelqu’un a-t-il eu un problème de parallaxe depuis la dernière mise à jour d’un élément ?
Le calcul de l’espace entre le haut du contenant et le haut du bas semble erroné, ce qui donne un blanc 🙁
Investir mais toujours échoué .. merci
Cela a-t-il résolu votre problème ?
Was this helpful?
0 / 0