focusText

WORK IN PROGRESS: designing a way to bring paragraphs of text into focus based on it's Y Axis position. Will help dyslexic and others hard of reading.

by Pete Fecteau

HTML

<script src="http://buttonpresser.com/animateColor.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>focusText.js</title>
</head>

<body>
    <h2>Click On a Paragraph to Focus It</h2>
<div class="focus">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices luctus sapien a bibendum. Vestibulum at augue turpis, vitae imperdiet lacus. Mauris vestibulum, augue non lobortis consectetur, nunc odio auctor nibh, at ullamcorper elit diam id mauris. Nam luctus, est vel egestas vehicula, nulla nunc auctor arcu, sed placerat libero libero et lorem. Nam venenatis eros eget tellus convallis et sodales mauris fermentum. Morbi eu ante a diam iaculis elementum. Fusce vestibulum odio eget ligula sollicitudin fringilla. Donec in nisl nunc. Aliquam bibendum, elit ut pharetra varius, justo erat lacinia dui, eget lacinia tortor lorem a risus. Sed vitae aliquet arcu. Fusce sed ligula risus. Aliquam condimentum nisl ut arcu venenatis nec pellentesque nulla porta. Donec a magna ac erat malesuada consequat.</p>
    <p>Fusce facilisis felis eu ligula tempus cursus. Aenean pulvinar ligula eu turpis scelerisque euismod eu in metus. Donec fermentum elit et risus congue auctor. Vivamus vulputate condimentum dui, quis fermentum lectus aliquam sit amet. Duis nisl lacus, dapibus ac ultricies sit amet, sollicitudin pharetra mauris. Pellentesque eu tellus tortor, sit amet interdum dui. Integer lacinia est eget risus tristique id placerat eros tempus. Pellentesque varius condimentum diam, eu euismod sem congue ullamcorper. Proin non massa at lectus tincidunt pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis ultrices mi eu pharetra. Sed eu odio purus, vulputate hendrerit sem. Fusce tempus consectetur risus, eu dapibus augue feugiat...

CSS

body {
    padding:20px;
    font-family:Helvetica, arial, san-serif;
}
h2 {
    font-size:20px;
    font-weight:bold;
    margin: 0 0 20px 0;
    color:#666;
}
.focus {}
.focus p {
    margin:0 0 20px 0;
    line-height:150%;
    color: rgba(102, 102, 102, 0.0);
    cursor:pointer;
    -webkit-transition:text-shadow 0.2s linear;
    -moz-transition:text-shadow 0.2s linear;
    -o-transition:text-shadow 0.2s linear;
    -ms-transition:text-shadow 0.2s linear;
    transition:text-shadow 0.2s linear;
    text-shadow:0 0 10px #666; 
}
.focus p.clicked {
    text-shadow:0 0 0 #666; 
}

JavaScript

$('.focus p').click(function() {
    $(this).addClass('clicked');
    $(this).siblings('p').removeClass('clicked');
    $(this).animate({
        color: 'rgba(102, 102, 102, 1.0)'
      }, 200, function() {});
    $(this).siblings('p').animate({
        color: 'rgba(102, 102, 102, 0.0)'
      }, 200, function() {});
});