Partage

Faire apparaître un élément en scroll

Sujet résolu
6 avril 2018 à 21:54:55

Bonjour à tous, 

J'imagine que la question a été posée une multitude de fois, mais je me permets de la reposer, car -contrairement à la majorité- je ne connais RIEN à Javascript. 

Je viens de finir le cours (chapitre) de html/css, et je suis entrain de créer un site web, qui s'avère un peu plus ambitieux que mes compétences. 

Je souhaite avoir un effet sur mon site, et d'après ce que j'ai compris, il doit se réaliser en utilisant du Javascript et/ou JQuery. 

J'aimerai avoir des éléments (div) qui apparaissent en scrollant, comme ce site: http://jaybabani.com/caliber-html/

J'ai trouvé quelques fragments de code et j'ai essayé de les déchiffrer, j'ai compris le principe, mais j'ai besoin de savoir tous les petits détails à savoir: les déclarations en amont, la ligne de code reliant le html au script...

Je ne sais pas si je suis assez clair, 

Merci par avance, 

-
Edité par silicon.valley.man 6 avril 2018 à 22:23:24

6 avril 2018 à 22:14:06

heuuu! tu débute en html, commence déjà par exploité ce que tu apprend. tu verra qu'avec html et CSS, on peut arrivé à des trucs superbes et tu n'imagine même pas les possibilité du CSS3, certain vrai pro arrivent à faire de véritable tableau d'art en toile de fond juste en CSS sans aucune image intégré dans le code.

Alors javascript, c'est super, jquery c'(est mieux parce que moin "chiant" que javascript mais ce n'est qu'un framwork de javascript, mais si tu ne connais pas parfaitement le html et le css, oublie pour l'instant ce langage, ne cherche même pas à comprendre quoi que se soit et apprend à fond le html et le css.

Tu ne sera pas le futur picasso du css, je ne te demande pas non plus d'en arrivé là avant de intéressée à d'autres langage mais comme disaient les vieux de ma campagne, ne mets pas la charrue avant les bœufs ....

6 avril 2018 à 22:19:51

Merci Florianboy pour ces conseils avisés, je suis conscient que je ne maîtrise pas html et css comme un pro, mais je suis entrain de suivre les cours de ce site, et j'ai finalisé les cours, donc avec ce que j'ai comme bagage, je n'arrive pas à faire l'effet que je veux. 

Je ne compte pas aborder le JS maintenant, je vais lui consacrer du temps, mais j'aimerai quand même réaliser cet effet sur mon site, le plutôt possible. 

Sinon, à par les conseils, tu saurais peut-être comment on réalise cet effet rien qu'avec html et css? 

merci encore pour tes conseils, 

6 avril 2018 à 23:47:39

Lol pour arriver à cela, et je n'ai cliquer que sur un lien, je ne suis même pas sur que moi même j'y arrive et ça fait 15 ans que je fais des sites. bon ok, j'ai laisser tomber longtemps à cause du pro mais ton truc doit faire appelle à des bibliothèques d'animation que je ne maîtrise absolument pas. en CSS, je pense pas mais je suis pas sur tellement cela peut être puissant.

Ta demande est au dessus de mes compétences, excuse mais je suis pas capable de répondre ....

7 avril 2018 à 17:18:37

Pas de problème ne t'inquiètes pas, je vais trouver la solution, en creusant un peu plus en css, sinon je serai obligé de passer au JS. 

Sinon pour les autres lecteurs de ce forum, avez-vous une réponse à ma question? 

Merci par avance, 

7 avril 2018 à 20:39:27

Bonsoir,

Pour commencer je tenais juste à dire que les messages de florianboy01 sont, à mes yeux, inutiles car ne donnent pas de solution et peuvent décourager quelqu'un, vu le ton employé. Quand on n'a pas la solution, on ne vient pas polluer une discussion pour rien.

Sinon, peut-être que ce qui est présenté sur ce site répond à ta demande: https://www.megaptery.com/2014/03/scrollreveal-js-librairie-animation.html

8 avril 2018 à 14:06:32

Bonjour, 

A vrai dire je n'ai pas osé faire une telle remarque à Florianboy01, effectivement, ce genre de propos a tendance à décourager plus d'un, y compris moi !! 

Mais restons objectifs, je te remercie pour ton lien, je vais y jeter un coup d'oeil et essayer de décrypter tout ça. Merci beaucoup .Little Lady 

Bonne journée

Staff 9 avril 2018 à 9:51:56

Bonjour,

florianboy01 > je vois que tu essaies d'aider, c'est sympa, mais si tu pouvais le faire avec un peu plus de tact, ce serait mieux. Indiquer aux gens que des choses sont hors de leur portée c'est bien, pour éviter une déconvenue, mais pas besoin de décourager complètement.

Surtout que pour le site donné en exemple, il n'y a pas grand chose à faire : il faut la bibliothèque https://github.com/dirkgroenen/jQuery-viewport-checker et jeter un œil à la fonction CALIBER_SETTINGS.inViewPortAnimation qui est dans le fichier main.js du site. Rien de très compliqué ;)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
14 avril 2018 à 4:03:05

Merci beaucoup Lamecarlate pour le lien. Cependant, ils disent qu'il faut télécharger le dossier "/dist", et l'appeler avec le code. 

Où est ce que je peux trouver ce dossier? est-ce un exécutable? ou un morceau de code? 

Merci par avance pour votre aide, jusque là je ne connais que html et css, du coup tout ça pour moi c'est du chinois, mais j'essaye de m'y mettre. 

Staff 14 avril 2018 à 8:21:24

Tu as deux possibilités :

  • soit tu cliques sur le bouton vert "Clone or download", et tu choisis "Download ZIP".  Ensuite tu extrais le fichier zip que tu viens de télécharger, et tu fouilles dans le dossier "dist" qui est dedans.
  • soit tu prends le fichier "jquery.viewportchecker.min.js" directement sur le site : tu vois la liste de fichiers et dossiers au début de la page ? Tu cliques sur "dist", puis sur le fichier .min.js, puis sur le bouton "Raw" sur la droite. Ça ouvre le fichier brut dans le navigateur, il te suffit de l'enregistrer (Ctrl + S) là où tu veux.

Je pense que le plus simple c'est la première option, parce que tu vas surtout récupérer le dossier "demo", qui, comme son nom l'indique, est une démonstration du fonctionnement du plugin.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
14 avril 2018 à 19:22:55

Alors, j'ai effectivement pris l'option 1, j'ai téléchargé le fichier en ZIP, puis je l'ai dézipé et j'ai mis les deux fichiers dans le même dossier que mon site web. 

J'ai introduit le code <script>, j'ai rajouté les options qui vont avec. Bien entendu sur mon code html j'ai défini un bloc <div> avec une classe, et c'est cette classe que j'ai utilisé sur le <script>. 

Malheureusement, ça ne marche pas !!! je ne sais pas ce qui se passe? !!! 

Une chose est sûre, c'est que je ne vais pas abandonné cette idée, il faut que ça marche :-) mais je ne sais pas comment ! 

Staff 14 avril 2018 à 19:58:53

Un seul des deux fichiers est nécessaire, celui qui finit par .min.js (c'est la version minifiée du script, ça se chargera plus vite sur ta page).

Tu peux écrire ici le code que tu as mis ?

Et est-ce que tu as une erreur quand tu charges la page ? Tu peux détecter ça en ouvrant les outils de développement avec F12, en cliquant sur l'onglet "Console". Recharge éventuellement ta page si tu n'y lis rien.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
14 avril 2018 à 21:02:57

<!DOCTYPE html>
<html>
	<head>
		
		<script src="http://code.jquery.com/jquery.js"></script>
    	<script src="dist/jquery.viewportchecker.min.js"></script>

    	<script>
        $(document).ready(function(){
        	$('.t1').viewportChecker({
    classToAdd: 'visible', // Class to add to the elements when they are visible,
    classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    removeClassAfterAnimation: false, // Remove added classes after animation has finished
    offset: [100 OR 10%], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
    invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
	scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
        });
            
    	</script>

		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css"/>
		<title>mon site</title>
        		
	</head>

	<body>
		<div id="bloc_page">
			<header></header>
		</div>

		<section>

				<div style="height: 700px"></div>
				<div class="t1">
					<p>lkjlkjlqkjef lkjlkjlkjqzeflkjlkjlkjqzeflkjlkj</p><br>
					<p>lilskjerglhqzeg lkjlqkjlqzef lkjlkjlkjqzef</p><br>
					<p>kjhkjhkergkj ljkldf lkjlkjlsdflkjhkjhkjzretrkjhkjhzerkjhzerkj</p><br>
					<p>kjhkjhkjhkjhkjhsdfkjhsdf</p><br>
				</div>
					<div style="height: 300px"></div>

				<!-- ici aura trois sectrions avec trois pictogrammes 
					********************
					********************* -->
		</section>
		<footer></footer>
	</body>
</html>
Donc voici mon code html et le code script, et en parallèle, j'ai copié le bon fichier *.min.js dans le même dossier de mon site web. 
C'est le bloc <div class="t1"></div> que je voudrai qu'il apparaisse quand je scrolle. 
Qu'en pensez-vous? 
Merci

-
Edité par silicon.valley.man 14 avril 2018 à 21:07:12

Staff 14 avril 2018 à 21:30:50

> Et est-ce que tu as une erreur quand tu charges la page ?

Autre point : le script en lui-même ne fait pas apparaître ou disparaître les éléments. C'est à toi de mettre les styles nécessaires, de .t1 et de .t1.visible :)

Si tu ouvres la console en mode Inspecteur, est-ce que la div de classe "t1" reçoit bien la classe "visible" quand tu scrolles ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
15 avril 2018 à 2:48:10

> oui, j'ai eu une erreur: "Uncaught SyntaxError: Unexpected identifier" sur la ligne 15 du code. 

> oui je sais, j'ai mis à la classe .t1 {opacity:0;} et à la classe .t1.visible {opacity:1;}

> quand j'ouvre la console, et je scrolle, il ne se passe rien, la classe t1 ne réagit pas !!! 

Staff 15 avril 2018 à 8:36:22

Et ya quoi à la ligne 15 ? C'est le "offset' ? Je pense que le [100 OR 10%] était là pour montrer les possibilités, il faut choisir :)
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
15 avril 2018 à 15:53:45

Oui c'est le "Offset", mais je ne pense pas qu'il faut choisir, il y a un commentaire à côté " // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end". (ça peut aussi être basé sur un pourcentage, en ajoutant un % à la fin). :-) 

ça reste un mystère pour moi, c'est bizarre, pourquoi cela ne marche pas ? !!! 

Staff 15 avril 2018 à 16:13:44

Mais si, il faut choisir : tu mets offset: 100 *ou* offset: 10%. 100 tout court je suppose que ce sont des pixels, et ça ne sera pas toujours égal à 10%.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
19 avril 2018 à 0:06:37

Bonsoir, je suis de retour. J'ai enfin réussi à réaliser l'effet que je voulais. Merci beaucoup Lamecarlate pour ton aide et ton soutien :-)  et tu avais raison pour le Offset, c'est l'un ou l'autre. 

Du coup voici le code que j'ai utilisé et qui marche très bien: 

<script src="http://code.jquery.com/jquery.js"></script>
    	<script src="dist/jquery.viewportchecker.min.js"></script>

    	<script>
        $(document).ready(function(){
            $('.txt').viewportChecker({
            	classToAdd: 'visible',
            	classToAddForFullView: 'full-visible',
            	classToRemove: 'invisible',
            	removeClassAfterAnimation: false,
            	offset: 100,
            	repeat: false,
            	callbackFunction: function(elem, action){},
            	scrollHorizontal: false
            });
        });

Encore une fois merci, et à très bientôt dans une autre question, un nouveau projet :-) 

Staff 19 avril 2018 à 7:41:56

Cool ! Bonne continuation, et à bientôt sur le forum :)

(PS : n'oublie pas de marquer ton sujet comme résolu, tu as un bouton pour ça en haut à droite)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Faire apparaître un élément en scroll

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown