Imprimer la Page | Fermez la fenêtre

flèche de scrolling

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=21477
Date: 28 Mar 2024 à 19:26
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: flèche de scrolling
Posté par: brolysan
Sujet: flèche de scrolling
Posté le: 07 Oct 2015 à 09:30
Bonjour,

Voila ma problématique.
Toujours sur le modèle onepage de Larsène, avec mes blocs panels dedans (dont 2 hors dimensions mais spécifiés dans le code js), j'ai mis quelques flèches pour effectuer un scrolling en douceur avec la fonction scrollto.
Tout roule.
Sauf sur 2 partie, ou justement le panel ne s'adapte pas (volontairement) à l'écran, du fait que j'ai spécifié sur le bas du panel un panneau d'éléments avec une image en parallax.
Un peu comme le modèle d'origine responsive d'OE, j'aurais aimé pouvoir ne mettre ma flèche qu'une seule fois, et que celle ci est comme fonction de descendre au panel suivant. J'ai regardé le modèle responsive mais je n'ai pas encore réussi à reproduire avec succès le même phénomène. Des erreurs bloquant le parallax.

http://restaurant-passionelle.fr/" rel="nofollow - Le site en question . Suis je assez clair?


-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie



Réponses:
Posté par: Dmit OE
Posté le: 07 Oct 2015 à 09:38
Bonjour,

Apres des nuis pareils, je ne suis pas sur d'avoir compris.. Vous voulez un element en position:fixed qui est toujours visible (sauf si on arrive au but) et qui detecte automatiquement la prochaine "section" pour y defiler? Vous n'avez pas peur que pour certains tailles d'ecran la fleche empietinera sur le design de facon aleatoire et le gachera?

Sinon, j'ecrirai le code un peu plus tard (sauf si quelqu'un veut d'amuser a ma place).

Cordialement
D


Posté par: brolysan
Posté le: 07 Oct 2015 à 09:44
non, car j'ai fait en sorte (pour l'instant) que les éléments intérieurs s'adaptent à une résolution de 1020 * 650. Donc, cela devrait rouler. Pour plus petit, le temps de finaliser le modèle responsive, on cachera par query cette flèche. Wink

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Larsene
Posté le: 07 Oct 2015 à 10:08
par du css plutôt que du jQuery Wink


-------------
http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime


Posté par: brolysan
Posté le: 07 Oct 2015 à 10:11
Message posté par Larsene Larsene a écrit:

par du css plutôt que du jQuery Wink

les 2 pour être exact Big smile


-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Dmit OE
Posté le: 07 Oct 2015 à 11:10
Voici la solution.

 - Assurer qu'il y a le Classe Perso "bigpanel" sur le panneau principal (c'est le cas sur le site)

 - Ajouter un element a cliquer (une fleche), avec le Classe Perso "arrow"

 - Ajouter un Bloc de Code Source type CSS:

.arrow {
position: fixed !important;
top: auto !important;
bottom: 40px !important;
left: auto !important;
right: 40px !important;
}

@media (max-width: 1023px) {
.arrow { display: none !important; }
}

 - Ajouter un Bloc de Code Source type Javascript:

$(function(){
var $sections = $('.bigpanel  .OECT_Content').children('.OERelLine');
var $lastSection = $sections.last();
var ignoreDist = 40; // in px, ignorer la section s'il est si pres de la haut de la fenetre
$('.arrow').click(function(){
// hauteur et position du scroll de la fenetre:
var windowTop = $(window).scrollTop();
// tous les sections de la page:
$sections.each(function(){
var sectionTop = $(this).offset().top;
if (sectionTop > windowTop+ignoreDist) { // on a trouve la "prochaine" section
$('html, body').animate({ scrollTop: sectionTop }, 800);
return false; // arreter la boucle
}
});
});
$(window).scroll(function(){
var windowHeight = $(window).height();
var windowTop = $(window).scrollTop(), 
windowBottom = windowTop + windowHeight;
var lastSectionTop = $lastSection.offset().top;
var lastSectionBottom = lastSectionTop + $lastSection.height();
$('.arrow').toggle(lastSectionBottom > windowBottom+ignoreDist); // desider s'il faut cacher la fleshe si on est sur la derniere section
})
.scroll();// appeller la fonction au debut
});


Posté par: brolysan
Posté le: 07 Oct 2015 à 11:13
super Dmit Clap

Je vais tester ca de suite. Sinon, sur l'autre topic, avec le code que tu m'as donné pour le bloc réservation, il n’apparaît pas sous Safari Mac. Une idée??

J'ai un peu regardé et trouvé http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform" rel="nofollow - ce topic qui en parle.


-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net