jQuery plugin inview beim Scrollen Text einblenden
Beim Herunterscrollen wird der Text nicht eingeblendet.
Ich habe alle Dateien von jQuery und das Plugin "inview" richtig eingebunden!
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery AppLikeOnePage.js Plugin Demo</title>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery.onepage-scroll.min.js"></script>
<script>
$(document).ready(function(){
startOnePage({
frame: "#view",
container: "#frame",
sections: ".op-section",
radio: "#radio",
radioOn: "#radioOn",
nav:".nav",
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;
}
.markiert{
border:2px solid red;
}
</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>
<script>
function startOnePage(myInput){
'use strict';
var settings = myInput;
// input values
var frame = $(settings.frame),
container = $(settings.container),
sections = $(settings.sections),
nav = $(settings.nav),
speed = settings.speed || 500,
radio = $(settings.radio),
radioOn = $(settings.radioOn),
easing = settings.easing || "swing";
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);
}
});
nav.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);
}
});
$('.liste').click(function(){
var wasist=$(this).hasClass('markiert');
if(wasist==true){
$('.liste').removeClass('markiert');
}else{
$('.liste').removeClass('markiert');
$(this).addClass('markiert');
}
})
/*
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>
</body>
</html>