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!
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>