Hot Dot Parallax Engine под лицензией MIT

    image
    Более 300 сайтов использовали движок до публикации.

    Девять месяцев назад мы запустили сайт студии. Он быстро набрал популярность, мы получили несколько наград, о нас написали профильные СМИ.

    Сайт так же быстро оброс клонами. Некоторые скопировали нас полностью. Попадались и подобные забавные вещи. Сайт на нашем движке попал на One Page Love, а после выявления воровства был удален из рейтинга. Когда количество клонов превысило три сотни, мы решили сделать исходный код движка открытым.

    И вот, немного причесав, сегодня мы выложили его на GitHub под лицензией MIT.

    Особенности

    • Сколько-угодно-страничный горизонтальный параллакс.
    • Удобное создание слайдов: вам не нужно писать ни строчки JS для того, чтобы слои плавали с разной скоростью.
    • Математические расчеты слоев необычайно оптимизированы.
    • Плавный скролл. Функции «подъехать к слайду» и «подъехать к определенной позиции» просто связать с элементами управления.
    • Поддержка хэштегов, возможность делиться отдельными слайдами.
    • Движок генерирует свои события. Начало движения, конец движения, смещение даже на один пиксель.
    • Прелоадер.
    • Настраиваемое включение 3D-ускорения.
    • Супероптимизационная возможность: вы можете отлавливать момент, когда слайд не находится в фокусе, и останавливать в нем всю активность. Экономия и производительность.
    • Использование оптимизации “pointer-events: none;” во время скролла, о которой недавно здесь писали.


    Адаптивность

    • Бесплатно в комплекте: движок для изменения размера контента в зависимости от размера экрана.
    • Вставьте большую картинку на фон — движок сам растянет её так, чтобы она правильно работала.
    • Возможность менять у слайда верстку между портретной и альбомной в зависимости от размера экрана.
    • Совместимость с тач устройствами.
    • Оптимизация работы на iOS и Android.
    Hot Dot Production
    Company
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 26

      +4
      Параллакс действительно плавный, спасибо!
        +1
        Хорошо бы добавить gh-pages и переименовать sample.html в index.html, чтобы можно было посмотреть demo по адресу htdt.github.io/parallax.
        • UFO just landed and posted this here
            +7
            а клонами называются все сайты с горизонтальным параллаксом?
            ну и сами пройдитесь по клонам, у Вас на странице не все сайты доступны.
              0
              Все сайты, использующие наш движок.
              На странице клонов совсем не полный список и не все они работают, но есть скриншоты для подтверждения.
              +3
              А почему бы не сделать не просто смещения, а поворот вокруг оси Z (или всех трёх), вокруг какого-то (смыслового?) объекта? Было бы, как мне кажется, круто и довольно свежо. К сожалению, даже простенький пример сейчас не смог бы набросать, но мысль мою вы должны были уловить.
                0
                Те кто скопировал полностью вас- вообще жесть) Как людям не стыдно, на 100% копировать)
                Я бы не стал заказывать работу у студии, которая копирует на 100%…
                  0
                  А на 98?)
                  Если копировать — то копировать с умом, при этом разбираясь в предмете. Разбираться — не значит знать как поменять фон и скорость скроллирования.
                  [upd]
                  Даже «клоны» можно делать со вкусом, при этом не до конца разбираясь в технологии.
                    0
                    > Я бы не стал заказывать работу у студии, которая копирует на 100%…

                    Думаю, что многие не стали бы. Только откуда заказчик узнает, что дизайн украден?

                    Кстати, я давно заметил, что на сайтах типа TemplateMonster довольно популярны шаблоны студий веб дизайна.
                    0
                    Не знаю почему, но зайдя на ваш впомнил о кедах redkeds.com

                    Такие же ссылки меню, такие же квадраты в портфолио, но все более продуманно и красиво.
                      0
                      А как вы пришли к тому, что описания работ в Портфолио (пример) представлены просто картинкой JPEG. Оценивали плюсы и минусы, может просто есть причина в лоб, которая толкнула на это?
                        0
                        У вас действительно классный сайт! Переключение языков доставляет:)

                        Однако есть один небольшой косяк: на форме «ЗАЯВКА НА СОЗДАНИЕ САЙТА», если просто нажать кнопку «Отправить заявку», то выскочит несколько подряд валидационных alert'ов, что не есть хорошо.
                        +8
                        Если клонируют — значит упех!

                        К сожалению, такое решение подходит именно для клонов. С такой полнотой документации, технических примеров (не wow) и тестов далеко не уедешь. Например, нужно сделать не линейную анимацию (в начале едем вниз, потом вправо, потом вниз) и не понятно с какой стороны зайти к вашему решению. Я бы проще взял таймлайн с Greensock с декларативным паралаксом у Parallax.js или SuperScrolloram'у.

                        OpenSource — это не просто выкинуть читаемый код и пример внедрения — это большая работа (примеры, документация, работа с комунити). На данный момент, к сожалению, проект находится в стадии выкидыша OpenSource. Надеюсь у вас все получится и вы обеспечите достойную поддержку вашему проекту!
                          +3
                          Безотносительно классного параллакса, просто ради интереса: сколько кликов собирает элемент «свяжитесь с нами» по сравнению с «оставить заявку»? Я сам раз десять нажал, пока сообразил, что стрелка указывает на ссылку в подвале, а не является кнопкой или направлением дальнейшего скролла.
                            +7
                            Только у меня безбожно тормозит все?
                              +5
                              нет, вы не один. параллакс, наверное, крутой, но я с такого сайта сразу уйду
                                +1
                                У меня очень плавно, но и компьютер довольно мощный.
                                  0
                                  Только на телефоне с андроидом — и тормозит, и скроллится рывками.
                                    0
                                    Странно, у меня HotDot работает хорошо, скролится и не тормозит, а вот клоны очень долго грузятся и старашно тормозят
                                    +1
                                    под Оперой тормозит страшно.
                                      +2
                                      вы молодцы, дизайнерам отдельный респект. движок и правда получается интересный, но у него еще есть потенциал для ускорения.

                                      в анимационной верстке лучше использовать абсолютное позиционирование. float: left для контейнеров со слайдами это reflow на всю глубину при трансформациях. особенно при ресайзах сейчас это заметно.

                                      чтобы исключить лишние перерисовки и вычисления скрывайте невидимые объекты и отключайте для них анимационную логику. сейчас все слайды пересчитываются постоянно. это серьезная заморочка, если ваша цель «сколь угодно страничный параллакс».

                                      при работе с css из js старайтесь избегать чередования чтения и модификации css-свойств. особенно тех, которые связаны с геометрией и способны приводить к запуску reflow.

                                      запись непосредственно в style.cssText при модификациях пачек свойств работает в разы быстрее, чем вызовы $.css().

                                      планирование операций, связанных с рендером, лучше поручить requestAnimationFrame()

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

                                      от кода, по мимо документации, хочется модульности какой-нибудь. осталось ощущение, что вся эта простыня собрана из отдельных, изначально, кусочков. какая-то особенность сборки примера для github?
                                        0
                                        Скрипт отличный, но под IE хотя бы с 8ки и хотя бы в каком-то виде адаптировать можно было.
                                          0
                                          Да, кстати, укажите поддерживаемые версии браузеров, пожалуйста. Про Android и iOS всё ясно-понятно.
                                          0
                                          Большое спасибо всем за отзывы!
                                          Мы очень спешили опубликовать движок и у нас не хватило ресурсов подготовить хорошую документацию.
                                          Мы будем очень рады энтузиастам, которые помогут заполнить этот пробел.
                                            0
                                            Лол, ну-ну.

                                          Only users with full accounts can post comments. Log in, please.