This article is continuation of previous artclejqImgBlurEffects plugin supports svg shapes - circle, ellipse, rectangle, path and polygon for step by step introduction feature. You can define delay time to hide displayed shape. Observe below hml markup and this is sample html markup
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Observe below syntax. sintros represents step by step introduction module. intromode has to be true for this mode. Follow this article for detailed syntax of srectangles,scircles, spaths, spolygons, stexts
var myOptns = {
     ......
     sintros:{
       intromode:<must be true for step by step introduction. false will not allow introduction mode>,
       delay:<delay time from one step to another step>,
       transitionDelay:<animation time for transition>,
       srectangles:<array of rectangle objects>,
       scircles:<array of circle objects>,
       sellipses:<array of ellipse objects>,
       spaths:<array of path objects>,
       spolygons:<array of polygon objects>,
       stexts:<array of text objects>
     }
     ....
};

$(".myImg").jqImgBlur(myOptns);

Example - Paypal mafia

Observe above given image. It consists of earlier employees of PayPal. Now they are very successful in Silicon Valley. I just wrote below code for their beautiful introduction. If you want  write description, make sure that you are writing same number of text objects and shape objects ( In this below code, number of srectangles are same as number of stexts). 
var myOptns = {
     stdDeviation:7,
     brightness : 0.4,
     sintros:{
       intromode:true,
       delay:250,
       transitionDelay:500,
       srectangles:[{
        x:0,
        y:0,
        width:158,
        height:'100%'
       },
       {
        x:158,
        y:0,
        width:144,
        height:'100%'
       },
       {
        x:301,
        y:0,
        width:173,
        height:'75%'
       },
       {
         x:473,
         y:0,
         width:168,
         height:'100%'
       },
       {
         x:641,
         y:0,
         width:158,
         height:'100%'
        }],
       stexts:[{
         text:'Jeremy Stoppelman, CEO of Yelp',
         style:'left:167px;top:147px;'
       },{
         text:'Peter Thiel, co-founded of Palantir',
         style:'left:317px;top:117px;'
       },{
         text:'Elon Musk, CEO and CTO of SpaceX, CEO and product architect of Tesla Motors and chairman of SolarCity',
         style:'left:11px;top:240px;'
       },{
         text:'Reid Hoffman, co-founder of LinkedIn',
         style:'left:11px;top:147px;'
        },{
         text:'Max Levchin, Corporate director at Yahoo!',
         style:'left:117px;top:147px;'
        }
        ]
     }
};

$(".myImg").jqImgBlur(myOptns);

1 comment:

  1. Hello! Great work! But can i ask about: how make carousel by images under svg blur filter?
    it is possible?
    Thanks in advance

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts