Jump to content
  • 0

parallax при скроллинге


stmaxvl
 Share

Question

Реализация скроллинга с параллакс эффектом вызвала у меня ряд вопросов. Как оказалось – он адекватно работает только в firefox. Смотрел множество сайтов, везде есть рывки при прокрутке. В ИЕ хуже всего – кроме рывков – дерганье.

Отсюда вопрос: возможна ли кроссбраузерная реализация (плавная горизонтальная прокрутка без рывков и дерганий)?

Пример задачи: http://addevelop.ru/...t/View-new.html

Буду рад советам и примерам реализации плавности. Описывайте свой опыт реализации подобных задач.

Edited by stmaxvl
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Офтоп: вообще Js по производительности может быть очень даже быстр) не то что сайты - 3D галактики разворачивают

http://workshop.chromeexperiments.com/stars/

p.s: работает только на браузерах с поддержкой WebGl - webkit,firefox

Link to comment
Share on other sites

  • 0

не ) там целая галактика. Не работает - скорее всего потому что нет аппаратной поддержки webGL - (примерно как openGL, но для js), у меня - chromium

Edited by Николя223
Link to comment
Share on other sites

  • 0

попробуйте через скролл сделать, это рациональнее чем положение анимировать

Либо через canvas

Подскажите, что значит сделать через скролл?

Сейчас отлавливаю событие скроллинга и в нем позиционирую элемент. Но, например, в ИЕ элемент сначала скроллится, а потом становится на нужное положение - это дерганье. Рывок - это, например в Хроме - в нем при скроллинге большее количество пикселей прокручивается, чем в FF, соответственно движение не плавное, а рыком.

Edited by stmaxvl
Link to comment
Share on other sites

  • 0

Вот пример небольшой, если бы я аниммировали Позицию элементов - все бы безбожно тормозило - элементов две сотни, но я попросил браузер сделать это - так как в нем программно заложена функция прокрутки скролла

http://jsfiddle.net/nikolya223/QYWhn/ код

http://jsfiddle.net/...mbedded/result/ полный экран

А вам при прокрутке нужно просто прокручивать другие слои

Edited by Николя223
Link to comment
Share on other sites

  • 0

ну что, решили проблему?

http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html

 

я столкнулся с той же проблемой.

 

вот тут есть список, во многих как-то решили проблему. но я не смог понять как.

Link to comment
Share on other sites

  • 0

http://stackoverflow.com/questions/20542586/javascript-smooth-parallax-scrolling-with-mouse-wheel

 

вот чел решил проблему вроде бы

 

я тоже попробовал - но у меня чуть плавнее получилось - но при скроллинге также вверх прыгает и возвращается.


2 ryter

спасибо

 

http://forums.greensock.com/topic/6056-scrolling-the-page-up-and-down-with-greensock-js/

 

вот ещё. начинаю вникать.

Edited by across
Link to comment
Share on other sites

  • 0

Кто-нибудь может подсказать, такой параллакс https://active-vision.ru/blog/parallaks-effekt-js-simple-parallax/ как можно привязать к движению мыши? Именно чтобы к этой библиотеке добавить

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

  • Similar Content

    • By TrueGavr
      есть такой параллакс, никак не могу добиться того, чтобы он был по всей области экрана вне зависимости от того какой масштаб страницы или это 35% или 150%
      нужно чтобы он всегда оставался одного размера
      P.S с простым фоном сделать это легко, надеюсь и здесь решение под поверхностью.
      <!DOCTYPE html> <html lang="en" class="no-js demo5"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="shortcut icon" href="../file/favicon.gif"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="css/default.css" /> <script type="text/javascript" src="js/jquery.interactive_bg.js"></script> <!-- Edit Below --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <body> <div class="container bg" data-ibg-bg="bg.jpg"> <div class="container bg" </div> <script type="text/javascript"> $(".bg").interactive_bg(); $(".bg").interactive_bg({ strength: 38, scale: 1.05, animationSpeed: "150ms", contain: false, wrapContent: falce, }); </script> </div><!-- Container --> </body> </html>  
    • By woodoo
      Приветствую! Подскажите, пожалуйста при посадке на хостинг в хэдере не отображается картинка параллакса, хотя на локалке все работает.
      <header class="main-head bg-dark parallax-window" data-parallax="scroll" data-image-src="<?php echo get_template_directory_uri(); ?>/img/bg.jpg" data-z-index="1"> пробовал также stylesheet подставлять в get_. Может, нужно для параллакса что-то еще дописать? (в консоли 404 на картанку пишет)
    • By ITMOfan
      _http://labitex.com/ При пролистывании сайта шапка скрывается за блоком снизу. Как добиться такого эффекта?
    • By AlexxD
      Всем привет!
       
      Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706
       
      Пишите на почту из текста вакансии или мне в личку.
       
    • By jdk
      Добрый день.
      С простом параллакс эффектом разобрался на этом примере. Перемещение объектов при скроле тоже более-менее разобрал (на статичном фоне). Хочу сделать что бы при прокручивании в слое с параллаксом изображения (именно в этом слое) тоже перемещались. Подскажите пожалуйста где можно посмотреть материал, желательно для самых начинающих. Нашёл пару примеров, но для меня пока слишком мудрёно. Хочу что бы на выходе получилось что то вроде этого.
×
×
  • 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