Bootstrap Snippet layout using HTML CSS jQuery

*,*::before,*::after { border: 0; box-sizing: content-box; margin: 0; padding: 0; } html, body { color: #333; font-family: 'Roboto', helvetica, arial, sans-serif; font-weight: 400; } a { color: #555; text-decoration: none; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } a:hover { color: #4DBDDA; } article, .container, footer, header, section { margin: 0 auto; overflow: hidden; padding: 0; position: relative; } h2 { font-size: 3em; font-weight: 200; letter-spacing: 2px; padding: 80px 0 60px; } h3 { font-weight: 400; padding: 20px 0 15px; } h5 { padding: 20px 0 10px; } hr { border: 0; border-bottom-width: 1px; border-style: solid; border-color: #EEE; padding: 60px 0 0; } ul { overflow: hidden; position: relative; } ul, li { display: block; list-style-type: none; margin: 0; padding: 0; } p { font-weight: 100; padding: 6px 0 10px; } video, img { border: 0; display: block; height: auto; margin: 0 auto; object-fit: cover; padding: 0; width: initial; } iframe { height: 100%; width: 100%; } .container { text-align: center; } .container p { max-width: 640px; margin: 0 auto; padding: 10px 0 40px; } .container hr { margin: 0 10% 0; } .flex { margin: 0 auto; overflow: hidden; padding: 60px 0 40px; position: relative; width: initial; } .flex > .box { display: inline-block; margin: 0 auto; padding: 20px 0; width: initial; } .flex > .box > p { max-width: initial; padding: 20px 10px; } .btn-scroll { background: transparent; border: 2px solid rgba(255,255,255,0.35); border-radius: 50%; bottom: 80px; color: #FFF; font-size: 2em; height: 40px; left: 0; margin: 0 auto; overflow: hidden; padding: 10px; position: absolute; right: 0; text-align: center; width: 40px; z-index: 9992; } .btn-scroll:hover { border: 2px solid #FFF; color: #FFF; } .btn-scroll span { display: inline-block; -webkit-animation: next-section-bounce 2s infinite; -moz-animation: next-section-bounce 2s infinite; animation: next-section-bounce 2s infinite; } .btn-scroll:hover { cursor: pointer; border-color: #FFF; color: #FFF; } .btn-scroll:hover span { -webkit-animation: 0s infinite; -moz-animation: 0s infinite; animation: 0s infinite; } @-webkit-keyframes next-section-bounce { 0% { -webkit-transform: translateY(5px); opacity: 0.8; } 50% { -webkit-transform: translateY(-5px); opacity: 1; } 100% { -webkit-transform: translateY(5px); opacity: 0.8; } } @-moz-keyframes next-section-bounce { 0% {-moz-transform: translateY(5px);} 50% {-moz-transform: translateY(-5px);} 100% {-moz-transform: translateY(5px);} } @keyframes next-section-bounce { 0% {transform: translateY(5px);} 50% {transform: translateY(-5px);} 100% {transform: translateY(5px);} } .btn-link { overflow: hidden; padding: 20px 0 10px; position: absolute; } .btn-link span { background: #FFF; margin: 20px auto 10px; padding: 12px 10px; } .content { margin: 0 auto; overflow: 0; padding: 0; position: relative; } #intro .container { width: initial; } #aditions { background: #2B879E; color: #FFF; padding: 40px 0 80px; } #aditions .box { text-align: left; } #aditions h3, #aditions h5 { font-weight: 100; } #aditions p { font-size: 14px; padding: 0 0 8px; } #portafolio { background-image: url('https://goo.gl/LSESHT'); background-position: center; background-size: cover; padding: 0 0 60px; position: relative; } #portafolio article { display: inline-block; margin: 0 -2px; vertical-align: middle; } #portafolio article, #portafolio figure, #portafolio figcaption, #portafolio figure img { height: 320px; width: 100%; } #portafolio figure, #portafolio figcaption { color: #FFF; margin: 0; overflow: hidden; padding: 0; position: relative; } #portafolio figcaption { color: #FFF; display: inline-block; left: 0; position: absolute; top: -100%; vertical-align: middle; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #portafolio h3 { margin: 140px 10px 10px; } #portafolio .content a { color: #FFF; } #portafolio article:hover figcaption { background: rgba(43, 135, 158, 0.85); top: 0; } #blog { background-image: url('https://goo.gl/jBr9v4'); background-position: center; background-size: cover; padding: 20px 0 60px; } #blog:after { background: #2B879E; content: ""; opacity: .56; position: absolute; left: 0; top: 0; width: 100%; height: 100.1%; z-index: 1; } #blog h2 { color: #FFF; font-weight: 400; z-index: 2; } #blog .container {z-index: 2;} #blog li { width: 100%; } #blog figure, #blog figcaption { background: #FFF; margin: 0; padding: 0; } #blog figure, #blog figure img { height: 240px; width: 100%; } #blog figcaption { padding: 10px; } #blog ul { list-style: none; margin: 0 auto; width: 100%; position: relative; overflow: hidden; padding-bottom: 150px; margin-bottom: 10px; margin: 0; } #blog li { display: block; margin: 1em auto 2em; margin-left: 120px; position: relative; width: calc(100% - 120px); } #blog span.date-time { display: block; margin-left: -100px; position: absolute; right: auto; top: 50px; text-align: center; color: #FFF; z-index: 10; line-height: 1; } #blog span.date-time > span { display: block; position: relative; width: 100%; } #blog span.date-time span:first-child { font-size: 4em; } #blog span.date-time span { font-size: 1em; } #blog span.date-time span:last-child { font-size: 1.5em; } #blog span.bullet { display: inline-block; position: absolute; right: auto; top: 93px; text-align: center; background-color: #FFF; z-index: 10; line-height: 1; width: 25px; height: 25px; border-radius: 50%; } #blog span.bullet {display: none} #blog .loadmore { position: absolute; left: 50%; bottom: 0; background-color: #FFF; height: 40px; width: 40px; border-radius: 50%; text-align: center; margin-left: -22px; color: #222; font-size: 2rem; line-height: 2.5rem; padding: 2px; } #blog .loadmore:hover { background: #2B879E; color: #FFF; } #clients { color: #FFF; background-color: #464646; padding: 60px 0; background: url(https://goo.gl/7EPhUS) no-repeat center center; background-size: cover; } #clients:after { background-color: #2B879E; opacity: 0.35; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100.1%; z-index: 1; } #clients .container {z-index: 2} #clients .slide { margin: 0; text-align: left; width: 2340px; } #clients .slide .box { display: inline-block; height: 170px; width: 230px; } #clients .slide img { height: auto; margin: 0 auto; object-fit: inherit; width: 160px; } #clients .slide-controls { height: 40px; margin: 40px auto 10px; position: relative; } #clients .slide-controls .btn { font-size: 2em; position: absolute; width: 40px; height: 40px; color: #FFF; border: 1px solid rgba(255,255,255,.45); text-align: center; cursor: pointer; } #clients .slide-controls .btn:hover { background: #2B879E; border: 0; color: #FFF; } #clients .btn.l { left: 50%; margin-left: -50px; border-radius: 50%; } #clients .btn.r { left: 50%; margin-right: -50px; border-radius: 50%; } @media only screen and (min-width: 700px){ .container {width: 700px} .flex > .box {width: 48%} #aditions .flex > .box {width: 48%;} #portafolio article, #portafolio figure, #portafolio figcaption, #portafolio figure img { height: 320px; width: 320px; } } @media only screen and (min-width: 900px){ .container {width: 900px} .flex > .box {width: 32%} #blog ul::before { background: #FFF; content: ""; left: 50%; top: 0; bottom: 0; position: absolute; width: 1px; margin-left: 0; margin-top: -10px; height: 9999px; } #blog figure, #blog figcaption { background: #FFF; margin: 0; padding: 0; } #blog figure, #blog figure img { height: 240px; width: 100%; } #blog figcaption { padding: 10px; } #blog li { display: block; position: relative; width: 46%; } #blog li:nth-child(odd){ clear: both; float: left; margin: 1em auto 2em 0; padding: 0 4% 0 0; } #blog li:nth-child(odd) > span.date-time { right: 0; margin: 0 -100px 0 auto; } #blog li:nth-child(odd) > span.bullet { right: 0; margin: 0 -13px 0 auto; } #blog span.bullet {display: block} #blog li:nth-child(even){ clear: both; float: right; margin: 1em auto 2em 0; padding: 0 0 0 4%; } #blog li:nth-child(even) > span.date-time { left: 0; margin: 0 auto 0 -100px; } #blog li:nth-child(even) > span.bullet { left: 0; margin: 0 auto 0 -13px; } #blog h3 {padding: 0 0 10px;} #blog p {font-size: 1em;} } @media only screen and (min-width: 1020px){ .container {width: 1000px} .flex > .box {width: 32%} #blog h3 {padding: 0 0 10px;} #blog p {font-size: 0.875em;} } @media only screen and (max-width: 500px) { #blog li > span.date-time {display: none} #blog ul > li { margin: 0 10px 2em; width: calc(100% - 20px); } }

$(function(){ var w = $(window).width(), h = $(window).height() $('#intro video').css({height: ''+h+'',width: ''+w+''}) $(window).resize(function(){ var w = $(window).width(), h = $(window).height() $('#intro video').css({height: ''+h+'',width: ''+w+''}) }) }) jQuery(function($) { "use strict"; /*------------------------------------------------------------------ Passed Options From Admin Panel ------------------------------------------------------------------*/ var animation_on_mobile_switch = ss_shortcode_data.animation_on_mobile_switch; /*---------------------------------------------------------------------------------*/ /* Global Values /*---------------------------------------------------------------------------------*/ var $window = $(window), $body = $('body'), viewport_width = $window.width(), viewport_height = $window.height(), $header = $('.main-header'), $footer = $('.main-footer'), is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), location_hash = "#", _skrollr = skrollr.get(); function update_viewport_vars() { viewport_width = $(window).width(); viewport_height = $(window).height(); } var _update_viewport_vars = _.throttle(update_viewport_vars, 100); $window.resize(_update_viewport_vars); // function scrollToHashID() { // if ( $('body').hasClass('ss-home') ) { // // Animate scroll if a hash is set in the URL // // var page_url = window.location.href, // // hash = page_url.substring( page_url.lastIndexOf("#") + 1 ); // if ( $('section[id="' + location_hash + '"]' ).length > 0 ) { // var top = $('section[id="' + location_hash + '"]' ).offset().top - header_offset; // $("html, body").animate({ scrollTop: top } , 900, 'easeOutExpo'); // window.location = window.location + location_hash; // } // } // } /*---------------------------------------------------------------------------------*/ /* Revealing Effects Init /*---------------------------------------------------------------------------------*/ if ( animation_on_mobile_switch == "off" && is_mobile ) { $body.addClass('ss-no-effect-on-mobile'); } else { $('.ss-effect').waypoint( function(direction) { $(this).bring({ action: "show", animation: $(this).attr('data-ss-effect'), speed: $(this).attr('data-ss-effect-speed'), delay: $(this).attr('data-ss-effect-delay'), offset: $(this).attr('data-ss-effect-offset'), }); }, { offset: "90%" }); } /*---------------------------------------------------------------------------------*/ /* Spnoy Studio Exclusive Gallery /*---------------------------------------------------------------------------------*/ $('.ss-tiles-container').each( function() { // Cache Selectors var $tiles_container = $(this), $tiles_inner = $tiles_container.find('.ss-tiles-inner'), $tile_all = $tiles_inner.find('.ss-tile'), $tile_layout_1 = $tile_all.filter('.ss-tile.has-layout-1'), $tile_layout_2 = $tile_all.filter('.ss-tile.has-layout-2'), $tile_layout_3 = $tile_all.filter('.ss-tile.has-layout-3'), $tile_layout_4 = $tile_all.filter('.ss-tile.has-layout-4'), $tile_has_caption = $tile_all.filter('.ss-tile.has-caption'), $tile_layout3_content = $tile_layout_3.find('.ss-tile-content'), $tile_layout4_content = $tile_layout_4.find('.ss-tile-content'), $tile_layout1_content = $tile_layout_1.find('.ss-tile-content'), is_horizontal = $tiles_container.hasClass('ss-tiles-horizontal'), has_gap = !$tiles_container.hasClass('ss-tiles-no-gap'); // When Images are loaded var imageLoader = imagesLoaded( $tiles_container ); imageLoader.on( 'always', function( instance ) { // Remove loading gif $tiles_inner.removeClass('ss-loading'); // Set the container to match our items positions if ( $tiles_container.closest('.ss-fullscreen-section').length <= 0 ) { $tiles_container.css({ width: function() { return $(this).parent().width() + 12; }, marginLeft: function() { return -6; } }); if ( is_horizontal ) { $tiles_container.css({ width: function() { return $(this).parent().width() + 6; }, }); } var _tiles_container_update = _.throttle(function() { $tiles_container.css({ width: function() { return $(this).parent().width() + 12; }, marginLeft: function() { return -6; } }); if ( is_horizontal ) { masonry_tiles_sly.reload(); $tiles_container.find('.ss-tiles-scrollbar').css({ width: function() { return $(this).parent().width() - 12; } }); $tiles_container.css({ width: function() { return $(this).parent().width() + 6; }, }); } masonry_tiles_container.layout(); }, 100); $window.resize(_tiles_container_update); } // If is fullscreeen and has no gap, no horizontal if ( $tiles_container.closest('.ss-fullscreen-section').length > 0 && !has_gap && !is_horizontal ) { // Set height and width for Tiles and their Hover $tile_layout_1.add($tile_layout_2).add($tile_layout_4).css('height', function() { return $(this).width(); }).find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); $tile_layout_3.css('height', function() { return $(this).width() / 2; }).find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); var _set_fullscreen_positions = _.throttle(function() { $tile_layout_1.add($tile_layout_2).add($tile_layout_4).css('height', function() { return $(this).width(); }).find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); $tile_layout_3.css('height', function() { return $(this).width() / 2; }).find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); }, 100); $window.resize(_set_fullscreen_positions); } // If is fullscreeen, yes horizontal if ( $tiles_container.closest('.ss-fullscreen-section').length > 0 && is_horizontal ) { var _set_scrollbar_width = _.throttle(function() { $tiles_container.find('.ss-tiles-scrollbar').css({ width: function() { if ( viewport_width > 1140 ) { return 1140; } else { return $(this).parent().width() - 30; } }, marginLeft: function() { if ( viewport_width > 1140 ) { var margin = $(this).parent().width() - 1140; return margin / 2; } else { return 15; } } }); masonry_tiles_container.layout(); }, 100); $window.resize(_set_scrollbar_width); } // If is fullscreeen and has gap if ( $tiles_container.closest('.ss-fullscreen-section').length > 0 && has_gap && !is_horizontal ) { $tile_all.css('width', function() { return $(this).width() - 12; }); $tile_layout_1.css('height', function() { return $(this).width() - 12; }); $tile_layout_2.add($tile_layout_4).css('height', function() { return $(this).width() - 18; }); $tile_layout_3.css('height', function() { return ( $(this).width() / 2 ) - 18; }); // Set height for Hover $tile_all.find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); var _set_fullscreen_positions = _.throttle(function() { $tile_all.css('width', ''); $tile_all.css('width', function() { return $(this).width() - 12; }); $tile_layout_1.css('height', function() { return $(this).width() - 12; }); $tile_layout_2.add($tile_layout_4).css('height', function() { return $(this).width() - 18; }); $tile_layout_3.css('height', function() { return ( $(this).width() / 2 ) - 18; }); // Set height for Hover $tile_all.find('.ss-tile-content').css('height', function() { return $(this).closest('.ss-tile').height(); }); }, 100); $window.resize(_set_fullscreen_positions); } var masonry_tiles_container = ""; if ( $tiles_inner.length > 0 ) { if ( is_horizontal ) { masonry_tiles_container = new Isotope( $tiles_inner[0], { itemSelector: '.ss-tile', layoutMode: 'masonryHorizontal', masonryHorizontal: { rowHeight: '.ss-tile-grid-sizer' } }); $tiles_container.css('overflow','hidden'); var masonry_tiles_sly = new Sly( $tiles_container, { scrollBar : $tiles_container.find('.ss-tiles-scrollbar'), horizontal: 1, scrollBy: 0, dragHandle: 1, dynamicHandle: 1, itemNav: 0, clickBar: 1, speed: 600, mouseDragging: 1, touchDragging: 1, releaseSwing: 1, swingSpeed: 0.1, elasticBounds: 1, cycleBy: null, cycleInterval: 4000 }).init(); setTimeout( function() { masonry_tiles_container.layout(); masonry_tiles_sly.reload(); }, 1000); if ( $tiles_inner.width() > $tiles_container.width() + 12 ) { // +12 account margins $tiles_container.find('.ss-tiles-scrollbar').addClass('ss-tiles-scrollbar-show'); $tiles_container.find('.ss-tiles-scrollbar').css({ width: function() { return 1140; }, marginLeft: function() { var margin = $(this).parent().width() - 1140; return margin / 2; } }); } // Update Sly and Scrollbar positioning var _update_sly = _.throttle(function() { masonry_tiles_sly.reload(); }, 100); $window.resize(_update_sly); $tiles_inner.mousedown( function() { $(this).css("cursor","-webkit-grabbing"); $(this).css("cursor","-moz-grabbing"); $tiles_container.find('.ss-tiles-scrollbar').addClass('ss-tiles-scrollbar-active'); }).mouseup(function() { $(this).css("cursor","-webkit-grab"); $(this).css("cursor","-moz-grab"); $tiles_container.find('.ss-tiles-scrollbar').removeClass('ss-tiles-scrollbar-active'); }); } else { if ( viewport_width > 400 ) { masonry_tiles_container = new Isotope( $tiles_inner[0], { itemSelector: '.ss-tile', masonry: { columnWidth: '.ss-tile-grid-sizer' } }); } else { masonry_tiles_container = new Isotope( $tiles_inner[0], { itemSelector: '.ss-tile', layoutMode: 'vertical', vertical: { horizontalAlignment: 0.5, } }); } } } // Recalculate waypoints coordinates due to document height changes // Using 900ms Timeout considering height Tranistion in 0.9sec on Tiles Gallery setTimeout( function() { $.waypoints('refresh'); if ( _skrollr != null ) { _skrollr.refresh(); } // scrollToHashID(); }, 900); // Animate and show tiles if ( animation_on_mobile_switch == "off" && is_mobile ) { } else { var anim_index = 0, $anim_elements = $tile_all, anim_elements_size = $anim_elements.size(); var interval = setInterval( function() { $anim_elements.eq(anim_index).bring({ action: "show", animation: "random", speed: "0.6", delay: "0", offset: 1 }); if ( ++anim_index > anim_elements_size ) clearInterval(interval); }, 200); } // Enable Bring hover // $tile_all.filter(':not(.has-layout-2):not(.only-hover)').hover( function() { // $(this).find('.ss-tile-content').bring({ // action: "show", // animation: "scale-up", // speed: 0.6, // delay: "0", // }); // }, function() { // $(this).find('.ss-tile-content').bring({ // action: "hide", // animation: "scale-up", // speed: 0.6, // delay: "0", // }); // }); // Enable diraction aware hover // $tile_all.filter(':not(.has-layout-2):not(.only-hover)').each( function() { // $(this).find('.ss-tile-content').css({ // display: "none", // opacity: "1" // }); // $(this).hoverdir({ // speed : 200, // easing : 'ease', // hoverDelay : 0, // inverse : false, // hoverElem : '.ss-tile-content' // }); // }); // TweenLite.to( $tile_all.filter(':not(.has-layout-2):not(.only-hover)').find('.ss-tile-content'), 0, { css: { scaleX: 0.7, scaleY: 0.7 }, ease: Expo.easeOut, delay: 0 }); $tile_all.magnificPopup({ type: 'inline', delegate: 'a.item-format', gallery: { enabled: 1 }, removalDelay: 300, showCloseBtn: 1, closeBtnInside: 1, alignTop: 0, mainClass: 'mfp-fade', }); if ( typeof masonry_tiles_sly === 'undefined' ) { // Sly therefore Horizontal mode is disabled } else { // Hack : Enable Touch Draging on Sly since the native one doesn't work properly var hammertime = Hammer(masonry_tiles_sly.frame).on("dragleft", function(ev) { ev.gesture.preventDefault(); // Prevent the browser from scrolling }).on("dragright", function(ev) { ev.gesture.preventDefault(); // Prevent the browser from scrolling }); } }); }); /*---------------------------------------------------------------------------------*/ /* Home Video Background /*---------------------------------------------------------------------------------*/ if ($('.ss-videobg-container').length > 0) { $(".ss-videobg-container").height(viewport_height); $.waypoints('refresh'); $('.ss-videobg-container').each(function() { var ss_videobg_container = $(this); var ss_videobg_mp4 = ss_videobg_container.attr('data-source-mp4'); var ss_videobg_ogv = ss_videobg_container.attr('data-source-ogv'); var ss_videobg_webm = ss_videobg_container.attr('data-source-webm'); var ss_videobg_poster = ss_videobg_container.attr('data-source-poster'); ss_videobg_container.videoBG({ autoplay: true, zIndex: 0, mp4: ss_videobg_mp4, ogv: ss_videobg_ogv, webm: ss_videobg_webm, poster: 'images/banner-transparent.png', opacity: 1, fullscreen: true, }); ss_videobg_container.find('.videoBG').css({ 'background-image': 'url(' + ss_videobg_poster + ')', 'background-size': 'cover' }); var iOS_video_check = /(iPad|iPhone|iPod)/g.test(navigator.userAgent); if (iOS_video_check) { ss_videobg_container.find('video').css({ 'z-index': '-1' }); ss_videobg_container.find('videoBG').css({ 'text-align': 'center' }); ss_videobg_container.find('video').width(ss_videobg_container.width()); ss_videobg_container.find('video').height(ss_videobg_container.height()); ss_videobg_container.find('video').removeAttr('autoplay'); ss_videobg_container.find('video').attr('controls', 'true'); var add_poster_iOS = function () { ss_videobg_container.find('.videoBG').append('<div class="videoBG-iOS"> </div>'); $('.videoBG-iOS').css({ 'background-image': 'url(' + ss_videobg_poster + ')', 'background-size': 'cover', 'height': '100%', 'width': '100%' }); ss_videobg_container.find('.videoBG').append('<a class="videoBG-iOS-play" href="#" style="position: absolute; top: 50%; left:50%; font-size:80px; margin-left: -40px; margin-top: 0"><span class="moonicon-play2"></span></a>'); } add_poster_iOS(); $('.ss-home-slider-container').click(function () { ss_videobg_container.find('video').get(0).webkitEnterFullScreen(); }); } }); } /*---------------------------------------------------------------------------------*/ /* Accordion /*---------------------------------------------------------------------------------*/ var accordion = $('.accordion-container'); $('.accordion-container').tabs( ".accordion-container .accordion-item div.accordion-item-desc", { tabs: '.accordion-item div.accordion-item-header', effect: 'slide', } ); $('.accordion-item div.accordion-item-header.current').find('.ss-accordion-arrow').removeClass('moonicon-arrow-down7').addClass('moonicon-arrow-up9'); $('.accordion-item div.accordion-item-header').click(function () { $('.ss-accordion-arrow').each(function () { if ($(this).parent().parent().is('.current')) { $(this).removeClass('moonicon-arrow-down7'); $(this).addClass('moonicon-arrow-up9'); } else { $(this).removeClass('moonicon-arrow-up9'); $(this).addClass('moonicon-arrow-down7'); } }); }); /*---------------------------------------------------------------------------------*/ /* Toggle /*---------------------------------------------------------------------------------*/ var toggle_header = $('.toggle-container .toggle-item .toggle-item-header'); $(toggle_header).click(function () { if ($(this).hasClass('ui-toggle-header-active')) { $(this).removeClass('ui-toggle-header-active'); $(this).find('.ss-toggle-arrow').removeClass('moonicon-arrow-up9'); $(this).find('.ss-toggle-arrow').addClass('moonicon-arrow-down7'); } else { $(this).addClass('ui-toggle-header-active'); $(this).find('.ss-toggle-arrow').removeClass('moonicon-arrow-down7'); $(this).find('.ss-toggle-arrow').addClass('moonicon-arrow-up9'); } $(this).next().slideToggle(); return false; }).next().hide(); /*---------------------------------------------------------------------------------*/ /* Tabs /*---------------------------------------------------------------------------------*/ $(".tab-container .tab-pane").each( function() { var $tabs = $(this).siblings('.tabs'); $tabs.append('<li class="tab"><a href="#" class="tab-anchor">' + $(this).attr('data-title') + '</a></li>'); }); $("div.tab-container").tabs(".tab-container div.tab-pane"); /*------------------------------------------------------------------*/ /* Gap /*------------------------------------------------------------------*/ $('.gap').css('height', function () { return $(this).attr('data-height-size'); }); /*------------------------------------------------------------------ Alerts ------------------------------------------------------------------*/ $('.alert-message').click(function () { TweenLite.to($(this), 0.6, { css: { 'opacity': '0', scaleX: 1.1, scaleY: 1.1, 'display': 'none' }, delay: 0 }); }); /*---------------------------------------------------------------------------------*/ /* Blog Teaser /*---------------------------------------------------------------------------------*/ var $blogTeaser = $('.blog-teaser'); function blogTeaserRelayout() { $blogTeaser.css({ height: function() { return $(this).find('img').height(); } }); } $blogTeaser.imagesLoaded().always(function (instance) { blogTeaserRelayout(); }); var _blogTeaserRelayout = _.throttle(function() { blogTeaserRelayout(); }, 100); $window.resize(_blogTeaserRelayout); /*------------------------------------------------------------------*/ /* IconBox Slider /*------------------------------------------------------------------*/ $(".ss-iconbox-slider").each(function () { var iconBoxSlider = $(this); iconBoxSlider.owlCarousel({ items: 3, //3 items above 1200px browser width itemsDesktop: [1200, 3], //3 items between 1200px and 940px itemsDesktopSmall: [940, 2], //2 items betweem 939px and 720px itemsTablet: [719, 1], //1 items between 719 and 0 itemsMobile: false, // handeled by media query // autoHeight: true, pagination: false, // Responsive responsive: true, responsiveRefreshRate: 200, responsiveBaseWidth: iconBoxSlider }); // Custom Navigation Events iconBoxSlider.next().find(".ss-next-iconbox").click(function () { iconBoxSlider.trigger('owl.next'); }) iconBoxSlider.next().find(".ss-prev-iconbox").click(function () { iconBoxSlider.trigger('owl.prev'); }) }); /*------------------------------------------------------------------*/ /* Clients Slider /*------------------------------------------------------------------*/ $(".slide").each(function () { var clientSlider = $(this); clientSlider.owlCarousel({ itemsCustom: [ [0, 1], [450, 2], [720, 3], [940, 4], [1140, 5], ], // autoHeight: true, pagination: false, // Responsive responsive: true, responsiveRefreshRate: 200, responsiveBaseWidth: clientSlider }); // Custom Navigation Events clientSlider.next().find(".l").click(function () { clientSlider.trigger('owl.next'); }) clientSlider.next().find(".r").click(function () { clientSlider.trigger('owl.prev'); }) }); /*------------------------------------------------------------------*/ /* Set up portfolio meta separator /*------------------------------------------------------------------*/ $('.portfolio-single-1 .meta-separator-left-line, .portfolio-single-1 .meta-separator-right-line').css({ width: function () { var parent_width = $(this).parent().width(), heading_width = $(this).siblings('.icon').outerWidth(); return (parent_width - heading_width) / 2; } }); /*------------------------------------------------------------------*/ /* ss section seperator /*------------------------------------------------------------------*/ $('.ss-sec-separator-left-line, .ss-sec-separator-right-line').css({ width: function () { var parent_width = $(this).parent().width(), icon_width = $(this).siblings('.icon').outerWidth(); return (parent_width - icon_width) / 2; } }); /*------------------------------------------------------------------ Skills ------------------------------------------------------------------*/ $('.ss-skill-bar').waypoint( function(direction) { $(this).css({ width: function() { return $(this).closest('.ss-skill').attr('data-size'); }, opacity: 1, }); }, { offset: "90%", triggerOnce: true }); /*------------------------------------------------------------------ Testimonials ------------------------------------------------------------------*/ var testimonial_sliders = [], $testimonial_slider_frame = $(".ss-testimonial-frame"), $testimonial_item = $('.ss-testimonial-item'); $testimonial_slider_frame.each( function(index) { testimonial_sliders[index] = new Sly( $(this), { horizontal: 1, itemNav: 'forceCentered', smart: 1, scrollBy: 0, dragHandle: 1, dynamicHandle: 1, clickBar: 1, speed: 600, mouseDragging: 1, touchDragging: 1, releaseSwing: 1, swingSpeed: 0.1, elasticBounds: 1, cycleBy: 'pages', cycleInterval: 5000, pauseOnHover: 1, startPaused: 0, activateMiddle: 1, pagesBar: '.ss-testimonial-bullets', activatePageOn: 'click', pageBuilder: function (index) { return '<li></li>'; }, next: $('.ss-next-testimonial'), prev: $('.ss-prev-testimonial'), }).init(); $testimonial_item.css({ width: function() { return $(this).closest('.ss-testimonial-frame').width() } }); $testimonial_slider_frame.each( function(index) { testimonial_sliders[index].reload(); }); }); var testimonial_sliders_reload = _.throttle( function() { $testimonial_item.css({ width: function() { return $(this).closest('.ss-testimonial-frame').width() } }); $testimonial_slider_frame.each( function(index) { testimonial_sliders[index].reload(); }); }, 100); $window.resize(testimonial_sliders_reload); $('.ss-testimonial-frame').mousedown( function() { $(this).css("cursor","-webkit-grabbing"); $(this).css("cursor","-moz-grabbing"); }).mouseup(function() { $(this).css("cursor","-webkit-grab"); $(this).css("cursor","-moz-grab"); }); /*------------------------------------------------------------------*/ /* Pie-Chart Initializing /*------------------------------------------------------------------*/ $('.pie-chart').waypoint( function(direction) { var $span = $(this).children('span'), percent = $(this).attr('data-percent'), barColor = $(this).attr('data-bar-color'), trackColor = $(this).attr('data-track-color'); $(this).easyPieChart({ barColor: barColor, trackColor: trackColor, scaleColor: "#ffffff", scaleLength: 0, lineCap: "round", lineWidth: 10, size: 150, rotate: 0, animate: 2000, }); $({countNum: 0}).animate({countNum: percent}, { duration: 2000, easing: 'linear', step: function() { $span.text( Math.floor(this.countNum) + "%" ); } }); }, { offset: "90%", triggerOnce: true }); /*------------------------------------------------------------------*/ /* Counter Initializing /*------------------------------------------------------------------*/ $('.ss-count').waypoint( function(direction) { var $this = $(this), speed = $this.attr('data-speed'), delay = $(this).attr('data-delay'); $({ counter: 0 }).animate({ counter: $this.text() }, { duration: speed * 1000, easing: 'swing', step: function () { $this.text(Math.ceil(this.counter)); } }); }, { offset: "90%", triggerOnce: true }); /*------------------------------------------------------------------*/ /* Demo Selector /*------------------------------------------------------------------*/ $('.ss-demobox-image').hover( function() { var img_height = $(this).find('img').height(), container_height = $(this).height(), result = img_height - container_height; TweenLite.to( $(this).find('img'), 5, { css: { y: result*-1 }, ease: Expo.ease, delay: 0 }); }, function() { TweenLite.to( $(this).find('img'), 2, { css: { y: 0 }, ease: Expo.ease, delay: 0 }); }); });