Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.
Description: Step boxes with combination of morph and regular icons. This examples uses additional JavaScript code for supplementary animation.
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options
are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- Step box 02 --> <div class="container"> <div class="row"> <div class="step-box-02 step1 col-sm-4 col-xs-12"> <h4 class="text-center text-uppercase">Research & Planning</h4> <div class="line"> <div class="morph-icon"> <div class="livicon-evo" data-options=" name: morph-square2-triangle2.svg; style: solid; solidColor: #0097A7; size: 100%; strokeWidth: 0; colorsOnHover: darker; morphState: end; eventOn: .step-box-02.step1; duration: 0.2 "></div> </div> <div class="straight-icon"> <div class="livicon-evo" data-options=" name: lab.svg; style: solid; size: 100%; solidColor: #fff; solidColorBg: #0097A7; eventOn: .step-box-02.step1; delay: 0.25 "></div> </div> </div> <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p> </div> <div class="step-box-02 step2 col-sm-4 col-xs-12"> <h4 class="text-center text-uppercase">Design & Develop</h4> <div class="line"> <div class="morph-icon"> <div class="livicon-evo" data-options=" name: morph-square2-triangle2.svg; style: solid; solidColor: #0097A7; size: 100%; strokeWidth: 0; colorsOnHover: darker; morphState: end; eventOn: .step-box-02.step2; duration: 0.2 "></div> </div> <div class="straight-icon"> <div class="livicon-evo" data-options=" name: pencil.svg; style: solid; size: 100%; solidColor: #fff; solidColorBg: #0097A7; eventOn: .step-box-02.step2; delay: 0.25 "></div> </div> </div> <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p> </div> <div class="step-box-02 step3 col-sm-4 col-xs-12"> <h4 class="text-center text-uppercase">Test & Deliver</h4> <div class="line"> <div class="morph-icon"> <div class="livicon-evo" data-options=" name: morph-square2-triangle2.svg; style: solid; solidColor: #0097A7; size: 100%; strokeWidth: 0; colorsOnHover: darker; morphState: end; eventOn: .step-box-02.step3; duration: 0.2 "></div> </div> <div class="straight-icon"> <div class="livicon-evo" data-options=" name: rocket.svg; style: solid; size: 100%; rotate: 45; solidColor: #fff; solidColorBg: #0097A7; eventOn: .step-box-02.step3; delay: 0.25 "></div> </div> </div> <p class="text-center">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p> </div> </div> </div>
/************ Step box 02 ************/ .step-box-02 { padding: 0!important; } .step-box-02 h4 { color: #263238; font-size: 16px; } .step-box-02 p { padding: 0 15px 0!important; color: #78909C; } .step-box-02.step1:first-child .line { background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(40%, #B2DFDB)); background: -webkit-linear-gradient(left, transparent 0%, #B2DFDB 40%); background: linear-gradient(to right, transparent 0%, #B2DFDB 40%); } .step-box-02.step3:last-child .line { background: -webkit-gradient(linear, left top, right top, color-stop(60%,#B2DFDB), color-stop(100%,transparent)); background: -webkit-linear-gradient(left, #B2DFDB 60%, transparent 100%); background: linear-gradient(to right, #B2DFDB 60%,transparent 100%); } .step-box-02 .line { position: relative; height: 1px; width: 100%; margin-left: -10px; background: #B2DFDB; margin: 55px 0; } .step-box-02 .morph-icon { width: 30px; height: 30px; position: absolute; top: -15px; left: 50%; margin-left: -15px; } .step-box-02 .straight-icon { width: 0px; height: 0px; position: absolute; top: 0px; left: 50%; margin-left: 0px; } @media (max-width: 767px) { .step-box-02 { margin-top: 60px; } }
//Step Box 02 additional animations $(document).ready(function () { $('.step-box-02').hover( function() { TweenLite.to($(this).find(".morph-icon"), 0.15, {width:'90px', height:'90px', top: '-45px', marginLeft: '-45px', ease: Power0.easeNone}); TweenLite.to($(this).find(".straight-icon"), 0.15, {width:'30px', height:'30px', top: '-15px', marginLeft: '-15px', ease: Power0.easeNone}); }, function() { TweenLite.to($(this).find(".morph-icon"), 0.15, {width:'30px', height:'30px', top: '-15px', marginLeft: '-15px', ease: Power0.easeNone}); TweenLite.to($(this).find(".straight-icon"), 0.15, {width:'0px', height:'0px', top: '0px', marginLeft: '0px', ease: Power0.easeNone}); } ); });