jQuery plugin "inview", beim Scrollen Text einblenden

Soelg · #1 (**permalink**) 14.09.2018, 14:41

Hallo Javascript Freunde,
könnt Ihr mir bitte helfen?

Beim Herunterscrollen wird der Text nicht eingeblendet.
Ich habe alle Dateien von jQuery und das Plugin "inview" richtig eingebunden!

Besten Dank schon für Eure Hilfe!
Dieter

HTML-Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
	<!--<link rel="stylesheet" type="text/css" href="css/design.css">-->
	<link rel="stylesheet" type="text/css" href="css/aos.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css"  href="css/normalize.css">
	<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="js/jquery.inview.min.js"></script>

	<script>
  $(document).ready(function() {
	  $('.slidepara ul li:first-child').bind('inview', function(e, isInView, visiblePartY) {
		  if (isInView) {
			  if (visiblePartY == 'both' || visiblePartY == 'bottom') {
				  $('.slidepara').css('visibility', 'visible');
				  $('.slidepara').addClass('animated zoomIn');
				  $('.slidepara').unbind('inview');
			  }
		  }
	  });
	});
</script>
<style>
	body {
		  	background: #dcddde;
	  	}
		.box {
			display: flex;
			justify-content: flex-end;
		}
		nav ul li  {
			letter-spacing: 1.5px;
			color: #eeeeee;
		}
		nav {
			background: #838383;
			z-index: 10000;
		}
		li {
			margin-left: 0.5em;
			list-style: none;
			text-decoration: none;
			padding: 15px 0 15px 0;
		}
		li:nth-child(4) {
			margin-right: 4em;
		}
		p {
			text-align: justify;
			font-family: helvetica, sans-serif;
		}
		h1 {
			text-align: center;
			font-size: 3em;
			font-weight: 600;
			display: block;
			font-family: Helvetica;
			margin-top: 25%;
			margin: 0px;
			margin-bottom: 25%;
			color: #a7a468;
		}
		#info {
			top: 30px;
			width: 100%;
			max-width: 980px;
			margin: 0px auto 80px auto;
			visibility: hidden;
		}
		#info ul {
			display: block;
			padding: 0px;
			text-align: center;
		}
		#info ul li{
			display: inline-block;
			padding: 0px;
			margin: 0px 10px 0 10px;
			width: 100%;
			max-width: 300px;
		} 
</style>
  </head>
  	  <body>
	  <nav class="animated fadeInDown">
		  <ul class="box">
			  <li><a class="menu"></a>home</li>
			  <li><a class="menu"></a>about</li>
			  <li><a class="menu"></a>portfolio</li>
			  <li><a class="menu"></a>contact</li>
		  </ul>
	  
	  </nav>
	  <section id="home" class="animated fadeInUp">
		  <h1>Willkommen</h1>
	  </section>
	  <section id="info" class="onview slidepara">
		  <ul>
			 <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing</p>
			 </li>
			 <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing</p>
			 </li>
			 <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing</p>
			 </li>
		  </ul>
	  </section>
	 	
	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  	<script>
   AOS.init({
	   duration: 1200,
   });
	</script>
  </body>
</html>

basti1012 · #2 (**permalink**) 14.09.2018, 19:30

wie soll das den genau aussehen ? Wenn du das visbely weg machst ist der Text ja da . Nur weiß ich nicht was das Script was du da einbindest macht. Der Link ist unvollständig und kann ihn deswegen nicht testen. Wo hast du den das Script her ? Gibt es da eine Demo Seite wie das aussehen soll ? Vieleicht kann man das auch ohne extra plugins und Scripte nachbauen

Soelg · #3 (**permalink**) 14.09.2018, 19:44

Hallo basti1012,
danke für Deine schnelle Antwort!

Hier ist der Link zu dem Video, von dort habe ich den Code.

https://www.youtube.com/watch?v=5gqk4S2Up30

Beste grüße
Dieter

basti1012 · #4 (**permalink**) 14.09.2018, 21:01

hast du das alles aus den Video abgeschrieben oder wie hast du den Code bekommen ?
Ich glaube das man da animate.css auch noch einbinden muß ,nur finde ich den Code nirgenswo und auf meinen Bildschirm kann ich nicht lesen was da im Video steht

basti1012 · #5 (**permalink**) 14.09.2018, 21:10

ich baue das mal gerade nach ,das sollte ja nicht so schwer sein

basti1012 · #6 (**permalink**) 14.09.2018, 22:23

Kuck mal hier
Titel

Beim runter scrollen wird der Text so eingeblendet wie man das mit animate.css ausgewählt hat. Auswählen kann man onem rechts. Nach der auswahl langsam runter scrollen und testen. Nach der Animation wiederhoch scrollen und wenn man will eine andere Animation testen.

Probier das mal und meld dich wieder.
Eingebunden wird hier nur Jquery und animate.css

Soelg · #7 (**permalink**) 18.09.2018, 23:08

Hallo, Basti1012,
vielen Dank für Deine Hilfe. Das ist echt super! Das klappt ja perfekt.
Ich hatte mich beim letzten Mal mit meiner Mailadresse gemeldet und da hast Du meine Antwort wahrscheinlich nicht erhalten.
Kein Problem! Kannst Du mir bitte noch Deine Veränderung im Code senden, damit ich das nachvollziehen kann?
Ich möchte unbedingt jQuery und JavaScript lernen und das ist ja sehr schwer!

Beste Grüße und vielen Dank für Dein Bemühen, mir zu helfen!
Dieter

basti1012 · #8 (**permalink**) 19.09.2018, 01:17

Die mail kam nicht an .
Aber was heißt dir die veränderungen schicken ?
Das hat mit deinen Code so nicht mehr viel zu tun. Hate da meine eigene Version raus gefummelt. Kannst du ja bei mir im Quelltext ja sehen. Bei deinen Code wahr das problem das ich die eingebundene Script Links nicht habe. Die meisten haben ja mit deinen Code zu tun und ich konnte da nicht wirklich testen. Hast du die Links zu den Scripten die du in deinen Code eingebunden hast ?
Dann kucke ich mal ob ich den Fehler in deinen Code finde.
Bei mir im Script habe ich alle Scripte raus geworfen bis auf Jquery und animate.css

Soelg · #9 (**permalink**) 23.09.2018, 13:14

Hallo basti1012,

entschuldige bitte, dass ich noch nicht auf Deine Antwort reagiert habe.
Ich habe jetzt eine neue Vorlage für meine Webseite, die ich gerne bearbeiten möchte. Deine letzte Version zu meiner Anfrage funktioniert bestens! Vielen Dank nochmal.

Kannst Du mir bitte hier nochmal helfen? Irgendwann werde ich es ja hoffentlich einmal alleine schaffen.

Ich habe in die Seite die Navigation eingebunden mit den jeweiligen a-tags ganz oben.
Nun möchte ich die auch anklicken, damit die zur jeweiligen Seite scrollen, genau wie die Buttons auf der rechten Seite.
Wie kann man das realisieren?

Danke für Deine Bemühungen!
Grüße
Dieter

HTML-Code:

<!DOCTYPE html>
<html lang="de">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery AppLikeOnePage.js Plugin Demo</title>
		<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
		<script src="js/onepage.js"></script>
		<script>
			$(document).ready(function(){
				startOnePage({
					frame: "#view",
					container: "#frame",
					sections: ".op-section",
					radio: "#radio",
					radioOn: "#radioOn",
					speed: 500,
					easing: "swing"
				});
			});
		</script>		
	</head>
	<style>
	* {
	  margin: 0;
	  padding: 0;
	}
	
	/* set overflow-y property to prevent scroll bar mess up the whole layout */
	
	body {
	  margin: 0;
	  padding: 0;
	  overflow-y: hidden;
	  color: #fff;
	}
	
	li { list-style-type: none; }
	
	/* styled just for clear visual division of each areas */
	
	.op-section { background-color: #00a; }
	
	.second { background-color: #55a; }
	
	.third { background-color: #99a; }
	
	.fourth { background-color: #ded6a4; }
	
	.fifth { background-color: #ffcf8a; }
	
	.last { background-color: #779f57; }
	
	#radioWrap {
	  width: 20px;
	  height: 180px;
	  position: absolute;
	  right: 5%;
	  top: 50%;
	  margin-top: -90px;  
	}
	
	#radio {
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	
	}
	
	#radio li {
	  width: 20px;
	  height: 20px;
	  background-color: rgba(255,255,255, 0.5);
	  text-indent: -10000px;
	  border-radius: 50%;
	  margin-top: 12px;
	  cursor: pointer;
	}
	
	#radio li:first-child { margin-top: 0; }
	
	/* set position to absolute(essential).use margin to adjust gaps between LIs because 	                                               	ApplikeOnePage.js uses .outerHeight(true) method to measure the interval gap to which each radio 	buttons are placed. */
	
	#radioOn {
	  width: 20px;
	  height: 20px;
	  margin-bottom: 12px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: #fff;
	  border-radius: 50%;
	}
	
	/* Navigation */
	header {
	  background: #c1c1c1;
	}
	a {
	  text-decoration: none;
	  color: #202020;
	  font-weight: 100;
	  font-family: sans-serif, Helvetica;
	}
	.liste {
	  list-style: none;
	  margin-right: 0.6em;
	  padding: 1em 0;
	}
	.liste:nth-child(5) {
	  margin-right: 3em;
	}
	.nav {
	  display: flex;
	  justify-content: flex-end;
	}
	</style>
	<body>
		<header>
			<nav>
				<ul class="nav">
					<li class="liste"><a href="#">willkommen</a></li>
					<li class="liste"><a href="#">ausstellung</a></li>
					<li class="liste"><a href="#">porträt</a></li>
					<li class="liste"><a href="#">kontakt</a></li>
					<li class="liste"><a href="#">impressum</a></li>
				</ul>
			</nav>
		</header>
		<div id="view">
	      <div id="frame">
		    <div class="op-section second">section1</div>
		    <div class="op-section third">section2</div>
		    <div class="op-section fourth">section3</div>
		    <div class="op-section fifth">section4</div>
		    <div class="op-section last">section5</div>
		    <div class="op-section last">section6</div>
	    </div> 
	    
		<div id="radioWrap">
		    <ul id="radio">
			    <li>section0</li>
			    <li>section1</li>
			    <li>section2</li>
			    <li>section3</li>
			    <li>section4</li>
			    <li>section5</li>
			    <li>section6</li>
		  	</ul>
	      <span id="radioOn"></span>
	    </div>
	</body>
</html>

__________________________________________________ _____________
Und hier dazu das Script aus dem Ordner "js" onepage.js
<script>
/*
App-like One Page Layout by jayjnu

To apply one page layout to your web page,
it is crucial to set key values of frame, container and sections.

App-like One Page Layout provides active radio nav animation.
To activate this feature, Create html elements in accordance with markup and style guides on README.md.
After that, set radio and radioOn key values.

{
frame: "#id",
container: "#id",
sections: ".class",
radio: "#id",
radioOn: "#id",
speed: 500,
easing: "swing"
}

*/

function startOnePage(myInput){
'use strict';

var settings = myInput;

// input values
var frame = $(settings.frame),
container = $(settings.container),
sections = $(settings.sections),
speed = settings.speed || 500,
radio = $(settings.radio),
radioOn = $(settings.radioOn),
easing = settings.easing || "swing";

/*
Boolean values to enable/disable default scroll action
linked to
1) init()
2) animateScr()
3) scroll, keydown bound event handler
default: true;
*/
var didScroll = true,
isFocused = true;

// common variables
var height = $(window).height();

// Index values for sections elements
var totalSections = sections.length - 1;

// currently displayed section number
// modifying this variable will cause buggy behaviors.
var num = 0;

// keyboard input values
// add more if necessary
var pressedKey = {};
pressedKey[36] = "top"; // home
pressedKey[38] = "up"; // upward arrow
pressedKey[40] = "down"; // downward arrow
pressedKey[33] = "up"; // page up
pressedKey[34] = "down"; // page down
pressedKey[35] = "bottom"; // end

// init function to initialize/reassign values of the variables
// to prevent section misplacement caused by a window resize.
function init(){
height = $(window).height();
frame.css({"overflow":"hidden", "height": height + "px"});
sections.css({"height": height + "px"});
didScroll = true;
isFocused = true;
end = - height * ( totalSections );

container.stop().animate({marginTop : 0}, 0, easing, function(){
num = 0;
didScroll = true;
turnOnRadio(0, 0);
});
}
// event binding to init function
$(window).bind("load resize", init);

// animate scrolling effect
var now, end;
function animateScr(moveTo, duration, distance){
var top;
duration = duration || speed;
switch(moveTo){
case "down":
top = "-=" + ( height * distance ) + "px";
num += distance;
break;
case "up":
top = "+=" + ( height * distance ) + "px";
num -= distance;
break;
case "bottom":
top = end;
num = totalSections;
break;
case "top":
top = 0;
num = 0;
break;
default: console.log("(error) wrong argument passed"); return false;
}

container.not(":animated").animate({marginTop : top}, duration, easing, function(){
didScroll = true;
});

if(radio){turnOnRadio(num, speed);}
}

// show active radio button
function turnOnRadio(index, duration){
duration = duration || speed;
radioOn.stop().animate({"top": index * radioOn.outerHeight( true )+ "px"}, speed, easing);
}

radio.children("li:not(" + settings.radioOn + ")").click(function(){
var to = $(this).index();
var dif = Math.abs( num - to );

if(num < to){
animateScr("down", speed, dif);
}else if(num > to){
animateScr("up", speed, dif);
}
});

/*
1. get a type of event and handle accordingly
2. enable/disable default keyboard behavior
*/
$(document).bind("DOMMouseScroll mousewheel keydown", function(e){
var eType = e.type;

now = parseInt( container.css("marginTop") );
end = - height * ( totalSections );

// handles the event
if( didScroll && isFocused ){
// prevent multiple event handling
didScroll = false;

// on wheel
if( eType == "DOMMouseScroll" || eType == "mousewheel" ){

var mvmt = e.originalEvent.wheelDelta;
if(!mvmt){ mvmt = -e.originalEvent.detail; }

// 휠로 스크롤을 올렸을때
if(mvmt > 0){
//만약 첫번째 영역이라면
if( now == 0){
didScroll = true;
}else{
animateScr("up", 500, 1);
}
}else if(mvmt < 0){
//만약 마지막 영역이라면
if( now == end ){
didScroll = true;
}else{
animateScr("down", 500, 1);
}
}else{
didScroll = true;
}
}
// on keydown
else if( eType == "keydown" ){
// 위아래로 움직이는 키를 눌렀을 때 발동
if( pressedKey[e.which] ){
e.preventDefault();
if( pressedKey[e.which] == "up" ){
// 만약 첫번째 영역이라면
if( now == 0 ){
animateScr("bottom");
}else{
animateScr("up", speed, 1);
}
}else if( pressedKey[e.which] == "down" ){
//만약 마지막 영역이라면 첫번째 화면으로 가기
if( now == end ){
animateScr("top");
}else{
animateScr("down", speed, 1);
}
}else{
// page down 또는 page up일 때
animateScr( pressedKey[e.which] );
}
}else{
didScroll = true;
}
}
}

// enable default keyboard behavior when an input or textarea is being focused
$("input, textarea").focus(function(){isFocused = false;})
.blur(function(){isFocused = true;});
});

}
</script>

basti1012 · #10 (**permalink**) 23.09.2018, 21:38

Ich hoffe mal das ich dich richtig verstanden habe
https://codepen.io/basti1012/pen/JaVwyE?editors=1010

Denk dran das du oben in der Navigation nur 5 Links hast ,aber 6 Buttons uns 6 Felder wo hin gescrollt werden kann. Du solltest vieleicht noch einen 6 Link in der Navigation packen. Muß man zwar nicht ,aber wahr nur hinweiß ,nicht das du dich wunderst warum die section 6 nicht kommt .Rechts bei den buttons geht setion 6 ja noch.
Mfg Basti

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navigations-Leiste wird nicht richtig angezeig.	vaporizzle	CSS	5	05.02.2014 16:29
Hover effekt auf ganze TD zelle	gandalf_hh	CSS	27	13.07.2011 19:06
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 08:41
Float-Bilder im Fließtext an Absatz binden	netAction	CSS	17	19.02.2008 15:18
Floats verschwinden im nichts, Fließer überdecken Floats.	nick	CSS	5	09.02.2008 14:34