POC voeux

In this example below you will see how to do a POC voeux with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>POC voeux</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	<p class="p">
Tous les acteur assujettis à la TVA qui enregistrent les règlements de leurs clients (non assujettis) au moyen des meilleurs logiciels de comptabilité ou de gestion ou d’un système de caisse, devront utiliser un système ou un logiciel sécurisé selon les vœux de cette nouvelle réglementation à l’exception des auto-entrepreneurs, des assujettis relevant de la franchise en base, de ceux placés sous le régime du remboursement forfaitaire prévu aux articles 298 quater et 298 quinquies ou de ceux exonérés de TVA. 
    Ils devront ainsi présenter en cas de contrôle inopiné ou d’une vérification de comptabilité, une attestation ou un certificat de conformité à la règlementation émis par son éditeur. 
    Cette règle rentre en vigueur à partir du 1er janvier 2018.
	</p>

	<br>

	<button class="btn btn-primary js-boo">on vous aide à y voir plus clair</button>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/poc-voeux-pavPgP */
.container {
  position: relative;
  max-width: 800px;
  margin: auto;
}

.p {
  font-size: 0;
}
.p span {
  font-size: 1rem;
}


/*Downloaded from https://www.codeseek.co/tibomahe/poc-voeux-pavPgP */
function splitTextInWords(element) {
  
  var $element = $(element),
      wordsLine = [],
      paragraph = $element.html(),
      splitText = '',
      wordArray = paragraph.replace(/\n/g, " \n<br> ").split(" "),
      wordArrayLen = wordArray.length;
    
  //Split paragraph in words
  $.each(wordArray, function(i, val) {
      if (val.match(/meilleurs/) || val.match(/vœux/) || val.match(/2018/)) {
        wordArray[i] = '<span class="word js-nocasper">' + val + ' </span>';
      }
      else if (!val.match(/\n/) && val!='') {
        wordArray[i] = '<span class="word js-casper">' + val + ' </span>';
      } 
  });
  var newText = wordArray.join(" ");
  
  $element.html(newText);
  
}

//Init function
splitTextInWords('.p');

var $br = $('.p br'),
    $casper = $('.js-casper'),
    $nocasper = $('.js-nocasper');

var timelineToReveal = new TimelineLite();
var timelineToHide = new TimelineLite();

var bool = true;

function reveal() {
  timelineToReveal
    .to($casper, 1.5, { opacity: 0.4 })
    .to($nocasper, 2, { color: 'green' }, '-=1.5')
    .to($casper, 2, { fontSize: 0 })
    .to($br, 0.5, { display: 'none' }, '-=2');
}

function hide() {
  timelineToHide
    .to($casper, 1.5, { opacity: 1, fontSize: '1rem' })
    .to($br, 0.5, { display: 'block' })
    .to($nocasper, 2, { color: 'black' }, '-=1.5');
}

$('.js-boo').on('click', function() {
  
  if (bool) {
    reveal();
    bool = false;
  }
  else {
    hide();
    bool = true;
  }
  
});

Comments