ilusha_sergeevich Dec 10 2012 at 16:45

Простая техника Parallax Scrolling

2 min

125K

Website development*JavaScript*jQuery*

Tutorial

+24

Comments 39

stigger Dec 10 2012 at 17:12

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

dobriykot Dec 10 2012 at 18:02

Уважаемые веб-разработчики, не воздерживайтесь, пожалуйста, от повсеместного применения этого эффекта. Мне от него крышу не сносит.

tushev Dec 10 2012 at 21:27

Когда скорость скролинга высокая, то у и меня рябит.
А вот если скорость низкая, то весьма миленько.

iCoderXXI Dec 15 2012 at 01:06

Колёсиком когда скролю, то рывками. А когда скроллбар таскаю мышой — то норм, симпатишно так.

matiouchkine Dec 11 2012 at 09:28

Я уже всерьез подумываю о написании плагина, который будет откатывать javascript до версии 1.7.

HeadFore Dec 10 2012 at 17:19

> $(document).ready(function(){
Почему я так часто вижу это в чужом коде? Почему не $(function(){ ?!

ilusha_sergeevich Dec 10 2012 at 17:35

Уже привычка. $(document).ready() — так в документации jQuery всегда было написано

tushev Dec 10 2012 at 21:21

Так чуть понятнее, что у document случилось ready.
А то если не знать такой фичи, то не каждый поймет что это за функция, и куда она засунута.
Почти самодокументирование.

Grammka Dec 11 2012 at 00:32

Вы серьезно? давайте тогда писать <script type="text/javascript"></script> в HTML5

egoserg Dec 11 2012 at 01:40

Если этого не знать.
То и понимать не нужно.
Нужно закрыть IDE и ити копать траншеи

matiouchkine Dec 11 2012 at 09:29

s/IDE/notepad.exe/

tushev Dec 11 2012 at 14:57

То есть вы считаете что хаки и шорткаты, лучше очевидного для любого человека кода?

Или считаете что сэкономив 16 байт кода вы облегчите страдания JavaScript интерпретатора? ))

Grammka Dec 11 2012 at 15:01

Зачем тогда использовать библиотеки? давайте писать на чистом JS, зачем сокращения?

hermit931 Dec 11 2012 at 14:38

Почему не $(function(){ ?

я бы сказал даже jQuery(function($){

UFO just landed and posted this here

ilusha_sergeevich Dec 10 2012 at 21:27

Это вам спасибо за ссылочку, Parallax тут шедевральный, сайт — супер, мне самому стало интересно, как сделать подобный эффект. Будет время, постараюсь разобраться, пойму — обязательно поделюсь этим с хабром.

drakmail Dec 10 2012 at 21:33

joelb.me/scrollpath/ Наверное, как-то примерное так.

ilusha_sergeevich Dec 10 2012 at 22:02

Полезно, добавил в закладки

matiouchkine Dec 11 2012 at 09:32

За распространение таких ссылок я бы приговаривал к 15 суткам программирования на КОБОЛе.

Magiq Dec 10 2012 at 21:57

Наркоманство.

AlexSane Dec 11 2012 at 00:48

Вот ещё отлично: http://www.nike.com/jumpman23/aj2012/

flom Dec 10 2012 at 21:31

Да красивый эффект, мы на рекламной странице тоже решили простебаться параллаксом

UFO just landed and posted this here

flom Dec 10 2012 at 23:28

Полосатый фон — это да, мечта эпилептика. Никак не соберемся от него отказаться.

Alinaki Dec 11 2012 at 00:34

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

matiouchkine Dec 11 2012 at 09:33

Веселенькая у вас рекламная страница.

cccr85 Dec 10 2012 at 21:56

Все хорошо, но представим, что страница большая, и блоков с параллаксом много, даже на мощных компьютерах все будет тормозить. Как вариант, двигать только то, что попало в видимую часть, или попадет в неё через Npx.

ilusha_sergeevich Dec 10 2012 at 22:03

Да, не спорю. Но это именно техника, очень простая для понимания. Даже на начальном уровне знания jQuery опираясь на эту технику можно придумать что нибудь поинтереснее.

UFO just landed and posted this here

ilusha_sergeevich Dec 10 2012 at 22:21

Такой эффект на промо-сайтах, целевых страницах уже будет нести практическую пользу, если говорить о маркетинге. А в плане рабочих сайтов и их интерфейсов — это на самом деле вопрос на миллион =) Поскольку Parallax это тренд, я думаю где нибудь появится интересная реализация интерфейса с помощью этого.

vovs Dec 11 2012 at 09:48

Статья полезная. Спасибо!

termi Dec 11 2012 at 12:11

И сразу вопрос: зачем тут jQuery?

hermit931 Dec 11 2012 at 14:41

Чтобы сделать еще один запрос :) шутка.
Думаю что на сайте это не единственный скрипт будет, так что скорее всего это отдельная часть сценария

termi Dec 11 2012 at 15:34

Меня просто смутило то, что с условием использовании jQuery, демо не работает даже в IE8. Я переделывал сложное паралакс демо из статьи, без jQuery, кода не больше чем в оригинале на jQuery (и мой код проще), работает в IE7+

hermit931 Dec 11 2012 at 15:48

Нерабочее решение это уже скорее к автору этого решения. А jQuery в проекте скорее всего все равно будет задействовано, так что соблазн воспользоваться им велик. Да и проще читать код, когда все один стилем написано, если конечно кроме этого эффекта там еще куча кода.

ilusha_sergeevich Dec 11 2012 at 16:03

В IE не работает из за HTML5 элементов.

document.createElement(«article»);
document.createElement(«section»);

И все будет работать

termi Dec 11 2012 at 16:10

Да я то в курсе, просто, если не заморачиваться, чтобы код работал в старых браузерах — зачем использовать jQuery? Хотя hermit931 выразил разумную мысль, что если весь проект пишется на jQuery, то и для параллакса лучше использовать jQuery. Но есть же куча библиотек для этого и некоторые из них весьма неплохие.

gdX Dec 11 2012 at 13:01

Только сегодня в рассылке попадалась статья
Parallax Tools and Techniques

afi13 Dec 12 2012 at 01:45

habrahabr.ru/post/161941/

Show the best of all time