Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in).

Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity to full opacity:

  tiles = $(".recipe").fadeTo(0, 0);
      $(window).scroll(function(d,h) {
          tiles.each(function(i) {
              a = $(this).offset().top + $(this).height();
              b = $(window).scrollTop() + $(window).height();
              if (a < b) $(this).fadeTo(500,1);
          });
      });

Does anyone have suggestions on how I can achieve the desired effect? I want the divs to smoothly slide up from 0 opacity to 100% opaque when scrolling from bottom to top.

Hopefully this all makes sense. Thank you!

javascriptjqueryhtmlcss

Answer №1

One solution that comes to mind is as follows:

const scrollAnimation = () => {
    const tiles = $(".tile:not(.animated)");
    const $window = $(window);
    const bottomOfWindow = $window.scrollTop() + $window.height();

    tiles.each((index, value) => {
        const $this = $(value);
        const topOfTile = $this.offset().top + $this.height();

        if (topOfTile < bottomOfWindow) {
            $this.addClass("animated").addClass("fadeInUp");
        }
    });
};

$(scrollAnimation);

$(window).scroll(scrollAnimation);

Check out this demo on JSFiddle

animate.css handles the animation effects used in this code snippet.

Answer №2

The website incorporates a jQuery plugin known as waypoints which enables various functions for scroll events. To utilize this plugin, you will need to download the Waypoint library.

One example of how the Waypoint library can be used is shown below:

$('#example-offset-percent').waypoint(function() {
    notify('25% from the top');
}, { offset: '25%' });

In this code snippet, the notification is triggered when the specified object reaches 25% from the top of the screen.

For more information and to access the Waypoints library, visit the following link:

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

Is it possible for parameters to still be filled even when they start off empty

Currently, I am enrolled in a javascript course and struggling to comprehend how the parameter in my example below is populated with the "correct stuff" without actually calling the function with a corresponding element? success: function(result) { ...

javascriptajax

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

Non-Mozilla browsers facing progress dialog block due to AJAX async:false

My shopping cart provider recently made a temporary fix by adding "async:false" to the cart calculation code in order to prevent potential issues with AJAX call completion. However, this caused an unintended consequence of preventing a jquery progress dial ...

jqueryajax

Transforming Observable into a Promise

Is it considered a best practice to convert an observable object to a promise, given that observables can be used in most scenarios instead of promises? I recently started learning Angular and came across the following code snippet in a new project using ...

javascriptangularpromiseobservable

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

I'm having an issue trying to show different content on various web browsers. When using Internet Explorer 11 and Google Chrome 39, the message displayed is "Not Internet Explorer" instead of the expected result. Is there a problem with my code? It&ap ...

htmlinternet-explorerinternet-explorer-11conditional-comments

utilize dynamic variable within the template's views

Here is a snippet of my HTML code var marker; function initMap() { map = new google.maps.Map(document.getElementById("mymap"), myOptions); getMapMetadata([]); // setInterval(function(){ getMapMetadata([]); }, 3000); } function createMarke ...

javascripthtmlajaxdjangotweak

Issue with the Navigation in CSS and jQuery

I'm struggling to understand a problem with the desktop navigation on this website, specifically in Safari on certain pages. The issue seems to only occur on Safari for Windows, Mac Desktop, and Mac Laptop. Interestingly, the navigation works perfect ...

jqueryhtmlcsssafarinavigation

Send the result of a successful AJAX request to a partial view

I have added these lines of code, where the success function returns data in the form of [object Object], with attributes like Name, Category, and Description. $.ajax({ url: rootUrl + 'Admin/EditRSS', type: "GET", data: { ...

jqueryhtmlajaxasp.net-mvc

Link JSON in JavaScript using field identifiers

I've been working on incorporating JSON data into my JavaScript code, and the JSON structure I am dealing with is as follows: { "status":"ok", "count":5, "pages":1, "category":{ "id":85, "slug":"front-page-active", "title":"Front ...

javascriptjqueryjson

Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...

javascriptjqueryhtmlcsstwitter-bootstrap

The execution of my Nodejs API using the 'npm start' command is unsuccessful, resulting in the following error message

After cloning the project from GitLab, I proceeded to install node_modules using "npm install -g" and ran the "npm start" command in the terminal. However, I encountered errors as shown below: Error Cannot find module '../services/' Require ...

javascriptnode.jsnpm

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

htmlangularangular-materialdatepickerangular15

Displaying numerous Google charts within a Bootstrap carousel

A bootstrap carousel has been implemented to showcase our company's data. The carousel includes a bootstrap table, images, and two Google charts: a pie chart and a stacked bar chart. The issue arises when the active class is not maintained for the Go ...

javascripthtmlbootstrap-4google-visualizationbootstrap-carousel

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering difficulties while trying to include js-search in a Vue.js component

My current challenge involves importing the js-search npm module into a Vue component. However, whenever I attempt to do so using: import JsSearch from 'js-search' The subsequent console.log(JsSearch) statement returns undefined. To further in ...

javascriptnode.jsvue.jsnpmwebpack

How can I configure the Google Chrome script debugger to pause on exceptions?

Is there a way to automatically interrupt the program when an exception is encountered? ...

javascriptgoogle-chrome

Unfortunate escapement of characters discovered in variable that returns JSON image source

I am currently utilizing Google Tag Manager to incorporate the 'article' JSON markup and retrieve different variables for modifying specific sections on particular pages. Among the elements I am attempting to obtain is the image source. At prese ...

javascriptjsongoogle-tag-manager

What is the best way to ensure that any modifications made to an item in a table are appropriately synced

Utilizing xeditable.js, I am able to dynamically update the content of a cell within a table. My goal is to capture these changes and send them via an HTTP request (PUT) to the backend in order to update the database. Below is the table that can be edited ...

javascriptangularjsdatabasex-editable

Adjust the size of a canvas using JavaFX in an FXML file

I am encountering an issue with resizing a canvas in Javafx while using scene builder and fxml. Currently, when the user clicks on the canvas, it turns black, but upon resizing the screen and clicking on the canvas again, only the original size of the canv ...

javahtmlcanvasjavafxjavafx-8

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

In my ionic application, I developed a custom directive specifically for text masking, aimed at formatting phone numbers within input fields. The core functionality of this directive revolves around utilizing ngControl to facilitate the retrieval and assig ...

javascriptangularunit-testingionic2testbed