• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Что я делаю не так ? (Эффект параллакса)
kldou24
Среда, 15 Февраля 2017, 16:22 | Сообщение 1
Оффлайн
Пользователи
Сообщений:39
Решил заморочиться "паралаксом".Делал все по инструкции https://s-sd.ru/blog_st....tranicy .Хоть ты тресни, в мобильной версии шапка уходит влево. 50a .Подскажите ,как сделать 07a

Прикрепления: 4302823.png (212.4 Kb)
[ RU ]
Kosten
Среда, 15 Февраля 2017, 17:10 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44499
Награды: 70
Адаптировать вверх сайта.
[ RU ]
kldou24
Среда, 15 Февраля 2017, 17:44 | Сообщение 3
Оффлайн
Пользователи
Сообщений:39
Kosten, все я делаю.Выставил 100%.
[ RU ]
Сопрано
Среда, 15 Февраля 2017, 17:47 | Сообщение 4
Оффлайн
VIP
Сообщений:461
Награды: 4
Этот шаблон новый и он адаптирован и вы поставили скрипт видать который не адаптированный под мобильные.
[ RU ]
kldou24
Четверг, 16 Февраля 2017, 19:35 | Сообщение 5
Оффлайн
Пользователи
Сообщений:39
Сопрано, в описании ссылка например.Там адаптирован

Добавлено (16.02.2017, 19:35)
---------------------------------------------
СПЕЦЫ..............АУ.

[ RU ]
kldou24
Пятница, 17 Февраля 2017, 07:14 | Сообщение 6
Оффлайн
Пользователи
Сообщений:39
waak, http://kldou24.ucoz.ru/
[ RU ]
kldou24
Пятница, 17 Февраля 2017, 08:01 | Сообщение 7
Оффлайн
Пользователи
Сообщений:39
waak, я на нем экспереминтирую http://1978dagada.ucoz.net/

Добавлено (17.02.2017, 07:59)
---------------------------------------------
waak, мне загорелось на своем сайте реализовать это в шапке.Если поможешь ,реквизиты видил(а) 26a

Добавлено (17.02.2017, 08:01)
---------------------------------------------
waak, шапка http://kldou24.ucoz.ru/images/shapka_tem.jpg

[ RU ]
kldou24
Пятница, 17 Февраля 2017, 08:17 | Сообщение 8
Оффлайн
Пользователи
Сообщений:39
waak, пароль:fktrcfylhjdf.

Добавлено (17.02.2017, 08:17)
---------------------------------------------
waak, а шапку http://kldou24.ucoz.ru/images/shapka_tem.jpg .Я хоть посмотрю как надо делать 07a

[ RU ]
kldou24
Пятница, 17 Февраля 2017, 08:41 | Сообщение 9
Оффлайн
Пользователи
Сообщений:39
waak, эта та работает...с ней я сама разобралсь.Мне вот эту шапку как настроить http://kldou24.ucoz.ru/images/shapka_tem.jpg
[ RU ]
waak
Пятница, 17 Февраля 2017, 08:43 | Сообщение 10
Оффлайн
VIP
Сообщений:588
Награды: 14
kldou24, Вобщем у меня всё работает как посмотрите напишите мне

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

Код
<style>.parallax-slider {left:0px!important;}</style>


тем самым запретил ему это делать вот как то так
[ RU ]
kldou24
Пятница, 17 Февраля 2017, 09:15 | Сообщение 11
Оффлайн
Пользователи
Сообщений:39
waak, теперь не могу никуда воити

Добавлено (17.02.2017, 09:15)
---------------------------------------------
waak, незаморачивайся ...Бог с ним ...Тема закрыта.Ты прав дело в скрипте.Спасибо за суету

Прикрепления: 0479796.gif (158.2 Kb)
[ RU ]
waak
Пятница, 17 Февраля 2017, 11:44 | Сообщение 12
Оффлайн
VIP
Сообщений:588
Награды: 14
Цитата kldou24 ()
waak, незаморачивайся ...Бог с ним ...Тема закрыта.Ты прав дело в скрипте.Спасибо за суету


Быстро вы сдались вот я на тестовый сайт себе поставил и настроил его отображения ссылка там для примера взял вашу картинку шапки

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

подключим библиотеку и сам скрипт к сайту перед тегом /body на нужной страницы в вашем случае на все

Код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/parallax.min.js"></script>


теперь добавим сам код блока с картинкой в верхнюю часть сайта в самый верх
Код


<div class="parallax-container" data-parallax="scroll" data-image-src="//talantlev.ucoz.ru/jMS7Dw.jpg">

</div>
<style>
.parallax-container {
min-height: 300px;
background: transparent;
    -webkit-transition: all 0.9s;
  -moz-transition: all 0.9s;
  -o-transition: all 0.9s;
  transition: all 0.9s;
}
    .parallax-slider {left:0px!important}
    
    @media screen and (max-width: 1000px) {.parallax-container {min-height: 200px;}}
    @media screen and (max-width: 800px) {.parallax-container {min-height: 150px;}}
    @media screen and (max-width: 500px) {.parallax-container {min-height: 100px;}}
</style>


тут я сразу добавил и стили нашего блока думаю там нечего сложного нету и описывать я их не буду но если возникнут вопросы то задавайте я вам отвечу также сделал ему адаптацию под моб устройства

больше нечего подключать не нужно!


Сообщение отредактировал
waak - Пятница, 17 Февраля 2017, 12:18
[ RU ]
Angerfist
Пятница, 17 Февраля 2017, 13:05 | Сообщение 13
Оффлайн
VIP
Сообщений:767
Награды: 21
Замечания: 20%
влезать в изучение кода не буду) имхо эффект этот паралакс лишнее, раздражает он пользователя сайта. Имхо сайт в том виде в котором сейчас удобнее, простота у крупных порталов всегда притягивала пользователя, он идёт за информацией а не смотрит особо на оболочку (не призываю делать портал вообще простым).

No regrets
[ RU ]
cyber-soldier
Четверг, 19 Сентября 2019, 21:31 | Сообщение 14
Оффлайн
Пользователи
Сообщений:1
Параллакс часто делается для промо сайтов, там как раз важно привлечь внимание, удержать человека. И он с этим справляется. Просто нужно чувствовать меру и делать легкий эффект.
[ RU ]
  • Страница 1 из 1
  • 1
Поиск: