ScrollReveal.js won't function as intended

https://i.stack.imgur.com/SOQEk.png

Looking to utilize the popular ScrollReveal.js created by Julian Lloyd (ScrollReveal)

Despite following instructions from various sources, the script is not producing the intended effect.

Steps taken to make it work:

Added .js file and initialized the script:

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <title>Aries Sercon Lda - Accounting, Tax and Consulting in Mozambique - Home</title>
        <meta name="description" content="Aries Sercon is an established firm providing accounting, tax and human resource services in Mozambique">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="icon" type="img/png" href="favicon-32x32.png" sizes="32x32"/>
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="scripts/scrollReveal.min.js"></script>  
        <script>
        window.sr = new scrollReveal();
        sr.reveal('#landing');
        sr.reveal('#checks');
        sr.reveal('#process');
        sr.reveal('#clients');
        sr.reveal('#footer');
        </script>
    </head>

Added data-sr attribute for each element

    <div class="wrapper">

            <div class="checks" id="checks" data-sr>

Even after verifying the correct path, the script is not functioning properly.
                <p class="promo center">We are an independent group of accountants and tax professionals based in Mozambique. We have been operating in the market for over 30 years, witnessing the remarkable growth of the country.</br></br>

                Over the years, we have assisted businesses of all sizes, guiding them through the business landscape of Mozambique and gaining valuable insights into the evolving dynamics of the market.</br></br>

                While Mozambique has experienced growth driven by industries and infrastructure projects, there are opportunities for small and medium-sized enterprises. Its strategic location and vast coastline make it attractive for investment and trade.</p>

                <a href="#process" class="smoothScroll"><img src="assets/arrow.svg" class="arrows" alt="Go down"></a>

            </div>



        </div>
javascriptcss

Answer №1

It appears that the data-sr attribute is not a recognized feature of this plugin. Upon reviewing the code for version 3.1.4, I could not locate any reference to this attribute.

Your current implementation may be failing due to uninitialized elements that are meant to be revealed.

To address this issue, consider inserting the following code into your document:

window.sr = ScrollReveal();
sr.reveal('#checks');

// Add additional elements as needed
sr.reveal('#other-element');
sr.reveal('#another-element');

For demonstration purposes, I have prepared a fiddle: https://jsfiddle.net/82n10mk4/.

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

Guide to comparing 2 arrays and determining the quantity of identical elements

If an AJAX call returns 2 arrays upon successful execution, the arrays will be different each time but may contain some common elements. For instance: array1 = [x, y, z, a] array2 = [x, y, y, y, x, z, y, z, z] The goal is to determine how many times eac ...

javascriptjqueryarraysajax

What steps should I follow to change the appearance of this object to match this?

Attempting to modify the value of an object nested within an array, which is in another object. The nesting might be a bit complex... Here's how it currently looks { household and furniture: [{…}, {…}], school stuffs: [{…}, {…}] } M ...

javascriptreactjs

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

jqueryhtmlcss

What is the most efficient way to add an attribute in jQuery - using the attr() method, passing attributes as a key-value object, or directly?

There are three ways that I am aware of for adding a href attribute with a relative link in jQuery: using (1) .attr(), (2) attributes as key-value pair in an argument, or (3) direct writing (if you know other methods, please share in your response so I can ...

javascriptjqueryperformance

Is there a way to incorporate a component into Particle.js?

I attempted to encase the Particle around the component but it's not functioning correctly import React from "react"; import { render } from "react-dom"; import Particles from "./Particles"; import "./index.css" ...

javascriptreactjsnpm

Moving information from two modules to the service (Angular 2)

Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component. Code snippet from users.component.ts: Import { Component } fro ...

javascriptangulartypescript

Group records in MongoDB by either (id1, id2) or (id2, id1)

Creating a messaging system with MongoDB, I have designed the message schema as follows: Message Schema: { senderId: ObjectId, receiverId: ObjectId createdAt: Date } My goal is to showcase all message exchanges between a user and other users ...

javascriptmongodbtypescriptaggregation

Vanishing HTML upon initial entry to the site using Gatsby and Material UI exclusively in live deployment

I run a blog using Gatsby that includes Material UI components to fetch markdown files through GraphQL. During development, everything operates smoothly. However, in production (after running gatsby build && gatsby serve), the HTML doesn't di ...

javascriptreactjsmaterial-uigatsby

Generate a form using code that has the trigger turned off by default

Summary: Looking for a solution to avoid the automatic disabling of a programmatically created trigger in a form. function autoTrigger(e) { var result = {}; var responses = e.response.getItemResponses(); for (var i = 0; i < responses.length; i++) ...

javascriptgoogle-apps-scripttriggersgoogle-forms

Signing off from GitHub Packages for npm

As I work on a project that utilizes a private GitHub package, I have been using it locally with the command npm login --registry=https://npm.pkg.github.com. However, this approach has posed problems when attempting to deploy the project in a production en ...

javascriptgithubnpmgithub-package-registry

Verify whether the type of the emitted variable aligns with the specified custom type

Currently, I am in the process of testing Vue 3 components using jest. My main objective is to receive an emit when a button is clicked and then verify if the emitted object corresponds to a custom type that I have defined in a separate file. Below is an e ...

javascripttypescriptvue.jsjestjsvue-test-utils

The customized sweet alert button is failing to trigger its designated function

I integrated vue-swal to show a pop-up dialog with customized functionality. However, I faced an issue while modifying the swal. In my modified version, there are 3 buttons each with specific actions that should be triggered upon clicking. But for some rea ...

javascriptvue.js

Combining jQuery methods and selectors within a loop

Can a sequence of selectors and methods be generated within a loop? For instance, assuming an array of elements is given: array[0] = '.type1value1, .type1value2, .type1value3'; array[1] = '.type2value1, .type2value2, .type2value3'; ar ...

javascriptjquery

The app's connection issue persists as the SDK initialization has exceeded the time limit

We are currently facing an issue when trying to publish a new manifest for our app in the store. The Microsoft team in India is encountering an error message that says "There is a problem reaching the app" during validation. It's worth noting that th ...

javascriptvue.jsmicrosoft-teamsmicrosoft-teams-js

Get the host name using Node.js server without using the 'req' parameter

Currently, I am utilizing req.headers.host to identify the host name of the server, which works well when dealing with incoming requests at the server. However, I am curious about how one can determine the host name without a request (i.e. without req). T ...

javascriptnode.jsexpress

Error: Attempting to access the 'url' property of an undefined variable, despite specifically checking for its undefined status

Within my React application, I am utilizing the following state: const [functions, setFunctions] = useState([{}]); I have created a test to check if a specific property is undefined: if (typeof functions[functionCount].url !== "undefined") { ...

javascriptreactjs

Is it possible to utilize a variable from a Higher Order Function within a different generation function?

I am facing a dilemma with the need to utilize email = user.email in newcomment['comments/'+id] = {id,comment,email,date}. However, I am unable to incorporate email = yield user.email or yield auth.onAuthStateChanged(user => {email = user.em ...

javascriptreactjsfirebase-realtime-databasereduxredux-saga

Transform an Array into a String using Angular

Is there a more efficient way to extract all the state names from the array (testArray) and convert them to strings ('Arizona','Alaska','Florida','Hawaii','Gujarat','Goa','Punjab'...)? ...

javascriptarraysangular

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

**app.js:** $scope.servers = [ {name:'SQL Server', status:"up"}, {name:'Web Server', status:"down"}, {name:'Index Server', status:"down"} ]; **index.html:** <table> ...

javascriptangularjs

The mobile website layout appears immaculate on the emulator, but it doesn't translate well on real mobile devices

Recently, I delved into the world of html/css/javascript and decided to create a website as a way to practice my skills. However, I have come to realize that many of the methods I used are not considered best practices. I am committed to improving and will ...

htmlcss