Is there a way to automatically display the first highlighted fragment in reveal.js?

Is it possible to have the first fragment automatically visible in reveal.js?

I am utilizing the text colour highlight feature in reveal.js to make the most recent fragment appear with a slightly brighter color, drawing attention to that specific section. The text returns to its normal color once the next fragment is revealed.

When I set the first line of text as a non-fragment, it shows up immediately but remains in the regular text color. If I designate it as a fragment, I need to advance one slide for it to be visible (which is an acceptable solution, though not my preference). However, the highlight color does work when it is configured as a fragment.

Here is an example of the markup used:

    <section>
      <h2>Highlight First Line Test</h2>
      <p class="fragment highlight-current">Want this line visible <i>and</i> color highlighted on slide entry</p>
      <p class="fragment highlight-current">Appears 2nd with color highlight</p>
    </section>

Below is the CSS override applied to integrate the custom highlighting function into reveal.js:

    .reveal .slides section .fragment.highlight-current.current-fragment {
      color: #f00; 
    }

(I also explored autoslide but could not achieve the desired outcome).

Answer №1

Utilize a customized version of the fade-out style to create a unique effect where the first line remains visible and changes color when it is no longer the current focus.

<style>
    .reveal .slides section .fragment.fade-down {
        opacity: 1;
        visibility: visible;
    }
    .reveal .slides section .fragment.fade-down.visible,
    .reveal .slides section .fragment.visible:not(.current-fragment) {
        color: grey;
    }
    .reveal .slides section .fragment.fade-down,
    .reveal .slides section .fragment.current-fragment {
        color: #1b91ff;
    }
</style>

<section>
  <h2 class="fragment fade-down" data-fragment-index="0">Highlight First Line Test</h2>
  <p class="fragment" data-fragment-index="0">Ensure this line is visible <i>and</i> with a highlighted color upon slide entry</p>
  <p class="fragment">Color highlight appears on second line</p>
</section>

Remember to include data-fragment-index="0" for both the first and second fragments so that the second fragment appears when the first one fades out.

Answer №2

Although this question has been around for a while, I believe I have found an improved solution that is more versatile and relies solely on CSS.

/* To reverse the default hiding effect of RevealJS on the first fragment */
.reveal .slides section .fragment:first-child {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* Applying styles only to the first child when any subsequent child has the current-fragment class */
.reveal .slides section .fragment:first-child:has(~ .current-fragment) {
  opacity: 0.5;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected Alert Triggered by XML Parsing Error

<script> async function loadData() { var data = await fetch("Product.xml"); var parsedData = await data.text(); var parser = new DOMParser(); var Product_document = parser.parseFromString(parsedData,"text/xml"); ...

Creating textNode for radio buttons using JavaScript

Need some help creating a radio button with JavaScript. While it's easy to do in HTML, like this: <input type="radio" name="sType" value="m">MALE, I've managed to create the input part with JS using <input type="radio" name="sType" value ...

What is the best way to reset the animationTransform using JavaScript?

Incorporating SMIL animations in Firefox is presenting a challenge for me. The animation starts automatically upon page load, but I need to find a way to trigger it dynamically through JavaScript. I suspect that the issue may lie with the begin attribute. ...

Content overflowing into a different divison

I am facing a problem with an absolutely positioned DIV. It is placed beside an image, and below it, there is another DIV. Everything looks good in fullscreen mode, but when I resize my browser window, the text spills into the lower DIV. What I really want ...

Unable to transfer information from the Parent component to the Child component

Can you help me solve this strange issue? I am experiencing a problem where I am passing data from a parent component to a child component using a service method that returns data as Observable<DemoModel>. The issue is that when the child component ...

Exploring the latest MUI Styles in Scoping Version 5

We are currently in the process of transitioning our legacy application to React and MUI. To ensure that there is no styling conflict between the old and new parts of the application, we have implemented scoped styles by combining an id selector with a des ...

Limit the maximum column gap on the grid and stop it from expanding further

I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...

The background image feature is specifically optimized for Chrome browsers

After spending time with HTML and CSS coding, I successfully managed to implement a background image that covers the entire page with just CSS. Even when zooming in or out, the image remains intact on the screen. However, this solution seems to only be com ...

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Currently, I have implemented a bootstrap dropdown that loads a list of countries by making an external API call. My goal is to display three different states of behavior (progress, success, error) in the dropdown using ng-show/hide. However, I am unsure h ...

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

JavaScript's equivalent function to jQuery

$.ajax({ url: 'http://' + window.location.host + '/', success: function(data){ $(data).find("a:contains(.jpg)").each(function(){ // will loop through var images = $(this).attr("href"); $('<p></p>').ht ...

Column Visibility: What is the best way to organize columns?

Here is the code I currently have that is working: http://jsfiddle.net/tarabyte/s8Qds/3/ Javascript: $(function() { (function generateStyleSheet(len){ var styles = [], i = 0; for(; i < len; i++) { styles.push('.hide-' + ...

Jasmine test fails when trying to execute Ajax code

I am facing challenges when trying to execute ajax requests with the Jasmine BDD framework. My goal is to test actual ajax calls instead of using fake responses. Despite reading the documentation and attempting various solutions, it seems that the ajax co ...

Determine the size of a file in either megabytes or kiloby

I need to determine the size of a file in either megabytes if the value is greater than 1024 or kilobytes if less than 1024. $(document).ready(function() { $('input[type="file"]').change(function(event) { var _size = this.files[0].si ...

Position the caret beneath the anchor text

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none"> <span class="criteria">any</span> <span class="caret" style="margin-top:6px;"></span> </a> The code snippet above ...

Removing an item from a JSON list

Is there a way to remove a specific element (e.g. by using its id) from a JSON array? A delete button can be used to achieve this task, passing the id as a parameter. For instance, how would one go about deleting an item with an id of 2 : Note: The id n ...

Creating personalized URLs for RESTful API with Node.js and MongoDB

Within my nodejs api, I have a mongoose schema set up as follows: var profileschema = new mongoose.Schema({ name: { type: String }, surname: { type: String }, id: { type: String } }); Additionally, there is a rout ...

Leveraging CSS exclusively within FXML

As a web developer focusing on Java and currently diving into FXML, I am intrigued by the versatility in terms of positioning and styling that panes offer. However, having a strong background in CSS, I can't help but wonder if exclusively using CSS in ...

How come eslint is unable to detect all files within a directory, yet it can detect a single file?

Here is the organization of my files and directories. https://i.stack.imgur.com/YWNw3.png I am looking to set up some eslint rules for my code detection. In my .eslintrc file, I have included these configuration settings. { "extends": "airbnb", "ru ...

Develop an interactive website using JavaScript with a unique URL

My latest project involves creating custom elements using JavaScript and adding them to my HTML page. When the user interacts with these elements, I want them to be redirected to a new page that is dynamically generated through JavaScript. I have a clear ...