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 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", 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!