Background Image

Адаптивный слайдер на весь экран

Script

by — Category Script on

Адаптивный слайдер с контентом. Изюминкой данного слайдера является адаптивность и расширение во весь экран, а также разные анимации появления в случайном порядке.

CSS

.sl-slider-wrapper {
    width: 800px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sl-slider {
    position: absolute;
    top: 0;
    left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} 

.sl-slide {
    z-index: 1;
    display: none;
}

/* The duplicate parts/slices */

.sl-content-slice {
    overflow: hidden;
    position: absolute;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
    width: 100%;
    height: 50%;
    left: -200px;
    -webkit-transform: translateY(0%) scale(1);
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
    top: -200px;
    padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
    top: 50%;
    padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
    width: 50%;
    height: 100%;
    top: -200px;
    -webkit-transform: translateX(0%) scale(1);
    -moz-transform: translateX(0%) scale(1);
    -o-transform: translateX(0%) scale(1);
    -ms-transform: translateX(0%) scale(1);
    transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
    left: -200px;
    padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
    left: 50%;
    padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
    position: absolute;
}

.sl-content {
    width: 100%;
    height: 100%;
    background: #fff;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
    background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
    background: #ccc;
}

.demo-1 .sl-slider-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Custom navigation arrows next prev */

.nav-arrows span {
    position: absolute;
    z-index: 2000;
    top: 45%;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border: 5px solid rgba(0,0,0,0.2);
    text-indent: -90000px;
    margin-top: -40px;
    cursor: pointer;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-arrows span:hover {
    border-color: rgba(0,0,0,0.9);
}

.nav-arrows span.nav-arrow-prev {
    left: 35%;
    border-right: none;
    border-top: none;
    border-radius: 1px;
}

.nav-arrows span.nav-arrow-next {
    right: 35%;
    border-left: none;
    border-bottom: none;
    border-radius: 1px;
}

/* Custom navigation dots */

.nav-dots {
    text-align: center;
    position: absolute;
    bottom: 15%;
    height: 50px;
    width: 100%;
    left: 0;
    z-index: 1000;
}

.nav-dots span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 3px;
    margin-top: 10px;
    background: #ddd;
    background: rgba(150,150,150,0.4);
    cursor: pointer;
    box-shadow: 
        0 1px 1px rgba(255,255,255,0.4), 
        inset 0 1px 1px rgba(0,0,0,0.1);
}

.nav-dots span.nav-dot-current:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
}

/* Content elements */

.demo-1 .deco {
    width: 160px;
    height: 160px;
    border: 2px dashed #ddd;
    border: 2px dashed rgba(150,150,150,0.4);
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 54%;
    margin: 0 0 0 -130px;
}

.demo-1 [data-icon]:after {
    content: attr(data-icon);
        font-style: normal;
        font-family: 'Tahoma,Geneva,sans-serif';
    color: #999;
    text-shadow: 0 0 1px #999;
    position: absolute;
    width: 220px;
    height: 220px;
    line-height: 220px;
    text-align: center;
    font-size: 100px;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -110px;
    box-shadow: inset 0 0 0 10px rgba(255,255,255,0.3);
    border-radius: 50%;
}

.demo-1 .sl-slide h2 {
    color: #000;
    text-shadow: 0 0 1px #000;
    padding: 20px;
    position: absolute;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 13px;
    text-transform: uppercase;
    width: 80%;
    left: 10%;
    text-align: center;
    line-height: 50px;
    bottom: 50%;
    margin: 0 0 -120px 0;
}

.demo-1 .sl-slide blockquote {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    height: 70px;
    color: #8b8b8b;
    z-index: 2;
    bottom: 50%;
    margin: 0 0 -200px 0;
    padding: 0;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.demo-1 .sl-slide blockquote p{
    margin: 0 auto;
    width: 60%;
    max-width: 400px;
    position: relative;
}

.demo-1 .sl-slide blockquote p:before {
    color: #f0f0f0;
    color: rgba(244,244,244,0.65);
    font-family: "Arial", Bookman, Garamond, serif;
    position: absolute;
    line-height: 60px;
    width: 75px;
    height: 75px;
    font-size: 200px;
    z-index: -1;
    left: -90px;
    top: 40px;
    content: '\201C';
}

.demo-1 .sl-slide blockquote cite {
    font-size: 10px;
    padding-top: 10px;
    display: inline-block;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px;
}

/* Custom background colors for slides in first demo */

/* 1 Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
    background: 
repeating-linear-gradient(
 -45deg,
 #fff,
 #C8DFFA  5px,
 #f4f4f4 5px, 
 #f4f4f4 40%);
;
        background-size:cover;

}
.demo-1 .bg-1 [data-icon]:after {
    text-shadow: 0 0 1px #277d87;
    color: #000;
}
.demo-1 .bg-1 blockquote{
    color: #000;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
/* 2 Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
    background: url(/background/cd-background-2.jpg) #2B7CAB no-repeat;
        background-size:cover;
}

.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
    color: #fff;
}
.demo-1 .bg-2 blockquote{
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.demo-1 .bg-2 blockquote:before {
    color: #222;
}

/* 3 Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
    background: url(http://www.mggp.ru/background/cd-background-3.jpg) #db84ad no-repeat;
        background-size:cover;
}

.demo-1 .bg-3 .deco {
    border-color: #fff;
    border-color: rgba(225,225,225,0.5);
}

.demo-1 .bg-3 [data-icon]:after {
    color: #fff;
    text-shadow: 0 0 1px #fff;
    box-shadow: inset 0 0 0 10px rgba(225,225,225,0.5);
}

.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote{
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.demo-1 .bg-3 blockquote:before {
    color: #c46c96;
}

/* 4 Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
    background: url(/background/img-2.jpg) #5bc2ce no-repeat;
        background-size:cover;
}

.demo-1 .bg-4 .deco {
    border-color: #fff;
}

.demo-1 .bg-4 [data-icon]:after {
    text-shadow: 0 0 1px #277d87;
    color: #fff;
}

.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote{
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.demo-1 .bg-4 blockquote:before {
    color: #379eaa;
}

/* 5 Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
    background: url(/background/minecraft-Background.jpg) #FAEF87 no-repeat;
        background-size:cover;
}

.demo-1 .bg-5 .deco {
    border-color: #ECD82C;
}

.demo-1 .bg-5 .deco:after {
    color: #FAEF87;
    text-shadow: 0 0 1px #000;
}

.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote{
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.demo-1 .bg-5 blockquote:before {
    color: #ecd82c;
}

/* 6 Slide */
.demo-1 .bg-6 .sl-slide-inner,
.demo-1 .bg-6 .sl-content-slice {
    background: url(/background/cd-background-1.jpg) #AAEFE3 no-repeat;
        background-size:cover;
}

.demo-1 .bg-6 [data-icon]:after,
.demo-1 .bg-6 h2 {
    color: #fff;
}

.demo-1 .bg-6 [data-icon]:after {
    color: #fff;
    text-shadow: 0 0 1px #815353;
    box-shadow: inset 0 0 0 10px rgba(244,244,244,0.4);
}

.demo-1 .bg-6 blockquote:before {
    color: #379eaa;
}
/* Animations for content elements */

.sl-trans-elems .deco{
    -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
    -webkit-animation: moveUp 1s ease-in-out both;
    -moz-animation: moveUp 1s ease-in-out both;
    -o-animation: moveUp 1s ease-in-out both;
    -ms-animation: moveUp 1s ease-in-out both;
    animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
    -webkit-animation: fadeIn 0.5s linear 0.5s both;
    -moz-animation: fadeIn 0.5s linear 0.5s both;
    -o-animation: fadeIn 0.5s linear 0.5s both;
    -ms-animation: fadeIn 0.5s linear 0.5s both;
    animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
    -webkit-animation: scaleDown 1s ease-in-out both;
    -moz-animation: scaleDown 1s ease-in-out both;
    -o-animation: scaleDown 1s ease-in-out both;
    -ms-animation: scaleDown 1s ease-in-out both;
    animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
    -webkit-animation: fadeOut 1s ease-in-out both;
    -moz-animation: fadeOut 1s ease-in-out both;
    -o-animation: fadeOut 1s ease-in-out both;
    -ms-animation: fadeOut 1s ease-in-out both;
    animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
    -webkit-animation: fadeOut 1s linear both;
    -moz-animation: fadeOut 1s linear both;
    -o-animation: fadeOut 1s linear both;
    -ms-animation: fadeOut 1s linear both;
    animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
    0% {-webkit-transform: translateX(500px) rotate(360deg);}
    100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
    0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
    0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
    0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
    0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
    0% {-webkit-transform: translateY(40px);}
    100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
    0% {-moz-transform: translateY(40px);}
    100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
    0% {-o-transform: translateY(40px);}
    100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
    0% {-ms-transform: translateY(40px);}
    100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
    0% {transform: translateY(40px);}
    100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-o-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
    0% {-webkit-transform: scale(1);}
    100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
    0% {-moz-transform: scale(1);}
    100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
    0% {-o-transform: scale(1);}
    100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
    0% {-ms-transform: scale(1);}
    100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
    0% {transform: scale(1);}
    100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-o-keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut{
    0% {opacity: 1;}
    100% {opacity: 0;}
}


/* Media Queries for custom slider */

@media screen and (max-width: 660px) {
    .demo-1 .deco {
        width: 130px;
        height: 130px;
        margin-left: -65px;
        margin-bottom: 50px;
    }

    .demo-1 [data-icon]:after {
        width: 110px;
        height: 110px;
        line-height: 110px;
        font-size: 40px;
        margin: -55px 0 0 -55px;
    }

    .demo-1 .sl-slide blockquote {
        margin-bottom: -120px;
    }

    .demo-1 .sl-slide h2 {
        line-height: 22px;
        font-size: 18px;
        margin-bottom: -40px;
        letter-spacing: 8px;
    }

    .demo-1 .sl-slide blockquote p:before {
        line-height: 10px;
        width: 40px;
        height: 40px;
        font-size: 120px;
        left: -45px;
    }
}

Java scripts

<script type="text/javascript" src="/modernizr.custom.js"></script>
 <script type="text/javascript" src="/custom.min.js"></script>
 <script type="text/javascript" src="/jquery.custom.js"></script>

 <script type="text/javascript"> 
 $(function() {
 var Page = (function() {
 var $navArrows = $( '#nav-arrows' ),
 $nav = $( '#nav-dots > span' ),
 slitslider = $( '#slider' ).slitslider( {
 onBeforeChange : function( slide, pos ) {
 $nav.removeClass( 'nav-dot-current' );
 $nav.eq( pos ).addClass( 'nav-dot-current' );
 }
 } ),
 init = function() {
 initEvents();
 },
 initEvents = function() {
 // add navigation events
 $navArrows.children( ':last' ).on( 'click', function() {
 slitslider.next();
 return false;
 } );
 $navArrows.children( ':first' ).on( 'click', function() {
 slitslider.previous();
 return false;
 } );
 $nav.each( function( i ) {
 $( this ).on( 'click', function( event ) {
 var $dot = $( this );
 if( !slitslider.isActive() ) {
 $nav.removeClass( 'nav-dot-current' );
 $dot.addClass( 'nav-dot-current' );
 }
 slitslider.jump( i + 1 );
 return false;
 } );
 } );
 };
 return { init : init };
 })();
 Page.init();
 /**
 * Notes: 
 * 
 * example how to add items:
 */
 /*
 var $items = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>opisanie</p><cite>madeas gaming group</cite></blockquote></div></div>');
 // call the plugin's add method
 ss.add($items);
 */
 });
 </script>


<script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-7243260-2']);
 _gaq.push(['_trackPageview']);
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 </script>

HTML

<div class="container demo-1">
 <div id="slider" class="sl-slider-wrapper">
 <div class="sl-slider">
 <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="M"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite></blockquote>
 </div>
 </div>
 <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="A"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite></blockquote>
 </div>
 </div>
 <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="D"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite></blockquote>
 </div>
 </div>
 <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="E"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite></blockquote>
 </div>
 </div>
 <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="A"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite></blockquote>
 </div>
 </div>
 <div class="sl-slide bg-6" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
 <div class="sl-slide-inner">
 <div class="deco" data-icon="S"></div>
 <h2>TITLE</h2>
 <blockquote><p>Content</p>
<cite>slogan company</cite><>
 </div>
 </div>
 </div><!-- /sl-slider -->
 <nav style="display:none;" id="nav-arrows" class="nav-arrows">
 <span class="nav-arrow-prev">Previous</span>
 <span class="nav-arrow-next">Next</span>
 </nav>
 <nav style="display:none;" id="nav-dots" class="nav-dots">
 <span class="nav-dot-current"></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </nav>
 </div>
 </div>

modernizr.custom.js custom.min.js jquery.custom.js

 ПРОВЕРЕНО! 


Понравился материал?
Поделитесь с друзьями
С этим материалом смотрят:
    Плавная прокрутка к материалу по клику

    Плавная прокрутка к материалу ...

    Скрипт, который плавно прокручивает страницу наверх ...

    View More
    0 539 16:19
    Скрипт смены текста и фона

    Скрипт смены текста и фона

    Раньше при использовании JavaScript можно было измен...

    View More
    0 1429 15:51
    Сколько стоит создать сайт в интернете?

    Сколько стоит создать сайт в и...

    Сколько стоит создать сайт? Вполне насущный вопрос, ...

    View More
    0 1082 10:36
    Как сделать сайт визитку самостоятельно?

    Как сделать сайт визитку самос...

    Визитка – самый простой в плане технической ре...

    View More
    0 681 23:22
Метки: создание, Разработка, Скрипты
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu