• 0
TrueGavr

Проблема з масштабированием Паралакса

Спросил TrueGavr

    Вопрос

    TrueGavr    0
    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>

     

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    1 ответ на этот вопрос

    Рекомендуемые сообщения

    • 0
    Svetlana_P    30
    Svetlana_P
    Опубликовано:

    Хорошо бы ссылку. Кстати, здесь похоже на опечатку в слова false

    wrapContent: falce,

    И тут скобка не закрыта

    <div class="container bg"

     

    Поделиться сообщением

    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

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

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google
    Перейти к списку вопросов Проблемы верстки

    • Похожие публикации

      • woodoo
        Изображение parallax в header
        Автор: 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 на картанку пишет)
      • AlexxD
        Вакансия Frontend-джедая
        Автор: AlexxD
        Всем привет!
         
        Срочно ищем в офис в Москве на полную ставку отвязного frontend-разработчика с навыками джедая. Полное описание вакансии здесь: https://moikrug.ru/vacancies/1000021706
         
        Пишите на почту из текста вакансии или мне в личку.
         
      • Радосвет
        Масштабирование изображений в галерее
        Автор: Радосвет
        Добрый день!
         
        Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров.
         
        Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой".
         
        У меня было желание настроить галерею более грамотно и удобно.
        Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит.
        У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных.
         
        В оригинале выглядит вот так:
         
        http://demo.megathe.me/heat/portfolio/people/
         
        Код стиля:
        /* =iosSlider----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;}.iosSlider .slider .item img { width: 100%; height: auto; float: left;} На моём сайте вот так:
         
        http://www.radosvet.ru/portfolio/margarita-portret/
         
        Код я немного изменил, добавив max-height: 600px:
        /* =iosSlider max-height: 600px;----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;} В итоге вроде получилось то что мне нужно, но проблема в том, что при уменьшении окна вертикльные кадры "обрезаются" снизу.
         
        Я ещё дописал, добавив     min-height: 600px;:
        ----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px; min-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px; min-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px; min-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;} Теперь почти всё так, как мне нравится. Но параметр максимальной высоты не позволяет адаптивному дизайну быть на 100% рабочим.
        Например, при сужении окна по высоте картинка на экран не помещается.
        А в мобильных браузерах вообще всё как-то странно смотрится В Firefox android при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает).
         
        Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки.
        Помогите, пожалуйста, что можно добавить или изменить?