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: 24 Avr 2019 à 08:35
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: 25 Oct 2014 à 21:11
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: 25 Oct 2014 à 21:18
upload en cours ...


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


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

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


Posté par: brolysan
Posté le: 25 Oct 2014 à 22:03
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: 26 Oct 2014 à 17:53
D'accord, mais c'est un sacré boulot quand même ... ingrat ! Tongue


Posté par: brolysan
Posté le: 22 Mai 2015 à 11:03
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: 22 Mai 2015 à 12:07
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: 22 Mai 2015 à 12:16
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: 22 Mai 2015 à 12:22
oh, oui, aucun problème pour cela !


Posté par: brolysan
Posté le: 22 Mai 2015 à 12:26
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: 22 Mai 2015 à 13:02
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: 27 Mai 2015 à 10:56
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: 27 Mai 2015 à 14:34
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: 27 Mai 2015 à 14:49
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: 27 Mai 2015 à 16:19
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: 03 Juin 2015 à 01:52
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: 03 Juin 2015 à 07:56
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: 03 Juin 2015 à 09:11
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: 03 Juin 2015 à 16:12
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: 03 Juin 2015 à 16:17
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: 03 Juin 2015 à 16:20
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: 03 Juin 2015 à 17:29
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: 07 Sep 2015 à 18:40
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: 25 Oct 2016 à 12:02
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: 25 Oct 2016 à 13:52
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