Прокрутка Parallax с исчезающей вертикальной линией

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

Я нашел плагин, который делает заголовок липким, пока пользователь не прокрутится до определенной точки, но моей самой большой проблемой является эффект с вертикальной линией. То, что я пробовал, заставляет строку прокручиваться вверх с содержимым, и линия должна уменьшаться по мере того, как div становится меньше, как показано на видео. Есть ли элегантный способ создать этот эффект без тонкой уродливой кодировки javascript?

Редактировать для уточнения: Видео показывает концепцию каркаса. Будут фоновые изображения для каждого раздела сайта, и он будет использовать привязку фона: исправлено, чтобы создать эффект параллакса. Фоновое изображение также будет масштабироваться, чтобы соответствовать ширине/высоте экрана.

Ссылка на видео: https://www.youtube.com/watch?v=kX_MHb8h-r8&feature=youtu.be

$(function() { 
 
    return $("[data-sticky_column]").stick_in_parent({ 
 
    parent: "[data-sticky_parent]" 
 
    }); 
 
}); 
 
$(window).on("resize", (function(_this) { 
 
    return function(e) { 
 
    return $(document.body).trigger("sticky_kit:recalc"); 
 
    }; 
 
})(this));

h1 { 
 
    margin: 0 0 0 0; 
 
    color: #ff0000; 
 
} 
 
.title-container { 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 
.fixedbkg { 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: block; 
 
} 
 
.container { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.bg1 { 
 
    background-color: #acacac; 
 
    background-attachment: fixed; 
 
} 
 
.bg2 { 
 
    background-color: #a0a0a0; 
 
    background-attachment: fixed; 
 
} 
 
.bg3 { 
 
    background-color: #595959; 
 
    background-attachment: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="bg1 fixedbkg" data-sticky_parent> 
 
    <div class="title-container" data-sticky_column> 
 
     <h1>Title 1</h1> 
 
    </div> 
 
    </div> 
 
    <div class="bg2 fixedbkg" data-sticky_parent> 
 
    <div class="title-container" data-sticky_column> 
 
     <h1>Title 2</h1> 
 
    </div> 
 
    </div> 
 
    <div class="bg3 fixedbkg" data-sticky_parent> 
 
    <div class="title-container" data-sticky_column> 
 
     <h1>Title 3</h1> 
 
    </div> 
 
    </div> 
 
</div>

CodePen Ссылка: http://codepen.io/anon/pen/waMwxP

источник

2015-05-07 user1424761

Если фон является сплошным цветом, как в видеоролике, вы можете просто дать толстую рамку сверху второму div с цветом фона первого div, чтобы он прятал линию первого div на определенное расстояние над верхней частью второго содержимого div. – Tobia

Спасибо, но на самом деле это будет изображение, а размер изображения будет полным. – user1424761

Вы можете использовать старый трюк background-position: fixed.

Вот пример, который я сделал для вас:

http://www.googledrive.com/host/0B1rSHSpIdbJdSm16ZUwyMDZlTUk

Это не конвертировать между сокрытием и прокруткой первого ящика на полпути через, когда вы дойдете до текста, потому что вам нужно Javascript, чтобы сделать это , и это просто быстрое и грязное демо. (Я не могу даже поставить надлежащий Doctype сверху, иначе что-то сломается!)

Но он скрывает белую линию, когда вы прокручиваете, используя только CSS.

Это старый трюк. Эта известная страница с 2002 года, он использует background-position: fixed для имитации непрозрачности фильтра, который не существует в CSS, эффект «окно ванной»:

http://meyerweb.com/eric/css/edge/complexspiral/glassy.html

Исходный код для моего примера выше:

<html> 
<head> 
    <title>CSS-only line hiding effect</title> 
    <style> 
     html, body { 
      margin: 0; 
      font-family: Futura; 
     } 
     p { 
      width: 25em; 
     } 
     .pad { 
      width: 100%; 
      height: 100%; 
      padding: 2em; 
      box-sizing: border-box; 
     } 
     #one { 
      position: fixed; 
      top: 0; 
      background: black url(https://www.bing.com/az/hprichbg/rb/CambridgeBotanicGarden_ROW8585973051_1920x1080.jpg); 
      color: white; 
     } 
     #two { 
      z-index: 1; 
      position: relative; 
      background: #67c3e8 url(https://www.bing.com/az/hprichbg/rb/KokneseCastle_ROW14801377853_1920x1080.jpg); 
     } 
     #coverOne { 
      position: absolute; 
      width: 100%; 
      height: 2em; 
      top: -2em; 
      left: 0; 
      background: black url(https://www.bing.com/az/hprichbg/rb/CambridgeBotanicGarden_ROW8585973051_1920x1080.jpg) fixed; 
     } 
     .line { 
      position: absolute; 
      top: 18em; 
      bottom: 0; 
      left: 5em; 
      width: 5px; 
      background: white; 
     } 
    </style> 
</head> 
<body> 
    <div class="pad" id="one"> 
     <h1>ONE</h1> 
     <p>Lorem ipsum dolor sit amet.</p> 
     <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
     <div class="line"></div> 
    </div> 
    <div class="pad"></div> 
    <div class="pad" id="two"> 
     <div id="coverOne"></div> 
     <h1>TWO</h1> 
     <p>Lorem ipsum dolor sit amet.</p> 
     <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
    </div> 
</body> 
</html>

источник

2015-05-07 23:34:16 Tobia

Спасибо, но я не верю, что буду чувствовать себя комфортно, используя это на коммерческом сайте, который я разрабатываю. Мне нравится идея, но я беспокоюсь, что она не будет работать должным образом в самых разных браузерах и устройствах. Я также хочу добавить, что я в порядке с помощью JavaScript/jQuery для выполнения этой задачи. – user1424761

Прокрутка Parallax с исчезающей вертикальной линией

ответ

Смежные вопросы