Witam,
mam problem w zastosowaniu efektu paralax (scrollr.js) do diva do kórego jest podpięty supersized.js.
Efekt parallax działa do kolejengo elementu na stronie czyli div#second. Do pierwszego czyli div#start juz nie.
Ktoś pomoże z tym?
Kod:
<!DOCTYPE html>
<html>
<head lang="pl">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="Stylesheet" type="text/css" href="main.css"/>
<link rel="Stylesheet" type="text/css" href="supersized.core.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="supersized.core.3.2.1.js"></script>
<script src="supersized.shutter.min.js"></script>
</head>
<body>
<!-- menu -->
<div class="menu">
<div id="logo">
</div>
<div id="contact_box">
<ul>
<li id="contact_top">
</li><li id="fb">
</li><li id="mail">
</li>
</ul>
</div>
<div id="menu_box">
<ul id="menu">
<li>
Start</li><li>
O firmie</li><li>
Oferta</li><li>
Portfolio</li><li>
Kontakt
</li>
</ul>
<div id="menu_mobile">MENU</div>
</div>
</div>
<!-- start -->
<div class="start slide" id="start"
data-top="opacity: 1"
data-center="opacity: 0"
data-anchor-target="#start>
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--<ul id="slide-list"></ul>-->
<div id="slidecaption"></div>
<div id="gallery_buttons">
<a id="prevslide" class="load-item"></a>
<a class="pause" id="pauseplay" href="java script:void(0)"></a>
<a id="nextslide" class="load-item"></a>
</div>
</div>
<div class="second" id="second"
data-center="opacity: 1"
data-106-top="opacity: 0"
data-anchor-target="#second">
</div>
<!-- footer -->
<div class="footer">
<div id="footer_top">
<div id="toggle_footer" class="down">
</div>
</div>
<div class="sub_footer">
</div>
</div>
<script type="text/javascript" src="js/skrollr.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
var s = skrollr.init();
/*
if (( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
var s = skrollr.init();
s.destroy();
}
*/
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Stops slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 8000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 2, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_landscape : 0, // Landscape images will not exceed browser width
fit_portrait : 1, // Portrait images will not exceed browser height
min_width : 100, // Min width allowed (in pixels)
min_height : 100, // Min height allowed (in pixels)
horizontal_center : 1, // Horizontally center background
vertical_center : 1, // Vertically center background
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : 'banner.jpg',title :
'<div id="supersized-desc" style="background-color: transparent; color: #ffffff; right:0;" >' +
'<div id="border_top" style="height:2px;"></div>' +
'<div id="border_bottom" style="height:2px;"></div>' +
'<div id="border_left" style="width:2px;"></div>' +
'<div id="border_right" style="width:2px;">' +
'</div>' +
'text1' +
'</div>'},
{image : 'rwd.png',title :
'<div id="supersized-desc" style="background-color: rgba(0,0,0,0.6); bottom:100px; top:auto; color:#ffffff;">' +
'<div id="border_top" ></div>' +
'<div id="border_bottom" ></div>' +
'<div id="border_left" ></div>' +
'<div id="border_right" >' +
'</div>' +
'text2' +
'</div>'}
]
});
});
});
</script>
[JavaScript] scrollr.js + supersized.js
30.03.2015, 07:53:55
