Jump to content
  • 0

Как сделать скролл на странице быстрым?)


Нарек
 Share

Question

При открытии страницы должен появится  блок с картинкой 100% высоты и ширины экрана. Требование - если покрутить мышью хотя бы на один щелчок, то спускаемся уже к следующему блоку. И наоборот, если с предыдущего подниматься наверх, то при достижении верхнего края предыдущего - один щелчок и мы уже находимся на самом верху страницы где изображение на всю ширину и высоту.. Это для первого блока так, внизу уже все стандартно. Грубо говоря надо пропускать промежуток скролла между первым и вторым блоком. Вот не понимаю как этого добиться, особенно если изображение должно быть с паралакс, Поделитесь))

Edited by Нарек
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

плагинов много, например fullpage.js

можно самому, с помощью jquery не сложно

Так вот сам наткнулся на fullpage.js только там с паралаксом проблемы говорят)
а что не получается? skrollr.js без проблем должен работать
Link to comment
Share on other sites

  • 0

Решение все равно должно быть :)

вот похожий плагин

https://ihatetomatoes.net/demos/one-page-scroll-animations/

Спасибо) Уж много гемора с ними с плагинами этими)) Мне нужен всего то быстро пропустить самый первый блок, а эти гады делают из всей моей страницы таблицу с 100% высотой)) Надеюсь найду решение без помощи плагинов)

Link to comment
Share on other sites

  • 0

Проблема решилась плагином mousewheel.js и вот таким js 

$(document).ready(function(){  var winHeight = window.innerHeight ?                function() {                    return window.innerHeight;                } :                function() {                    return document.documentElement.clientHeight;                };$('.first-block').height(winHeight);var BlockHeight = $('.first-block').height();/* Глюк firefox - во всех остальных ьбраузерах двигаем body, а в нем html */$.browser = {};$.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase());if($.browser.mozilla)    {  var ScrollType = 'html';    }else    {  var ScrollType = 'body';    }/* Обрабатываем событие скрола мыши вниз, при условии что это самый верх страницы */$('.first-block').mousewheel(function(event, delta, deltaX, deltaY) {     if((delta<0) && ($(ScrollType).scrollTop()==0)) $(ScrollType).animate({ scrollTop: BlockHeight-104 }, 600);   });/* Обрабатываем событие нажатия стрелки вниз, при условии что это самый верх страницы */$(ScrollType).keydown(function(event){    if((event.keyCode==40) && ($(ScrollType).scrollTop()==0)) $(ScrollType).animate({ scrollTop: BlockHeight-104 }, 600);})});

Может кому пригодиться. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy