A Pen by LukyVJ.

A-Pen-by-LukyVJ.markdown

A Pen by LukyVJ

A Pen by LukyVJ on CodePen.

License.

index.html

<link rel="stylesheet" type="text/css" href="http://interwebstars.github.io/EASUI/versions/1/1.4/easui-1.4.early.css">

<h1 class="title title--black center">Stripex.js</h1>
<h3>Create striped texts easily</h3>

<div class="bit-1">
  <div class="bit-3">
      <p>First, Download the plugin</p>
    <a href="#" id="stripex" class="btn btn--blue btn--border">Stripex.js</a>
    <textarea name="here" id="here" cols="26" rows="3"></textarea>
  </div>
  <div class="bit-3">
    <p>Add the <code>#slice</code> class to the desired <pre><code>div</code></pre></p>
  </div>
  <div class="bit-3">
    <p>Import the pugin at the bottom of your website</p>
    <p><pre><code>&lt;script src="path/to/stripex.js"&gt;&lt;/script&gt</code></pre></p>
  </div>
  
</div>
<h3>Demo</h3>
<div id="slice">
  <span>Hello World</span>
</div>

script.js

$(document).ready(function(){
 var plugin = '$(document).ready(function(){var e=$("#slice"),t=$("#slice span"),n=t.text();e.empty().append("<span>"+n+"</span>","<span>"+n+"</span>","<span>"+n+"</span>","<span>"+n+"</span>","<span>"+n+"</span>")})',
     app = $('#stripex'),
     res = $('.bit-3 textarea');
  
  app.on('click',function(){
    res.empty().text(plugin)
  });
  
  var slice = $('#slice'),
      text = $('#slice span'),
      valText = text.text(); 
  slice.empty().append(
  '<span>'+ valText +'</span>',
   '<span>'+ valText +'</span>',
   '<span>'+ valText +'</span>',
   '<span>'+ valText +'</span>',
   '<span>'+ valText +'</span>'
  ); 
  
 
  
});
  

STRIPEX...-stripes-text.markdown

STRIPEX... stripes/text

A Pen by LukyVJ on CodePen.

License.

style.scss

@import "compass";
//DO NOT CHANGE : A = True | B = False
$A:true;
$B:false;

$move : $B; // true : Irregular letters
$colored : $A;// true : Colored Stripes
$bw : $B;// true : Monochrome Stripes
$border:$A; // true : Thin lines behind 



$c-0:#ecf0f1; 
$c-1:#FF4351;
$c-2:#1B9AF7 ;
$c-3:#49E845 ;
$c-4:#FFE93B ;
$c-5:#FD6631 ;

//anti
$c--0:#000;
$c---0:darken($c-0,15%);
$c----0:#ecf0f1;
$c--1:darken($c----0,5%);
$c--2:darken($c----0,10%);
$c--3:darken($c----0,15%);
$color:$c--0;

html,body{
  width:100%; 
  height:100%;
  margin:0;
  padding:0;
}
body{
background:$c-0;}
.title,h3{text-align:center;}
h3{
color:$c---0;

}
.bit-1{
  margin:2em auto;
  float:left;
  .bit-3{
  padding:1em;
   height:13em;
    p,pre,code{line-height:24px}
    text-align:justify;
    
    &:nth-child(1){background:$c--1}
     &:nth-child(2){background:$c--2}
     &:nth-child(3){background:$c--3}
  }
}

#slice{
  width:100%; 
  height:10em;
  margin:-11em auto; 
  span{
    font-size:5em;
    font-weight:bold;
    font-family:Myriad Pro,Helvetica, sans-serif;
    text-align:center;
    position:absolute;
    left:0;
    right:0;
    display:block;
    margin-top:3em;
    line-height:1;
    color:red;
    overflow:hidden;
   
    &:nth-child(1){
      z-index:0;
      height:.75em;
      
    }
    &:nth-child(2){
      z-index:2;
      height:.60em;
    }
    &:nth-child(3){
      z-index:3;
            height:.45em;

    }
    &:nth-child(4){
      z-index:4;
            height:.3em;
      
    }
    &:nth-child(5){
      z-index:5;
      height:.15em;
    }
  }
}



@if($move==true){
  #slice{
    span{
      &:nth-child(even){margin-left: .02em;} 
      &:nth-child(odd){margin-right:.02em;}  
    }
  }
}

@if($colored==true){
  #slice{
    span{
      &:nth-child(1){color:$c-1} 
      &:nth-child(2){color:$c-2}  
      &:nth-child(3){color:$c-3} 
      &:nth-child(4){color:$c-4}  
      &:nth-child(5){color:$c-5} 
    }
  }
}
@if($bw==true){
  #slice{
    span{
      &:nth-child(1){color:$color} 
      &:nth-child(2){color:$c-0}  
      &:nth-child(3){color:$color} 
      &:nth-child(4){color:$c-0}  
      &:nth-child(5){color:$color}   
    } 
  }
}
@if($border==true){
  #slice{
    span{
    border-bottom:1px solid rgba(0,0,0,.05);
    @include box-shadow(inset 0 -.02em 0 0 rgba(#fff,.6));
    }
  }
}

@media all and(max-width:50em){
  #slice{
    margin:-12em auto 10em;  
    height:15em;
  }
}