Reading Interaction

Developer
EY-Intuitive
Size
2,598 Kb
Views
16,192
  1. Reading Interaction Previews
  2. Reading Interaction HTML Codes
  3. Reading Interaction CSS Codes
  4. Reading Interaction JS Codes

How do I make an reading interaction?

Testing out some focus style interactions while reading an article.. What is a reading interaction? How do you make a reading interaction? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.

Reading Interaction Previews
IQ Test

Reading Interaction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reading Interaction</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ article { width: 80%; margin: 0 auto;
}
p { transition: all 0.2s ease; color: rgba(0, 0, 0, 0.8); margin-bottom: 20px; font-size: 18px; line-height: 24px; -webkit-filter: blur(0);
}
p.inactive { -webkit-filter: blur(1px); color: rgba(0, 0, 0, 0.4);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium corporis dolor molestiae saepe optio deleniti nulla quaerat dolorum dolorem facere, rerum explicabo? Nostrum, aspernatur. Ratione, sequi voluptate quaerat at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odio sunt nisi aperiam, minus optio. Eligendi at consequatur rem consectetur, excepturi reprehenderit commodi, ea repudiandae harum iste nulla voluptas eveniet!</p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Reading Interaction - Script Codes CSS Codes

article { width: 80%; margin: 0 auto;
}
p { transition: all 0.2s ease; color: rgba(0, 0, 0, 0.8); margin-bottom: 20px; font-size: 18px; line-height: 24px; -webkit-filter: blur(0);
}
p.inactive { -webkit-filter: blur(1px); color: rgba(0, 0, 0, 0.4);
}

Reading Interaction - Script Codes JS Codes

$('p').hover(function(e){ $('p').addClass('inactive'); $(this).removeClass('inactive');
});
Reading Interaction - Script Codes
Reading Interaction - Script Codes
Home Page Home
Developer EY-Intuitive
Username ey_intuitive
Uploaded January 17, 2023
Rating 4
Size 2,598 Kb
Views 16,192
Do you need developer help for Reading Interaction?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

EY-Intuitive (ey_intuitive) Script Codes
Name
Facebook Paper Inspired Menu
Underscore templates - Example 3
Draggable Timeline Demo
Dynamic Height Animated Menu
Handlebars Templates - Example 2
Step Indicator
Button Text Color Accessibility Mixin Test
Awesome Search Button with Input Animation
A Pen by EY-Intuitive
Gradient Hover Transition on Buttons
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!