"Slider with white overlay"
Bootstrap 3.3.0 Snippet by jagjeet

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> <li data-target="#bs-carousel" data-slide-to="3"></li> </ul> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> </hgroup> <img class="img-reponsive heading animated zoomIn" src="https://bufiles.blob.core.windows.net/co3620/slide/villa_logo.png" style="height: 300px; width: 50%; height: auto; top: 10%;" alt="" /> <p class="animated slideInUp" style="color: #fff; font-weight: 100; text-shadow: none; font-size: 20pt; text-transform: none;">Ռեստորնային համալիր</p> </div> </div> <div class="item slides slider"> <div class="slide-2"></div> <div class="hero"> <hgroup> </hgroup> <img class="img-reponsive heading animated slideInRight" src="https://bufiles.blob.core.windows.net/co3620/icons/yerevan_restaurant.png" style="width: 50%; height: auto; max-width: 20%;" alt="" /> <p class="animated slideInLeft" style="color: #fff; text-shadow: none; font-weight: 100; font-size: 20pt; text-transform: none;">Երևանյան լեգենդ</p> <p class="animated slideInRight" style="color: #fff; text-shadow: none; font-weight: 100; font-size: 16pt; text-transform: none;">ռեստորանների ոլորտում</p> </div> </div> <div class="item slides slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> </hgroup> <img class="img-reponsive heading animated slideInRight" src="https://bufiles.blob.core.windows.net/co3620/icons/kitchen_villa.png" style="width: 50%; height: auto; max-width: 10%;" alt="" /> <p class="animated slideInDown" style="color: #fff; font-weight: 100; font-size: 20pt; text-transform: none;">Ողջ կովկասյան և միջերկրական խոհանոցները</p> <p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 16pt; text-transform: none;">ներկայացված են հայկական ոճով</p> </div> </div> <div class="item slides"> <div class="slide-4"></div> <div class="hero"> <hgroup> </hgroup> <p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 20pt; text-transform: none; top:60%;">Հաճելի միջավայր</p> <p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 13pt; text-transform: none;">առանձնացեք քաղաքի աժոտաժից Ձեր մտերիմների հետ</p> </div> </div> <a class="left carousel-control" href="#bs-carousel" role="button" data-slide="prev"><span class="fa fa-angle-left"></span></a> <a class="right carousel-control" href="#bs-carousel" role="button" data-slide="next"><span class="fa fa-angle-right"></span></a> </div> </div>
ul.nav.navbar-nav.navbar-right .animate { font-size: 11pt; color: black !important; } ul.nav.navbar-nav.navbar-right .animate { font-size: 11pt; color: black !important; text-align: center; } span.fa.fa-angle-left { position: absolute; top: 45%; font-size: 3em; left: 3%; } span.fa.fa-angle-right { position: absolute; top: 45%; font-size: 3em; left: 85%; } ul.carousel-indicators { bottom: 3%; } p.animated.slideInDown { } p.animated.slideInUp { } /********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; padding-top: -50px; } .fade-carousel .carousel-inner .item { } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #0000; border-color: #000; opacity: .7; border-radius: 0px; } carousel-indicators { bottom: 3%; border-color: #fff; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; border: none; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #ffffff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } /********************************/ /* Overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 100vh; z-index: 2; background-color: #000; opacity: .9; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #000; background-color: #da2929; border-color: #da2929; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3, .fade-carousel .slides .slide-4, .fade-carousel .slides .slide-5 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; }.fade-carousel .slides .slide-1 { background: url("https://bufiles.blob.core.windows.net/co3620/slide/slide_2.jpg") center center no-repeat; } .fade-carousel .slides .slide-2 { background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_4.jpg") center center no-repeat; } .fade-carousel .slides .slide-3 { background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_3.jpg") center center no-repeat; } .fade-carousel .slides .slide-4 { background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_5.jpg") center center no-repeat; } .fade-carousel .slides .slide-5 { background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_1.jpg") center center no-repeat; } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } }/********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; padding-top: -50px; } .fade-carousel .carousel-inner .item { height: 100vh; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #000; border-color: #000; opacity: .7; border-radius: 0px; } carousel-indicators { bottom: 3%; border-color: #000; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; border: none; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #0000; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 4em; font-weight: bold; margin: 0; padding: 0; } /********************************/ /* Overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 100vh; z-index: 2; background-color: #0000; opacity: .9; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #ffffff; background-color: #da2929; border-color: #da2929; outline: none; margin: 20px auto; } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }
(function(){ 'use strict'; /*----------------------------------------- BACKGROUND PARALLAX INIT ------------------------------------------*/ if( $('.parallax').length ){ $('body').imagesLoaded(function(){ $(window).stellar({horizontalOffset:0,horizontalScrolling:!1}); }); }; /*----------------------------------------- MAIN NAV INIT ------------------------------------------*/ function navTrigger(){ var navTrigger = $('.main-nav-trigger').not('.mobile-nav-trigger'), mainNavContainer = $('.main-nav-container'), wrapper = $('.wrapper'); navTrigger.on('click', function(event) { event.preventDefault(); mainNavContainer.toggleClass('slide-in'); $(this).toggleClass('slide-out'); }); wrapper.on('click', function(event) { mainNavContainer.removeClass('slide-in'); navTrigger.removeClass('slide-out'); }); }; navTrigger(); /*----------------------------------------- MOBILE NAV INIT ------------------------------------------*/ function mobileNav(){ var mobileNavContainer = $('.mobile-nav-container'), mainNavContainer = $('.main-nav-container'), navTrigger = $('.mobile-nav-trigger'); mainNavContainer.find('.logo-container').clone().appendTo(mobileNavContainer); mainNavContainer.find('.main-nav').clone().appendTo(mobileNavContainer); navTrigger.on('click', function(event) { event.preventDefault(); $(this).siblings('.main-nav').slideToggle(); }); }; mobileNav(); /*----------------------------------------- SCROLLTO INIT ------------------------------------------*/ $('.main-nav.onepage-nav').onePageNav(); /*----------------------------------------- TEAM CAROUSEL ------------------------------------------*/ function teamCarousel(){ var memberInfo = $(".members-details-container"), memberImage = $(".members-images-container"); memberInfo.owlCarousel({ items : 1, singleItem : true, loop: true, nav: true, mouseDrag: false, animateIn: 'fadeIn', animateOut: 'fadeOutRight', navContainer: '.team-carousel-nav', navText: ['<span></span>', '<span></span>'] }); memberImage.owlCarousel({ items : 1, singleItem : true, mouseDrag: false, animateIn: 'fadeIn', animateOut: 'fadeOutRight', loop: true }); memberInfo.on('change.owl.carousel', function(event) { memberImage.trigger('to.owl.carousel', event.item.index - 1); }); }; /*--- Team Carousel Init ---*/ if ( $('.team').length ) { $('.team').imagesLoaded(function(){ teamCarousel(); }); }; /*----------------------------------------- TWEETER FEED ------------------------------------------*/ if( $('.tweets-container').length ) { $('.tweet').twittie({ // username: 'google', dateFormat: '%B %d, %Y', template: '<p>{{tweet}}<span>{{date}}</span></p>', count: 1, hideReplies: true, apiPath: 'php/twitter-feed/tweet.php' }); }; /*----------------------------------------- GALLERY INIT ------------------------------------------*/ if ( $('.gallery').length ) { $('.gallery-items-container').find('ul').mixItUp({ animation: { duration: 100, effects: 'fade stagger(20ms) translateZ(-300px)', easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' } }); }; /*----------------------------------------- POPUP INIT ------------------------------------------*/ if ( $('.popup-trigger').length ) { $('.popup-trigger').magnificPopup({ type: 'image', gallery: { enabled: true }, removalDelay: 500, mainClass: 'mfp-fade' }); }; /*----------------------------------------- MENU CAROUSEL INIT ------------------------------------------*/ if ( $('.menus').length ) { var menuCarousel = $('.menu-carousel').owlCarousel({ singleItem: true, items: 1, nav: true, mouseDrag: false, navSpeed: 1000, animateIn: 'fadeIn', animateOut: 'fadeOutDown', navContainer: '.menu-carousel-nav', navText: ['<span></span>', '<span></span>'] }); }; function menuMeals(){ var menuMeals = $('.menu-meals'), menuMealsThumbnail = menuMeals.owlCarousel({ items: 1, singleItem: true, mouseDrag: false, touchDrag: false }); menuMeals.find('.owl-item').on('click', function(event) { var $this = $(this); $this.addClass('active').siblings().removeClass('active'); menuCarousel.trigger('to.owl.carousel', $this.index()); }); menuCarousel.on('changed.owl.carousel', function(event) { var activeMenu = event.item.index; console.log(activeMenu); menuMeals.find('.owl-item:nth-child('+ (activeMenu + 1) + ')' ).addClass('active').siblings().removeClass('active') }); }; if ( $('.menu-meals').length ) { menuMeals(); }; /*----------------------------------------- CONTACT FORM INIT ------------------------------------------*/ function contactForm() { var form = $('#contact-form'); var formMessages = $('#form-messages'); $(formMessages).slideUp(); $(form).submit(function(event) { event.preventDefault(); var formData = $(form).serialize(); if ( !$('#name').val() || !$('#email').val() || !$('#message').val() ) { $('#form-messages').text('Please Complete All inputs'); } else { $('#form-messages').text('Sending your message. Please wait...').slideDown(); }; $(formMessages).removeClass('error').removeClass('success'); $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData }) .done(function(response) { $(formMessages).removeClass('error').delay(2000).slideUp(); $(formMessages).addClass('success').delay(2000).slideUp(); $(formMessages).text(response); $('#name').val(''); $('#email').val(''); $('#message').val(''); }) .fail(function(data) { // Make sure that the formMessages div has the 'error' class. $(formMessages).removeClass('success').delay(2000).slideUp(); $(formMessages).addClass('error').delay(2000).slideUp(); // Set the message text. if (data.responseText !== '') { $(formMessages).text(data.responseText); } else { $(formMessages).text('Oops! An error occured and your message could not be sent.'); } }); }); }; contactForm(); /*----------------------------------------- HEADER BANNER FADE EFFECT ------------------------------------------*/ function headerBanner(){ var introSection = $('.top-banner-bg'), topBanner = $('.top-banner'), topImage = topBanner.find('.top-image'), bottomImage = topBanner.find('.bottom-image'), introSectionHeight = introSection.height(), scaleSpeed = 0.3, opacitySpeed = 1; var MQ = 991; triggerAnimation(); $(window).on('resize', function(){ triggerAnimation(); }); function triggerAnimation(){ if($(window).width()>= MQ) { $(window).on('scroll', function(){ window.requestAnimationFrame(animateIntro); }); } else { $(window).off('scroll'); } } function animateIntro () { var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5), scaleValue = 1 - scrollPercentage*scaleSpeed; if( $(window).scrollTop() < introSectionHeight) { topBanner.css({ 'opacity': 1 - scrollPercentage * 1.6 }); } }; topBanner.imagesLoaded(function(){ topImage.addClass('animated fadeInDown') bottomImage.addClass('animated fadeInDown') }); }; /*--- Header Banner Fade Effect Init ---*/ if ( $('.top-banner-container').length ) { headerBanner(); }; /*----------------------------------------- MEMBERS CAROUSEL ------------------------------------------*/ function membersCarousel(){ var membersCarousel = $('.members-carousel'); membersCarousel.find('ul').owlCarousel({ items: 1, loop: true, center: true, responsive : { 496: { items: 2 }, 767: { items: 3 }, 992 : { items: 4 }, 1199 : { items: 5 } } }); }; if ( $('.members-carousel').length ) { $('.members-carousel').imagesLoaded(function(){ membersCarousel(); }); }; /*----------------------------------------- TESTIMONIALS CAROUSEL ------------------------------------------*/ function testimonialsCarousel(){ var testimonialsCarousel = $('.testimonial-carousel'); testimonialsCarousel.owlCarousel({ singleItem: true, items: 1, loop: true, dots: true, autoplay: true, autoplayTimeout: 3500, autoplayHoverPause: true, animateIn: 'fadeInLeft', animateOut: 'fadeOutRight', dotsContainer: '.testimonial-carousel-nav' }); }; if ( $('.testimonial-carousel').length ) { testimonialsCarousel(); }; /*----------------------------------------- CLIENTS CAROUSEL ------------------------------------------*/ function clientsCarousel(){ var clientsCarousel = $('.clients-carousel'); clientsCarousel.owlCarousel({ items: 1, autoplay: true, autoplayTimeout: 3500, autoplayHoverPause: true, responsive : { 496: { items: 2 }, 767: { items: 3 }, 992 : { items: 4 }, 1199 : { items: 5 } } }); }; if ( $('.clients-carousel').length ) { clientsCarousel(); }; /*----------------------------------------- BLOG POST CATEGORY FILTER INIT ------------------------------------------*/ if ( $('.blog-category-filter').length ) { $('.blog-post').mixItUp({ animation: { duration: 550, effects: 'fade stagger(20ms) translateZ(-300px)', easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' } }); }; /*----------------------------------------- STORE CATEGORY FILTER INIT ------------------------------------------*/ if ( $('.store-category-filter').length ) { $('.store-items').mixItUp({ animation: { duration: 550, effects: 'fade stagger(20ms) translateZ(-300px)', easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' } }); }; /*----------------------------------------- ITEM SLIDESHOW ------------------------------------------*/ function itemSlideshow(){ var itemSlideshow = $(".item-slideshow"), mainImage = itemSlideshow.find('.main-image'), thumbnails = itemSlideshow.find('.thumbnails'); mainImage.owlCarousel({ items : 1, singleItem : true, animateIn: 'fadeInLeft', animateOut: 'fadeOutRight' }); thumbnails.owlCarousel({ items : 2, margin: 15, responsive : { 768: { items: 3 } } }); thumbnails.find('.owl-item').on('click', function() { $(this).addClass('active').siblings().removeClass('active'); mainImage.trigger('to.owl.carousel', $(this).index()); }); }; /*--- Item Slideshow Init ---*/ if ( $('.item-slideshow').length ) { $('.item-slideshow').imagesLoaded(function(){ itemSlideshow(); }); }; /*------------------------------------------ MEDIAELEMENTS INIT ------------------------------------------*/ if ( $('video').length ) { var videoPlayer = new MediaElementPlayer('video'); }; if ( $('audio').length ) { var audioPlayer = $('audio').mediaelementplayer(); }; /*------------------------------------------ PROMO VIDEO ------------------------------------------*/ if ( $('.promo-video').length ) { $('.promo-video').find('video').on('play', function(){ $('.promo-video').find('.promo-contents').fadeOut('200'); }); $('.promo-video').find('video').on('pause', function(){ $('.promo-video').find('.promo-contents').fadeIn('200'); }); }; /*------------------------------------------ SCROLL REVEAL INIT ------------------------------------------*/ if ( $('.wow').length ) { var wow = new WOW({mobile: false}); wow.init(); }; /*------------------------------------------ CART ITEM COUNT INIT ------------------------------------------*/ if ( $('.cart-item-count').length ) { $('.cart-item-count').stepper(); }; /*------------------------------------------ MAIN NAV NICESCROLL INIT ------------------------------------------*/ function mainNavNicescroll(){ if ( $('.main-nav-container').length ) { $('.main-nav-container').niceScroll({ cursoropacitymax: 0.3 }); }; }; mainNavNicescroll(); /*------------------------------------------ MOBILE NAV STICKY INIT ------------------------------------------*/ function mobileNavStickyInit(){ var mobileNavContainer = $('.mobile-nav-container'), mobileNavHeight = mobileNavContainer.outerHeight(), $window = $(window), wrapper = $('.wrapper'); $('.main-header .logo-container').imagesLoaded(function(){ $window.on('scroll', function(){ //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother window.requestAnimationFrame(mobileNav); }); }); function mobileNav(){ if ( $window.scrollTop() > mobileNavHeight && $window.width() <= 991 ) { $('.mobile-nav-container').addClass('sticky animated fadeInDown'); wrapper.css('padding-top', mobileNavHeight); } else { $('.mobile-nav-container').removeClass('sticky animated fadeInDown'); wrapper.css('padding-top', 0); }; }; }; mobileNavStickyInit(); /*------------------------------------------------------------ FUNCTIONS THAT NEED TO RUN WHEN WINDOW IS RESIZED -------------------------------------------------------------*/ $(window).on('resize', function() { mobileNavStickyInit(); }); })();

Related: See More


Questions / Comments: