Imprimer la Page | Close Window

Page d'accueil dynamique et classes personnalisées

Imprimé depuis: openElement Website
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: http://forum.openelement.com/en/forum_posts.asp?TID=20085
Date: Aug 24 2019 à 9:04am
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: Page d'accueil dynamique et classes personnalisées
Posté par: Larsene
Sujet: Page d'accueil dynamique et classes personnalisées
Posté le: Oct 25 2014 à 8:11pm
Hello,je vous propose ici un didacticiel pour créer une page d'accueil avec des éléments dynamiques simples permettant de découvrir l'usage des classes personnalisée.

La première partie du didacticiel permet de créer une page d'accueil à l'image de celle-ci (la seconde vignette est actuellement survolée par la souris) :


Le résultat est visible sur http://www.paysdesaverne.fr" rel="nofollow - www.paysdesaverne.fr

Je vous proposerai deux autres variantes, dont je mettrai les liens vers les sujets ici.
--> http://forum.openelement.com/fr/forum_posts.asp?TID=20086&PID=123000" rel="nofollow - Flat design, photos et dynamisme...



Le didacticiel en vidéo : http://youtu.be/G69Anbwpf5I" rel="nofollow - http://youtu.be/G69Anbwpf5I

Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé.

Téléchargez Transit ici : http://ricostacruz.com/jquery.transit/" rel="nofollow - http://ricostacruz.com/jquery.transit/

CODE HTML:
<script type="text/javascript" src="jquery.transit.min.js"></script>


CODE CSS:
.ombre {
opacity: 0.5;
}

.news{
cursor:pointer;
}


CODE JAVASCRIPT/JQUERY :
$(document).ready(function() {
  $(".ombre").css({opacity:'0',height:'250px',width:'500px'}).transition({ scale: 0.2});
});

    $(".news").hover(
        function () {
          $(".ombre", this).transition({ scale: 1,opacity:'0.7',duration: 200 });
          $(".titrenews", this).css({"color":"#fff"});
           $(".soustitrenews", this).css("color","#f6f6f6");
        },
        function () {
          $(".ombre", this).transition({ scale: 0.2,opacity:'0',duration: 200 });
          $(".titrenews", this).css("color","#000");
           $(".soustitrenews", this).css("color","#000");
        }
    );   

$("#WEa79ebd0ed2").click(function() {
window.location="http://www.vladstudio.com";
});




Et si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des idées, n'hésitez pas à me faire un don, au regard du travail nécessaire pour le construire, le réaliser, le mettre en ligne, le commenter, etc !
https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G39GM7UC9EDWG&lc=FR&item_name=Larsene%20%2d%20%20Tutoriels&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">Faire un don



Réponses:
Posté par: Larsene
Posté le: Oct 25 2014 à 8:18pm
upload en cours ...


Posté par: brolysan
Posté le: Oct 25 2014 à 8:37pm
yeahhh super Larsène !!!!!!


Posté par: Larsene
Posté le: Oct 25 2014 à 8:41pm
Voilà, le didacticiel en vidéo est en ligne !

Ouais je sais, j'ai mis du temps, hein, brosylan ... ^^


Posté par: brolysan
Posté le: Oct 25 2014 à 9:03pm
Message posté par Larsene Larsene a écrit:

Voilà, le didacticiel en vidéo est en ligne !

Ouais je sais, j'ai mis du temps, hein, brosylan ... ^^

je confirme...Embarrassed


Posté par: Larsene
Posté le: Oct 26 2014 à 4:53pm
D'accord, mais c'est un sacré boulot quand même ... ingrat ! Tongue


Posté par: brolysan
Posté le: May 22 2015 à 10:03am
je regarde ton tuto de nouveau, je vais voir si l'on peut l'adapter à fancybox ou colorbox Big smile


Posté par: Larsene
Posté le: May 22 2015 à 11:07am
heu, c'est pas du tout le même usage Shocked colorbox et fancybox c'est pour du popup !!

Mais colorbox fonctionne bien, aps de pb avec OE. Je l'utilise d'ailleurs sur ce site pour des popup


Posté par: brolysan
Posté le: May 22 2015 à 11:16am
Message posté par Larsene Larsene a écrit:

heu, c'est pas du tout le même usage Shocked colorbox et fancybox c'est pour du popup !!

Mais colorbox fonctionne bien, aps de pb avec OE. Je l'utilise d'ailleurs sur ce site pour des popup

oui, merci Larsène Wink
Je bosse sur mon projet perso, je vais voir pour adapter (essayer du moins) ton tuto pour des images ( http://bc-webdesign.fr/salsedo/#WEPHOTOS" rel="nofollow - de celles la ) mais surtout pour des box du même type ( http://bc-webdesign.fr/salsedo/#WENEWS" rel="nofollow - je parle de ces box la ), c'est le principal en fait que je veux réaliser.
Tu te souviens du site en parallax que je t'ai envoyé?
J'essaye de trouver un script pour les box qui viennent séparer le site mais bon, je crois qu'avec OE, la tache s'annonce "hard" (non Bridet, rien de scabreux !! )


Posté par: Larsene
Posté le: May 22 2015 à 11:22am
oh, oui, aucun problème pour cela !


Posté par: brolysan
Posté le: May 22 2015 à 11:26am
Message posté par Larsene Larsene a écrit:

oh, oui, aucun problème pour cela !

j'ai mis à jour mon message précédent. Wink

Sinon, si aucun problème, je verrai pour adapter ton script alors (et comme d'hab, tu verras une "couille" et tu pourras corriger !) Clap

Sinon, tu as trouvé mon erreur sur mon projet perso?


Posté par: brolysan
Posté le: May 22 2015 à 12:02pm
Sinon, comment tu verrais pour que le cadre .ombre puisse afficher un texte en plus par dessus?
Un bloc de texte plutôt qu'un cadre?

Edit : il me suffisait de le faire en fait....Big smile

Bloc de texte multi-lignes, de mettre mon texte et image dedans, puis de le basculer aux dimensions du bloc (même si ca cache mon image derrière.
J'ai pas essayé à côté tiens...lol


Posté par: brolysan
Posté le: May 27 2015 à 9:56am
peut être développer un éléments avec toutes les fonctions que proposent le plugin serait un GROS plus non? Même payant, il peut apporter pas mal d'effet sur certains éléments d'OE.


Posté par: Larsene
Posté le: May 27 2015 à 1:34pm
facile, si payant, ça pourrait être jouable ^^


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


Posté par: Dmit OE
Posté le: May 27 2015 à 1:49pm
Il faut plusd'utilisateurs OE (il y a une augmentation apparemment mais ca reste lent), pour cela notamment il faut du eCommerce. Toutes les routes menent la pour l'instant.


Posté par: brolysan
Posté le: May 27 2015 à 3:19pm
Message posté par Larsene Larsene a écrit:

facile, si payant, ça pourrait être jouable ^^

vu ce qu'il apporte, j'en doute pas que certains le prendraient (moi y compris, même si j'ai modifié certaines options avec le script js).

Vu le prix de base, j'en doute pas.


Message posté par Dmit Dmit a écrit:

Il faut plusd'utilisateurs OE (il y a une augmentation apparemment mais ca reste lent), pour cela notamment il faut du eCommerce. Toutes les routes menent la pour l'instant.

La grosse priorité c'est sur !!! enfin quitter izishopping en bois et avoir une vraie solution ecommerce.


Posté par: AMD
Posté le: Jun 03 2015 à 12:52am
Bonjour,
j'ai suivi votre didactiel à trois reprises, mais à chaque fois, l'effet attendu ne se réalise pas, c'est à dire rien ne se passe au survol de la souris.

Je précise que je l'ai fais sur une page qui comporte déjà un menu de navigation. Pourriez-vous me dire là où je fausse la démarche ?

Merci


-------------
Il n'est jamais trop tard pour apprendre. Merci à mes professeurs


Posté par: brolysan
Posté le: Jun 03 2015 à 6:56am
Message posté par AMD AMD a écrit:

Bonjour,
j'ai suivi votre didactiel à trois reprises, mais à chaque fois, l'effet attendu ne se réalise pas, c'est à dire rien ne se passe au survol de la souris.

Je précise que je l'ai fais sur une page qui comporte déjà un menu de navigation. Pourriez-vous me dire là où je fausse la démarche ?

Merci

peut être un lien de ta page pour que l'on puisse voir le probleme non? Wink


Posté par: Larsene
Posté le: Jun 03 2015 à 8:11am
Sans lien, d'aide tu n'auras point ^^


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


Posté par: AMD
Posté le: Jun 03 2015 à 3:12pm
Bonjour, j'ai suivi à plusieurs reprises le tutoriel, mais je n'arrive pas au résultat, c'est - à - dire, au survol de la souris rien ne se passe. Je tiens à intégrer cette fonctionnalité sur mon site, merci de m'orienter davantage.

Merci


-------------
Il n'est jamais trop tard pour apprendre. Merci à mes professeurs


Posté par: Larsene
Posté le: Jun 03 2015 à 3:17pm
Message posté par Larsene Larsene a écrit:

Sans lien, d'aide tu n'auras point ^^


C'est clair, non ?


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


Posté par: AMD
Posté le: Jun 03 2015 à 3:20pm
Faut-il uploader vers le serveur le fichier jquery.transit (si oui dans quel dossier, s'il vous plaît ?)

Merci


-------------
Il n'est jamais trop tard pour apprendre. Merci à mes professeurs


Posté par: Maurice306
Posté le: Jun 03 2015 à 4:29pm
Message posté par Larsene Larsene a écrit:

Sans lien, d'aide tu n'auras point ^^

Message posté par AMD AMD a écrit:

Bonjour, j'ai suivi à plusieurs reprises le tutoriel, mais je n'arrive pas au résultat, c'est - à - dire, au survol de la souris rien ne se passe. Je tiens à intégrer cette fonctionnalité sur mon site, merci de m'orienter davantage.
Merci

TOUT EST DIT Geek : "UN LIEN DE PAGE"


-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!


Posté par: pat76lh
Posté le: Sep 07 2015 à 5:40pm
merci pour le tuto..
j ai bien galéré quand meme ; l'ombre ne fonctionnait pas
aprs avoir testé differentes choses je me suis rendu compte que le scipt transit (transit.min.js)telechargé par le lien indiqué ne porte pas le meme nom que dans l entete script : jquery.transit.min.js
il m a suffit de renommer le fichier et cela fonctionne corectement
oufff


Posté par: Dim2ke
Posté le: Oct 25 2016 à 11:02am
Bonjour,
Dans un premier temps, merci Larsen pour les tutos que tu as fais, cela m'a beaucoup aidé dans l’apprentissage des class custom et l’intégration de Jquery sur Openelement.

Suite a la réalisation du tuto, je me suis aperçu qu’après plusieurs passages de souris assez rapides, l'effet transition de l'ombre ne s’arrête pas et continue.
Après quelques recherches, l'ajout .stop() avant .transition(). corrige l'effet.

Concrètement, cela donne ce qui suit :

$(document).ready(function() {
  $(".ombre").css({opacity:'0',height:'250px',width:'500px'}).transition({ scale: 0.2});
});

    $(".news").hover(
        function () {
          $(".ombre", this).stop().transition({ scale: 1,opacity:'0.7',duration: 200 });
          $(".titrenews", this).css({"color":"#fff"});
           $(".soustitrenews", this).css("color","#f6f6f6");
        },
        function () {
          $(".ombre", this).stop().transition({ scale: 0.2,opacity:'0',duration: 200 });
          $(".titrenews", this).css("color","#000");
           $(".soustitrenews", this).css("color","#000");
        }
    );   

$("#WEa79ebd0ed2").click(function() {
window.location="http://www.vladstudio.com";
});

Encore une fois merci Larsen, pour ton travail.

P.s:  sorry pour le UP post.

Bonne journée tout le monde.


Posté par: Larsene
Posté le: Oct 25 2016 à 12:52pm
Hello Dim2ke, et bienvenue sur le forum !

Effectivement, cela permet de stopper l'animation en cas de survols compulsifs. c'est une bonne idée !



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



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk