раздвигание фоновой картинки
есть фоновая картинка. на ней три надписи. под надписями стрелки вниз. при нажатии на стрелку фон должен как бы разрезаться под кнопкой стрелки (при этом фон остается прежним по структуре. т.е. часть просто съезжает ниже, а на месте разреза на всю ширину фона вставляется белый блок) . и на месте разреза появляется блок с определенной информацией. как реализовать данную задумку???
вот html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>разрез фона</title>
<style>
header {
background-image: url(http://www.entheosweb.com/images/backgrounds/blue/lines.jpg);
background-repeat: none;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: red;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px
}
header .intro-text .intro-heading {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px
}
@media (min-width:768px) {
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">первая секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
<div class="intro-lead-in">вторая секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
<div class="intro-lead-in">третья секция</div>
<a href="#"class="arrow-down"><img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"></a>
</div>
</div>
</header>
</body>
</html>
|
открывашка 244 slideToggle
deadhunter,
:)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>разрез фона</title>
<style>
header {
background-image: url(http://www.entheosweb.com/images/backgrounds/blue/lines.jpg);
background-repeat: none;
background-attachment: scroll;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: red;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px
}
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 22px;
line-height: 22px;
margin-bottom: 25px
}
header .intro-text .intro-heading {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 50px;
line-height: 50px;
margin-bottom: 25px
}
@media (min-width:768px) {
header .intro-text .intro-lead-in {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 40px;
line-height: 40px;
margin-bottom: 25px
}
}
.block{
display: none;
height: 300px;
background-color: #FFFFFF;
}
.arrow-down.open img:nth-child(1), .arrow-down img:nth-child(2) {
display: none;
}
.arrow-down.open img:nth-child(2), .arrow-down img:nth-child(1) {
display: inline-block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function() {
var $a = $(".arrow-down"),
$b = $(".arrow-down + div");
$a.each(function(indx, el) {
el = $(el);
el.on("click", function(event) {
event.preventDefault();
var next = el.next()
$b.stop(true,true).not(next.slideToggle(800,function() {
next.scrollTo(800)
})).slideUp(800);
$a.not(el.toggleClass("open")).removeClass("open");
})
})
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">первая секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">1</div>
<div class="intro-lead-in">вторая секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">2</div>
<div class="intro-lead-in">третья секция</div>
<a href="#"class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png">
</a>
<div class="block">3</div>
</div>
</div>
</header>
</body>
</html>
|
Цитата:
|
deadhunter,
background-attachment :-? |
Цитата:
|
| Часовой пояс GMT +3, время: 07:30. |