They Scroll Into View - inview. Compatibilité avec Scrollto (bibilo) ?

Version imprimable

Bonsoir à tous,
Je suis actuellement sur un page utilisant, entre-autres, Scrollto. J'ai réussi plus ou moins à paramétrer InWiew (via la démo "jQuery-Plugin-To-Animate-Elements-When-They-Scroll-Into-View-inview). J'ai tenter d'y mettre ce travail test inview dans ma page scrollto, l'appel à la biliothèque

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

annule tous le JQuery (ScollTo), mais aussi la video allSize (qui n'apparaît plus), la barre des menus n'est plus fixe etc...
J'ai tenté de mettre l'appel de la biblio un peu partout ... Rien n'y fait, est-il possible de travailler avec ces deux biblio ? (pas correct de travailler avec plusieurs biblio :( )
Mais le but recherché sur ma page Scrollto est d'avoir une <div> venant du top. Ce qui me semble impossible avec InView (puisque c'est la page d'accueil). InView n'intervient que lorsue la <div> devient visible, et non quand elle est déjà apparente.
Mon header ressemble à cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script> <script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script> <script type="text/javascript" src="js/lancement.js"></script> <script type="text/javascript" src="jquery.videoBG.js"></script> <script type="text/javascript" src="assets/script.js"></script> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/> </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" <script src="js/jquery.inview.js"></script> <script src="js/main.js"></script> <script type="text/javascript"> </script>
Alors là, rien ne fonctionne, par contre, si je supprime

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"

Tout redevient parfait, mais plus d'effet inview. Quelqu'un aurait-il une idée du soucis, ou q-chose d'équivalent à InView ? Parallax peut-il se substituer à InView ?
Merci pour votre aide et BONNE SOIREE !
dh

30/06/2015, 08h50
SpaceFrog

peut être en mettant jquery en premier ?

Bonsoir SpaceFrog et merci pour ta réponse,
Effectivement, plus de "bug" avec cet header (que je pensais avoir testé) :

Code:

1
2
3
4
5
6
7
8
9
10
11
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
	<script src="js/jquery.inview.js"></script> 
	<script src="js/main.js"></script>
	<script type="text/javascript"></script>

Malheureusement, toujours pas d'effet InView malgré des CSS fonctionnelles me semble t'il :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.blocks, .blocks-2, .blocks-bottom, .blocks-top  {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #696;
	width: 100%;
	color: #9933FF;
}
.blocks div, .blocks-2 div, .blocks-bottom div, .blocks-top div {
	background-color: #ddd;
	width: 400px;
	margin: 0 auto;
	padding: 0px;
	line-height: 1.5em;
	-webkit-transition: -webkit-transform 0.8s, opacity 0.8s;
	-moz-transition: -moz-transform 0.8s, opacity 0.8s;
	transition: transform 0.8s, opacity 0.8s;
}
 
.block-bottom {
	opacity: 0;
	-webkit-transform: translateY(-800px);
	-moz-transform: translateY(-800px);
	transform: translateY(-800px);
}
 
.block-top {
	opacity: 0;
	-webkit-transform: translateY(800px);
	-moz-transform: translateY(800px);
	transform: translateY(800px);
}

Et la partie du body concerné :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="section-trois">
  <div class="blocks">
    <div data-class-in="" data-class-out="block-bottom">
      <p> Aenean viverra rhoncus pede. Phasellus magna. Donec mollis
        hendrerit risus. Maecenas ullamcorper, dui et placerat feugiat,
        eros pede varius nisi, condimentum viverra felis nunc et lorem.
        In ut quam vitae odio lacinia tincidunt. </p>
      <p> Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum
        eget, diam. Ut non enim eleifend felis pretium feugiat. Ut
        varius tincidunt libero. Mauris sollicitudin fermentum libero.
        Nulla consequat massa quis enim. </p>
    </div>
  </div>

Ces CSS et ce body fonctionnaient dans ma page issue de la demo "InView" (sans autre JQuery) :?

Merci pour ton aide et bonne soirée,
dh

01/07/2015, 11h33
SylvainPV

Pourquoi charger deux versions différentes de jQuery ?
Pourquoi un script vide à la fin ?
Qu'y a-t-il dans lancement.js et pourquoi le charger au milieu des autres bibliothèques ?

Bonsoir Sylvain et les autres,
Pourquoi deux biblio ? (je sais que ce n'est pas bien) :
Parce que dans ma page initiale inview (sans Scrollto donc), cette biblio

Code:

<script src="js/jquery.js" type="text/javascript"></script>

ne fonctionne pas

Voici un header que j'espère plus propre (et avec une seule biblio) :
Code:

1 2 3 4 5 6 7 8 9 <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script> <script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script> <script type="text/javascript" src="js/lancement.js"></script> <script type="text/javascript" src="jquery.videoBG.js"></script> <script type="text/javascript" src="assets/script.js"></script> <script src="js/jquery.inview.js"></script> <script src="js/main.js"></script> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
Un script vide dans mon message d'hier ? Oui, il y en avait un lorsque j'ai rédigé la discussion, faute d'inattention :roll:
Si je place le lancement js à la fin, le jquery SrollTo ne fonctionne plus. Faut-il le mettre avant

Code:

<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>

??? Ce qui fonctionne aussi ;)

Voici son contenu :
Code:

1 2 3 4 5 $(document).ready(function() { $.localScroll(); });
et le contenu de main.js :
Code:

1 2 3 4 5 $(function(){ $('div.blocks div').inview({ 'viewFactor': 0.3 }); });
Inview ne fonctionne toujours pas avec le header actuel. Comme si

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

était indispensable :?
Une idée du malaise ?
Merci à vous et bonne soirée,
dh

01/07/2015, 20h13
SylvainPV

Plutôt que d'essayer des choses au hasard en espérant que ça fonctionne, peut-être faudrait-il essayer de comprendre ? En tout cas en chargeant deux versions de jQuery tel que tu le fais, tu as la certitude que ça se passe mal.

Commence par mettre tes libs en <head> et tes propres scripts en fin de <body>.

Bonsoir SylvainPV, merci pour ton message,
Veux-tu dire cela pour le head :

Code:

1
2
3
	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script src="js/jquery.inview.js"></script> 
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>

Et ceci avant le </body> ?

Code:

1
2
3
4
5
6
7
8
  	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="jquery.videoBG.js"></script>
	<script type="text/javascript" src="assets/script.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

Merci pour ton aide et bonne soirée,
dh

09/07/2015, 20h01
dhillig

Bonsoir à tous,
Malgré mes essais, le problème persiste. J'en reste donc à la config précédente... sans effet InView :(
Si qq a une idée...
Bonne soirée et merci,
dh
24/09/2015, 20h11
dhillig

Sujet clos :(