Parallax Hero Image создает эффект глубины и перехода при прокрутке вниз к главному герою вашей страницы к содержимому ниже. В следующем руководстве показано, как добавить главное изображение параллакса на свой веб-сайт.
Ниже приведены необходимые HTML, CSS и JavaScript.
Шаг 1. Добавьте приведенный ниже HTML-код на свою веб-страницу.
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <section class="hero"> <h1>Parallax Hero Image</h1> </section> <section class="content"> <section class="ct_icon_box_section"> <div class="container"> <div class="ct-section_header ct-section_header--type2"> <h2> A World-Class Approach to Business </h2> <div class="ct-section_header-description"> Companies are looking to do business with other great companies. WebCorpCo theme has what it takes to show the world you mean business. </div> <div class="clearfix"> </div> <div class="ct-section_header-separator"> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-users"></i> </div> <div class="media-body"> <h3 class="media-heading"> Marketing </h3> <div class="ct-icon_box-content"> Market to the right person, at the right time, at the place. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-cogs"></i> </div> <div class="media-body"> <h3 class="media-heading"> Sales </h3> <div class="ct-icon_box-content"> Improve sales through the use of Big Data and Analytics. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-clipboard"></i> </div> <div class="media-body"> <h3 class="media-heading"> Design </h3> <div class="ct-icon_box-content"> Benefit from award winning mobile responsive design. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-globe"></i> </div> <div class="media-body"> <h3 class="media-heading"> Programming </h3> <div class="ct-icon_box-content"> No need to program. WebCorpCo does all of the coding for you. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-user-plus"></i> </div> <div class="media-body"> <h3 class="media-heading"> Support </h3> <div class="ct-icon_box-content"> We offer 24/7 365 global support for all enterprise customers. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-line-chart"></i> </div> <div class="media-body"> <h3 class="media-heading"> Training </h3> <div class="ct-icon_box-content"> Benefit from webinars and training sessions offered regularly. </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-users"></i> </div> <div class="media-body"> <h3 class="media-heading"> Marketing </h3> <div class="ct-icon_box-content"> Market to the right person, at the right time, at the place. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-cogs"></i> </div> <div class="media-body"> <h3 class="media-heading"> Sales </h3> <div class="ct-icon_box-content"> Improve sales through the use of Big Data and Analytics. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-clipboard"></i> </div> <div class="media-body"> <h3 class="media-heading"> Design </h3> <div class="ct-icon_box-content"> Benefit from award winning mobile responsive design. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-globe"></i> </div> <div class="media-body"> <h3 class="media-heading"> Programming </h3> <div class="ct-icon_box-content"> No need to program. WebCorpCo does all of the coding for you. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-user-plus"></i> </div> <div class="media-body"> <h3 class="media-heading"> Support </h3> <div class="ct-icon_box-content"> We offer 24/7 365 global support for all enterprise customers. </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="ct-icon_box media" onclick="location.href='#'"> <div class="media-left"> <i class="fa fa-line-chart"></i> </div> <div class="media-body"> <h3 class="media-heading"> Training </h3> <div class="ct-icon_box-content"> Benefit from webinars and training sessions offered regularly. </div> </div> </div> </div> </div> </div> </section> </section>
Шаг 2 — Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.
body .hero {
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("https://www.solodev.com/assets/flexslider/slide3.jpg");
background-size: cover;
height: 80vh;
width: 100vw;
}
body .hero:before {
content: '';
height: 100%;
width: 100%;
height: 170vh;
width: 100vw;
background: rgba(44, 123, 183, 0.5);
position: absolute;
}
body .hero h1 {
position: relative;
z-index: 1;
font-family: 'Roboto Condensed', sans-serif;
color: white;
text-align: center;
font-size: 4rem;
line-height: 4rem;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
max-width: 25rem;
margin: 30vh auto 0;
}
body .content {
position: absolute;
z-index: 1000;
top: 80vh;
background: #faf8f8;
width: 100%;
box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ct_icon_box {
margin-bottom: 50px;
}
.ct_icon_box_section {
margin-bottom: 60px;
}
.ct-section_header {
text-align: center;
padding-top: 80px;
}
.ct-section_header h2 {
font-size: 65px;
font-size: 6.5rem;
color: #291b07;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
margin-bottom: 0;
}
.ct-section_header.ct-section_header--type2 h2 {
font-size: 50px;
font-size: 5rem;
padding-bottom: 17px;
padding-bottom: 1.7rem;
font-family: 'Roboto Condensed', sans-serif;
}
.ct-section_header.ct-section_header--type2 .ct-section_header-description {
font-size: 18px;
font-size: 1.8rem;
color: #2e2e2e;
font-weight: 400;
padding-bottom: 5px;
padding-bottom: 0.5rem;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
}
.ct-section_header.ct-section_header--type2 .ct-section_header-separator {
background-color: #0BB3E1;
}
.ct-section_header-separator {
background-color: #924399;
height: 2px;
height: 0.2rem;
display: inline-block;
width: 171px;
width: 17.1rem;
margin: 15px 0 10px;
margin: 1.5rem 0 1rem;
}
.ct-icon_box {
margin-bottom: 3rem;
}
Шаг 3. Добавьте приведенный ниже код JavaScript в parallax-hero.js.
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.hero').css('top',-(scrolled*0.0315)+'rem');
$('.hero > h1').css('top',-(scrolled*-0.005)+'rem');
$('.hero > h1').css('opacity',1-(scrolled*.00175));
};
Шаг 4 — Добавьте указанные ниже файлы на свою веб-страницу.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="parallax-hero.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
Исходно опубликовано в блоге Solodev Web Design
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.
