부트 스트랩 3-점보트론 배경 이미지 효과
안녕하세요 저는 배경 이미지가있는 점보트론이있는 사이트를 구축하려고합니다. 그 자체로는 어렵지 않습니다.
HTML :
<div class="jumbotron">
...
</div>
CSS : (내 사용자 지정 CSS 파일에 있으며 모든 CSS 후에로드 됨).
.jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
이제 이것은 배경 이미지가있는 점보트론을 생성하지만 설명하기는 어렵지만이 웹 페이지에서 볼 수있는 효과를 내고 싶습니다. http://www.andrewmunsell.com 스크롤하면 볼 수 있습니다. jumbotron 콘텐츠 텍스트 등은 배경 이미지보다 빠르게 스크롤됩니다. 이 효과는 무엇이며 bootstrap / html / css로 쉽게 달성 할 수 있습니까?
급여의 HTML을 살펴 봤지만 지금은 따라하기에는 너무 복잡합니다.
고마워, 벤.
편집 : 부트 플라이에 위치한 첫 번째 답변에서 제공하는 예제로 효과를 얻으려고했습니다.
그러나 저에게는 배경 이미지가 나타나고 스크롤이 조금이라도 나 오자마자 전체 이미지가 사라집니다. safari의 관성 스크롤을 사용하여 페이지 상단을 넘어서 스크롤하면 배경이 다시 아래로 이동하려고 시도하므로 이미지가 올바르게로드 된 것 같습니다. 조금이라도 스크롤하자마자 높이가 멀리서 조작하면 이미지가 화면 전체로 이동합니다. 아래는 내 HTML입니다. (탭이 배치되는 위치는 약간 못 생겼지 만 Jekyll은 시차 효과를 만들려는 Jumbotron 헤더, 페이지 콘텐츠 및 페이지 바닥 글을 포함하여 통합했습니다.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hybridisation Recombination and Introgression Detection and Dating</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site for the HybRIDS R package for analysing recombination signal in DNA sequences">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\
ript>
<![endif]-->
</head>
<body>
<div class="bg"></div>
<div class="jumbotron">
<div class="row">
<div class="col-lg-4">
<img src="./img/HybRIDSlogo.png" class="img-rounded">
</div>
<div class="col-lg-8">
<div class="page-header">
<h2> Hybridisation Recombination and Introgression Detection and Dating </h2>
<p> <h2> <small> Easy detection, dating, and visualisation for recombination, introgression and hybridisation events in genomes. </small> </h2> </p>
</div>
</div>
</div>
</div>
<!-- End of JumboTron -->
<div class="container">
PAGE CONTENT HERE
<!-- Close the container that is opened up in header.html -->
</div>
</body>
</html>
bg 클래스의 div와 jumbotron의 맨 위와 div 근처에 Javascript가 포함 된 위치를 볼 수 있습니다.
내 CSS는 다음과 같습니다.
body {
background-color: #333333;
padding-bottom: 100px;
}
.bg {
background: url('../img/carouelbackground.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 350px;
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 0px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background: transparent;
}
Example: http://bootply.com/103783
One way to achieve this is using a position:fixed container for the background image and place it outside of the .jumbotron. Make the bg container the same height as the .jumbotron and center the background image:
background: url('/assets/example/...jpg') no-repeat center center;
CSS
.bg {
background: url('/assets/example/bg_blueplane.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 350px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 0px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background:transparent;
}
Then use jQuery to decrease the height of the .jumbtron as the window scrolls. Since the background image is centered in the DIV it will adjust accordingly -- creating a parallax affect.
JavaScript
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
Demo
After inspecting the sample website you provided, I found that the author might achieve the effect by using a library called Stellar.js, take a look at the library site, cheers!
I think what you are looking for is to keep the background image fixed and just move the content on scroll. For that you have to simply use the following css property :
background-attachment: fixed;
ReferenceURL : https://stackoverflow.com/questions/20914711/bootstrap-3-jumbotron-background-image-effect
'programing' 카테고리의 다른 글
| ASP.NET MVC 4, HttpException을 throw하고 HttpStatusCodeResult를 반환합니까? (0) | 2021.01.15 |
|---|---|
| Maven 저장소에서 오래된 종속성을 정리하는 방법은 무엇입니까? (0) | 2021.01.15 |
| asyncio와 다중 처리를 결합하면 어떤 종류의 문제 (있는 경우)가 있습니까? (0) | 2021.01.15 |
| NaN과 달리 부동 소수점 무한대가 동일한 이유는 무엇입니까? (0) | 2021.01.14 |
| RecyclerView가 항목 배치를 완료 한시기를 아는 방법은 무엇입니까? (0) | 2021.01.14 |