Recherche Code pour effet d'opacité sur caroussel en Page d'acceuil

[jordinator]

Hello les loulous !

Je viens demander de l'aide. Je vous explique mon problème ; ( fin ce n'est pas vraiment un problème mais plutot un souhait )


en attendant la création complète de ma page d'acceuil, j'ai actuellement un portail sur mon forum avec un seul widget : Un carroussel flash et precisement celui-ci. J'ai donc ceci dans le widget caroussel de mon portail :

Code:

<iframe style="width: 1000px; height: 1000px;" scrolling="no" marginheight="0" marginwidth="0" border="0" frameborder="0" src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html"></iframe>

pas de soucis à ce niveau mon caroussel se met bien correctement.

On arrive enfin à mon souhait . Je voudrais que sur ma futur page d'acceuil ( mais en attendant ce sera sur le portail ) le caroussel ne soit pas affiché ès l'entrée sur le forum. Je voudrais qu'il y ai un jeu d'oppacité. Je m'explique :

dès l'entrée sur le forum et donc actuellement sur mon portail , le caroussel s'affiche petit a petit ( genre 3 secondes pour arriver ). J'ai parcouru un peu la toilette ( ) et j'ai trouvé que cela pourrait être possible en l'associant à une fonction javascript qui joue sur l'oppacité avec un timer.

à la suite de cela , lorsque mes visiteurs ou membres cliquent sur une des images du caroussel ( qui redirigent vers certaines pages de mon forum ) il y ai un '' fondu '' vers la page en fonction de la redirection de l'image.


J'ai essayé d'etre le plus clair possible :

- je souhaite donc un code qui serait capable de faire apparaitre mon caroussel en un temps donné en jouant sur l'oppacité et l'orsque les visiteurs sont redirigés en cliquant sur une des images du caroussel , qu'il y ai un fondu dont je pourrait enventuellement maitriser la vitesse vers la page de redirection.

je suis débutant en code donc si possible être clair x)

Voila merci de votre aide


PS : je precise bien que je ne veut pas une variation d'oppacité au passage de ma souris sur les images du caroussel ( je precise car j'ai vu beaucoup de sujet sur ce type de variation d'oppacité )

[jordinator]

Up les poulets

[Lixyr]

Bonjour et Bienvenue sur le Forum des Forums Forumactif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

Bonjour,

Pour le code, une petite recherche s'impose : JavaScript - opacity fade time

Évidemment c'est en anglais, mais je vous laisse essayer.

[jordinator]

merci de ton aide.

J'avais fais des recherches et je suis également tombé sur des site de ce type en anglais avec tout et n'importe quoi dessus

Etant donné que je suis en médecine et non en informatique / programmation ou X autre chose en informatique je ne m'y connais pas vraiment je vois des codes, j'essaye d'apprendre mais je ne passe pas le plus gros de mon temps là dessus c'est pourquoi je poste ici pour trouver.

je commence à savoir faire des codes mais de la à faire ma demande, je n'y suis pas encore. ( quelques jours de pratique de code et non pratique intensive )

je prend ton exemple de recherche : je savais que l'effet c'était l'oppacité que ca pouvait se faire via un javascript. Mais comment rechercher ce code sur internet c'est plus compliqué et on trouve un peu de tout.

Je suis donc tombé sur cela en suivant ta recherche. Je pense que c'est la solution mais j'ai un tas de petit soucis. Sur le site, ils ont un exemple avec une photo. Dnas l'html je modifie ce code, je remplace l'url de leur photo par l'url de mon image

donc de ca :

Code:

<button id="go" onclick="toggleOpacity('mainImage')">Toggle</button><br>
<div><img id="mainImage" src="http://photos.smugmug.com/photos/344291068_HdnTo-M.jpg" style="opacity: 1;"></div>

en ca :

Code:

<button id="go" onclick="toggleOpacity('mainImage')">Toggle</button><br>
<div><img id="mainImage" src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html" style="opacity: 1;"></div>

Pour le moment rien de bien compliqué j'ai juste changer le lien. Quand je lance '' Run '' sur le site en question, Mon caroussel ne s'affiche pas. Je me suis donc dis que c'est le site qui ne prend pas le caroussel. J'ai donc essayé sur ma page d'acceuil.

J'ai été dans gestion des javascript dans mon PA, j'ai ajoute le code javascript du site ( je ne l'ai pas modifié carje pense pas qu'il faut le modifier sauf si je veux changer le temps ou le sens de l'oppacité , etc ) :

Code:

function toggleOpacity(id) {
    var el = document.getElementById(id);
    if (el.style.opacity == 1) {
        fadeOut(el, 2000);
    } else {
        fadeIn(el, 2000);
    }
}

function fadeIn(el, duration) {
    fadeObject(el, 0, 1, duration);
}

function fadeOut(el, duration) {
    fadeObject(el, 1, 0, duration);
}

function fadeObject(el, start, end, duration) {
    var range = end - start;
    var goingUp = end > start;
    var steps = duration / 20;   // arbitrarily picked 20ms for each step
    var increment = range / steps;
    var current = start;
    var more = true;
    function next() {
        current = current + increment;
        if (goingUp) {
            if (current >= end) {
                current = end;
                more = false;
            }
        } else {
            if (current <= end) {
                current = end;
                more = false;
            }
        }
        el.style.opacity = current;
        if (more) {
            setTimeout(next, 20);
        }
    }
    next();
}

Puis sur ma page d'acceuil j'ajoute le code HTML cité ci dessus que j'ai modifié et même problème le caroussel ne s'affiche pas , il y a une erreur sur l'image ou je dois peut etre modifier autre chose que l'url ?

j'ai tester avec leur code HTML de base et leur image fonctionne sauf que l'effet d'oppacité ne se fait pas automatiquement dès l'entrée sur la page, il faut cliqué sur un petit bouton a gauche de l'image pour que l'effet se fasse.


merci de vos réponses

[Lixyr]

Pour ce passage :

<button id="go" onclick="toggleOpacity('mainImage')">Toggle</button><br>
<div><img id="mainImage" src="http://photos.smugmug.com/photos/344291068_HdnTo-M.jpg" style="opacity: 1;"></div>

Il faudrait enlever le bouton et mettre le code dans l'image, cela dit je peux faire en sorte que l'opacité de produise au passage de la souris mais pas modifier le JavaScript pour que ça se fasse automatiquement, car ce code n'est pas fait pour ça, il a besoin d'un élément déclancheur (bouton, passage de souris), et ça c'est largement faisable en CSS3, et beaucoup moins invasif... Donc ce code ne correspond pas à ce que vous voulez, à moins que vous ne changiez d'avis ? Sinon il faudrait voir un autre code JavaScript.

Sinon j'ai trouvé ça qui est pas mal : http://jsfiddle.net/wSkmL/1/
A la base il faudrait juste échanger l'opacité : mettre l'image à 0 et ensuite à force de scroller l'image apparait.

[jordinator]

oula

tout d'abbord merci de l'aide

j'ai été sur votre lien, mais euuh je ne comprend pas vraiment les codes dessus la    je ne comprend pas ou je dois mettre l'url de mon image ni ou changer l'opacité . J'ai donc essayé de la faire moi meme sans succès en m'insiprant de mes anciens codes de l'ancien message

j'ai donc mis ca en HTML

Code:

<div><img src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html></div>

et ca dans le javascript :

Code:

var divs = $('src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html");
$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  divs.css({ 'opacity' : (1 - st/35) });
});


serait-ce la pourchanger l'oppacité ?

Code:

divs.css({ 'opacity' : (1 - st/35) });

je me retrouve  donc toujours avec un soucis d'affichage d'image et meme un blanc    

et non non il ne me faut pas quelque chose de déclencheur comme le passage de la souris. Il me faut donc bien un effet qui s'enclenche directement après l'ouverture de la page d’accueil. ( et qu'une seule fois l'effet evidement pas en boucle )


En gros j'ai fait un petit  pour voir vraiment l'effet voulu si vous le souhaitez ( même si le gif n'est pas top ) que je peux eventuellement vous envoyez en MP.


Si jamais j'ai fait des erreurs dans l'inscription des codes, ce qui est surement le cas vu que ca ne fonctionne pas. Dites le moi ou elles sont ainsi je comprendrais pourquoi et peut-être dans l'avenir ne plus la faire


merci

[jordinator]

up

[Lixyr]

Alors pour le code qui change l'opacité avec le scroll, en fait vous avez le JavaScript :

var divs = $('.social, .title');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({ 'opacity' : (1 - st/35) });
});

En gros pour simplifier :
1ère ligne : Il enregistre dans une variable divs des classes (social, et title)
2eme ligne : la fonction prend effet lorsqu'on 'scroll'
3eme ligne : on enregistre dans une variable st la valeur du scrooling
on applique sur la variable divs un code CSS (opacity) qui est réduit de 1 - st (la valeur du scroll) divisé par 35. C'est un calcul après je ne saurais dire si on peut faire mieux.

Donc déjà de là, on part d'une opacité de 1 qui est réduite. Vous, vous aimeriez l'inverse je crois ? Que ça apparaisse donc il faudrait plutôt faire :

Code:

var divs = $('.classeCarroussel');
$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  divs.css({ 'opacity' : (0 + st/35) });
});

 déjà changer la classe par la votre (vous n'avez qu'une image je crois), donc ça sera classeCarroussel
faire une addition en commençant par une opacité de 0 (donc pas de visibilité au début). Et pour changer le temps d’apparition, surement changer le 35, une valeur plus grande pour un temps moins rapide, et plus petit pour un temps plus long (suppositions, c'est peut-être l'inverse).
Après là il suffit de scroller un tout petit peu pour que ça s'affiche, c'est mieux qu'un petit bouton pour activer.

Ensuite pour le HTML :

<div class="social">I'm social</div>
<div class="title">I'm title</div>

C'est tout simple, vous avez les classes ici sur lesquelles le code JavaScript prend effet, donc il faudrait faire comme ça chez vous :

Soit mettre sur la div :

Code:

        <div class="classeCarroussel"><img src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html></div>

Soit mettre sur l'image :

Code:

        <div><img src="http://sd-6.archive-host.com/membres/up/533a0074f6bd8e80ab61984484da3323d144636f/caroussel/fullpage.html" class="classeCarroussel"></div>

Normalement ça devrait fonctionner.

[jordinator]

niquel , merci !