Полноэкранный слайдер с визуальными эффектами.
Всем привет. На сайте размещен полноэкранный слайдер.
HTML <div class="slider">
<div class="slide" style="background-image: url("1.jpg");">
<p class="content">text</p>
</div>
<div class="slide" style="background-image: url("2.jpg");">
<p class="content">text</p>
</div>
<div class="slide" style="background-image: url("3.jpg");">
<p class="content">text</p>
</div>
</div>
Далее для слайдера сделал эффект увеличения картинки: СSS .slide{ transition:all 4000ms linear; } .slide:hover{ transform: scale(1.1); } Однако контент внутри слайдера увеличивается вместо с картинкой, а надо сделать так, чтобы увеличивалась исключительно сама картинка. По html-коду понятно, что увеличение контента происходит по причине того, что блок с картинкой является родительским элементом для блока с контентом. Но разместить контент отдельно не получится. Используемый слайдер http://www.jqueryscript.net/demo/Ful...hoenix-Slider/ Поставил его по причине, что изначально по мне это был полноэкранный слайдер с fade-анимацией и без лишних настроек. |
LLIypuk,
вариант... <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body, html{
height: 100%;
}
.content {
width: 200px;
text-align: center;
font-size: 48px;
color: hsla(0, 0%, 100%, 1);
margin: 50px auto;
}
.slide{
border: 1px dashed Gray; padding: 5px; height: 100%; width: 100%;
background-image: url(http://risovach.ru/upload/2014/03/generator/kosmos_45225308_orig_.jpeg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0% 0%;
transition:all 4000ms ease-out;
}
.slide:hover{
background-position: 20% 30%;
background-size: 120% 130%;
}
</style>
</head>
<body>
<div class="slide"><p class="content">text</p></div>
</body>
</html>
|
Попробовал. Не работает. Тут похоже только один вариант - найти другой полноэкранный слайдер с версткой, где картинка не будет родительским элементом контента.
|
Fullscreen Slider c встроенным эффектом приближения
LLIypuk,
встроил предложенный вариант выше в плагин и css строка 11 ... смотреть в новых браузерах и ie > 11 ... пропорции картинок не предусмотрено. <!DOCTYPE html>
<html lang="en">
<head>
<base href="http://www.jqueryscript.net/demo/Fullscreen-Responsive-Image-Slideshow-with-jQuery-Phoenix-Slider/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="jQuery Phoenix Slider Demo">
<meta name="author" content="">
<style type="text/css">
.phoenix-feather{
background-size: 100% 100%;
transition:background-size 4000ms ease-out;
}
</style>
<title>jQuery Phoenix Slider Demo</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="phoenix-slider">
<div class="phoenix-feather">
<img src="img/1.jpg" alt="" />
</div>
<!-- END ash -->
<div class="phoenix-feather">
<img src="img/2.jpg" alt="" />
</div>
<!-- END ash -->
<div class="phoenix-feather">
<img src="img/3.jpg" alt="" />
</div>
<!-- END ash -->
<div class="phoenix-feather">
<img src="img/4.jpg" alt="" />
</div>
<!-- END ash -->
<div class="phoenix-feather">
<img src="img/5.jpg" alt="" />
</div>
<!-- END ash -->
<div class="phoenix-feather">
<img src="img/6.jpg" alt="" />
</div>
<!-- END ash -->
</div>
<!-- END phoenix-slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.mobile.touchsupport.js"></script>
<script>(function(c){if(c){var h=function(){var a=this;this.setup=function(a,d){this.element=c(a);this.options=d;this.interval=null;this.ashes=this.element.children("div");this.total=this.ashes.length;this._static=1==this.ashes.length;this.current=this.ashes.length-1;this.elevation=null;this._defaults={delay:1E4,speed:400,height:null,fullscreen:!0,dots:!0,keys:!0,complete:function(a,b,c){}};this.init()};this.init=function(){var b=jQuery.fn.transition||jQuery.fn.animate;jQuery.fn.spitFire=function(){return b.apply(this,
arguments)};this._defaults=c.extend(this._defaults,this.options);var d,e;c(window).on("resize",function(){a.resize()}).trigger("resize");this._defaults.dots&&!a._static&&this.dots();this._defaults.keys&&!a._static&&c(document).keydown(this.keys);this.ashes.each(function(a){d=c(this);e=d.children("img");d.css({"background-image":"url("+e.attr("src")+")","background-size":"100% 100%"});0==a&&d.css("z-index",4);e.remove()});!a._static&&c().swiperight&&c().swipeleft&&a.element.swipeleft(a.next)&&a.element.swiperight(a.prev);
this.next();!a._static&&this.play()};this.resize=function(){this.computeTallness();this.element.css({height:(!0===this._defaults.fullscreen?c(window).height():a.elevation)+"px"})};this.computeTallness=function(){!0===this._defaults.fullscreen?a.elevation=c(window).height():"string"===(typeof a._defaults.height).toLowerCase()?"%"===a._defaults.height.slice(-1)&&(a.elevation=c(window).height()*(a._defaults.height.substr(0,a._defaults.height.length-1)/100)):"number"===(typeof a._defaults.height).toLowerCase()?
a.elevation=a._defaults.height:a.elevation=0==a.element.height()?c(window).height():a.element.height()};this.dots=function(){var b='<div class="container-dots-wrapper"><div class="container-dots-inner"><ol class="dots">';c.each(this.ashes,function(a){b+='<li class="dot'+(1>a?" active":"")+'">'+(a+1)+"</li>"});b+="</ol></div></div>";this.element.append(b).find(".dot").click(function(){a.move(c(this).index(),!0)})};this.index=function(){return a.current};this.destroy=function(){this.element.removeData()};
this.play=function(){a.interval=setInterval(function(){a.next()},a._defaults.delay);return a};this.stop=function(){a.interval=clearInterval(a.interval);return a};this.keys=function(b){b=b.which;var d={37:a.prev,39:a.next};if(c.isFunction(d[b]))d[b](!0)};this.next=function(b){return a.move(a.current+1,b)};this.prev=function(b){return a.move(a.current-1,b)};this.move=function(b,c){if(b!=a.current){var d,f=this.ashes.eq(a.current),g;this.ashes.eq(b).length||(b=0);0>b&&(b=this.ashes.length-1);a.current=
b;d=a.current;g=this.ashes.eq(d);g.css({opacity:1});a._static||(a.element.find(".dot:eq("+b+")").addClass("active").siblings().removeClass("active"),f.spitFire({opacity:0,duration:this._defaults.speed},function(){f.css({"z-index":"auto","background-size":"100% 100%"});g.css({"z-index":4,"background-size":"110% 110%"});c&&a.stop().play();"function"===typeof a._defaults.complete&&a._defaults.complete(d,g,f)}))}};this.getRandomInt=function(a,c){return Math.floor(Math.random()*(c-a+1))+a}};return c.fn.phoenix=
function(a){var b=this.length;return c(this.each(function(d){var e=c(this),f=(new h).setup(e,a);e.data("phoenix"+(1<b?"-"+(d+1):""),f)})).data("phoenix")}}})(jQuery);</script>
<script src="js/main.js"></script>
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:54. |