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:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="pl">
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  7.     <link rel="Stylesheet" type="text/css" href="main.css"/>
  8.     <link rel="Stylesheet" type="text/css" href="supersized.core.css"/>
  9.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  10.     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  11.  
  12.     <script src="supersized.core.3.2.1.js"></script>
  13.     <script src="supersized.shutter.min.js"></script>
  14.  
  15. </head>
  16. <body>
  17. <!-- menu -->
  18.     <div class="menu">
  19.         <div id="logo">
  20.  
  21.         </div>
  22.         <div id="contact_box">
  23.             <ul>
  24.                 <li id="contact_top">
  25.                 </li><li id="fb">
  26.                 &nbsp;</li><li id="mail">
  27.                 &nbsp;</li>
  28.             </ul>
  29.         </div>
  30.         <div id="menu_box">
  31.             <ul id="menu">
  32.                 <li>
  33.                     Start</li><li>
  34.                     O firmie</li><li>
  35.                     Oferta</li><li>
  36.                     Portfolio</li><li>
  37.                     Kontakt
  38.                </li>
  39.             </ul>
  40.             <div id="menu_mobile">MENU</div>
  41.         </div>
  42.     </div>
  43. <!-- start -->
  44.     <div class="start slide" id="start" 
  45.                 data-top="opacity: 1"
  46.                 data-center="opacity: 0"
  47.                 data-anchor-target="#start>
  48.         <div id="progress-back" class="load-item">
  49.             <div id="progress-bar"></div>
  50.         </div>
  51.         <!--<ul id="slide-list"></ul>-->
  52.         <div id="slidecaption"></div>
  53.  
  54.         <div id="gallery_buttons">
  55.             <a  id="prevslide" class="load-item"></a>
  56.             <a class="pause" id="pauseplay" href="java script:void(0)"></a>
  57.             <a  id="nextslide" class="load-item"></a>
  58.         </div>
  59.     </div>
  60.  
  61.     <div class="second" id="second"
  62.                 data-center="opacity: 1"
  63.                 data-106-top="opacity: 0"
  64.                 data-anchor-target="#second">
  65.  
  66.     </div>
  67.  
  68.  
  69. <!-- footer -->
  70.     <div class="footer">
  71.         <div id="footer_top">
  72.             <div id="toggle_footer" class="down">
  73.  
  74.             </div>
  75.         </div>
  76.         <div class="sub_footer">
  77.  
  78.         </div>
  79.     </div>
  80. <script  type="text/javascript" src="js/skrollr.js"></script>
  81. </body>
  82. </html>
  83. <script>
  84.  
  85. $(document).ready(function(){
  86.  
  87.     var s = skrollr.init();
  88.  
  89. /*
  90.     if (( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) {
  91.         var s = skrollr.init();
  92.         s.destroy();
  93.     }
  94. */
  95.  
  96.  
  97.     jQuery(function($){
  98.  
  99.         $.supersized({
  100.             // Functionality
  101.             slideshow               :   1,			// Slideshow on/off
  102.             autoplay				:	1,			// Slideshow starts playing automatically
  103.             start_slide             :   1,			// Start slide (0 is random)
  104.             stop_loop				:	0,			// Stops slideshow on last slide
  105.             random					: 	0,			// Randomize slide order (Ignores start slide)
  106.             slide_interval          :   8000,		// Length between transitions
  107.             transition              :   6, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  108.             transition_speed		:	1000,		// Speed of transition
  109.             new_window				:	1,			// Image links open in new window/tab
  110.             pause_hover             :   0,			// Pause slideshow on hover
  111.             keyboard_nav            :   1,			// Keyboard navigation on/off
  112.             performance				:	2,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed //  (Only works for Firefox/IE, not Webkit)
  113.             image_protect			:	1,			// Disables image dragging and right click with Javascript
  114.  
  115.             // Size & Position
  116.             fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
  117.             fit_landscape			:   0,			// Landscape images will not exceed browser width
  118.             fit_portrait         	:   1,			// Portrait images will not exceed browser height
  119.             min_width		        :   100,			// Min width allowed (in pixels)
  120.             min_height		        :   100,			// Min height allowed (in pixels)
  121.             horizontal_center       :   1,			// Horizontally center background
  122.             vertical_center         :   1,			// Vertically center background
  123.  
  124.  
  125.             // Components
  126.             slide_links				:	'blank',			// Individual links for each slide (Options: false, 'num', 'name', 'blank')
  127.             thumb_links				:	0,			// Individual thumb links for each slide
  128.             thumbnail_navigation    :   0,			// Thumbnail navigation
  129.             slides                  :   [           // Slideshow Images
  130.                 {image : 'banner.jpg',title :
  131.                     '<div id="supersized-desc" style="background-color: transparent; color: #ffffff; right:0;" >' +
  132.                         '<div id="border_top" style="height:2px;"></div>' +
  133.                         '<div id="border_bottom" style="height:2px;"></div>' +
  134.                         '<div id="border_left" style="width:2px;"></div>' +
  135.                         '<div id="border_right" style="width:2px;">' +
  136.                         '</div>' +
  137.                         'text1' +
  138.                      '</div>'},
  139.                 {image : 'rwd.png',title :
  140.                     '<div id="supersized-desc" style="background-color: rgba(0,0,0,0.6); bottom:100px; top:auto; color:#ffffff;">' +
  141.                         '<div id="border_top" ></div>' +
  142.                         '<div id="border_bottom" ></div>' +
  143.                         '<div id="border_left" ></div>' +
  144.                         '<div id="border_right" >' +
  145.                         '</div>' +
  146.                         'text2' +
  147.                      '</div>'}
  148.             ]
  149.  
  150.         });
  151.     });
  152.  
  153.  
  154. });
  155. </script>
  156.  
[PHP] pobierz, plaintext