Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: )

Any assistance on this matter would be highly appreciated.

<!doctype html><html><head><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">

<style>
img {
margin:1000px 0;
display:block;

}

</style>

<script>
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{ offset: 'bottom-in-view' });
//Animate from bottom
 $('.animated').waypoint(function() {
 $(this).toggleClass($(this).data('animated'));});
 </script>

<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img class="animated" data-animated="fadeInLeft" src="http://placekitten.com/g/200/300">
<img class="animated" data-animated="bounce" src="http://placekitten.com/g/200/300">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js">   </script>
</body>
</html>

Answer №1

To start, it is recommended to include the jQuery script and Waypoint script within the HEAD tag. This is typically the best practice for adding javascript libraries to your website.

Another point to consider is where you place your javascript code within the HEAD tag. Without a "start control", the browser may begin executing the code before fully reading the rest of the DOM structure. As a result, any events attached to specific elements (such as images with the class "animated") may not work correctly because the browser has not yet identified them. In simpler terms, if the browser encounters your SCRIPT tag before recognizing ".animated", it will fail to trigger the desired actions.

There are two solutions to address this issue:

1 - Move your SCRIPT tag and its contents to the end of the BODY tag.

2 - Wrap your javascript code within a DOM.ready state like the example below:

<script>
        $(document).ready(function() {

            //Animate from top
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            }, {
                offset : 'bottom-in-view'
            });

            //Animate from bottom
            $('.animated').waypoint(function() {
                $(this).toggleClass($(this).data('animated'));
            });
        });
    </script>

Personally, I prefer option number 2. =D

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

Navigating the route with quickness

Upon accessing the localhost, I encountered an issue with the code snippet below: When I try to access it, I receive an error message saying "Cannot GET /". var express = require('express'); var router = express.Router(); /* GET home page. */ r ...

Saving sortable items in browser storage

http://jsfiddle.net/2H2rx/ Dealing with an issue retaining changes to the last item in a sortable list. $( "#sortable" ).sortable(); $( "#sortable" ).on("sortupdate",function( event, ui ) { var sorted = $( this ).sortable( "serialize"); conso ...

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

Tips for aligning text to the left within a Bootstrap accordion

I am in the process of developing a static website utilizing the W3schools "Company" theme. The complete code for this website, including CSS, is provided below: <!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schoo ...

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

I currently have the following elements: #elementA { position: absolute; width: 200%; height: 100%; background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3)); z-index: 250; } #containerofA { position: fixed; ...

Error loading .OBJ files in Three.js on Azure, but works fine locally

I've been using three.js for webGL to load .obj files, but I'm facing an issue when trying to load .obj files on Windows Azure with Windows Server 2008. I'm using Google Chrome browser and it's showing the error below: GET 404 (Not Fo ...

Error-free ngClick doesn't trigger AngularJS controller method

I am struggling to trigger the removePlayer(playerId) method upon clicking a button. However, it seems that the method is not being called, as I have placed a console.log() statement at the top and the console remains empty. This situation has left me puz ...

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

The `DataProvider` component received an invalid `data` prop of type `number` instead of the expected `array`. This issue is occurring within the context of using React-bootstrap

Lately, I've been working on fetching data from Firebase Realtime Database and then displaying it using react-bootstrap-table2. However, I've encountered a snag when attempting to actually render the data. Upon running my code, an error message p ...

The necessity of utilizing a dummy object for storing events in JavaScript is evident in certain situations

I am confused as to why in some instances a dummy object is needed in JavaScript to store events, like in the following code: Metal.Gold = function() { var temp = $("<div>"); //dummy object this.Submit = function(url1, method, data){ ...

What is the best way to prevent a folder from being included in the next js build process while still allowing

I am faced with a challenge involving a collection of JSON files in a folder. I need to prevent this folder from being included in the build process as it would inflate the size of the build. However, I still require access to the data stored in these file ...

Utilizing Ajax with Django

After completing my project using django, I wanted to make it asynchronous by incorporating jquery and ajax. However, I encountered a roadblock - when adding a product to the cart, all fields in the table display the same values temporarily before revertin ...

Refining search outcomes using multiple Multiselect boxes in VueJS

In my Vue component, I have successfully displayed results from a data object and created multiple multiselect boxes. However, I am facing challenges with filtering. I understand how to set and compare a single value from the multiselect for displaying sp ...

JavaScript - Retrieve events from an element and assign them to a keyboard button

I am currently curious about the following scenario: Suppose I have an element with a particular event. For example, when this element is clicked, it triggers alert('clicked); Now, my question is: Is there a way to capture the events of this element ...

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

Using PHP to upload images through AJAX increases efficiency

Worked tirelessly on this script all night still unable to fix the bug. The issue is that when I select an image and click upload, it uploads the current image file. Then, if I select another image and click upload, it uploads two new files along with the ...

What is the best way to transform a synchronous function call into an observable?

Is there a conventional method or developer in RxJS 6 library that can transform a function call into an observable, as shown below? const liftFun = fun => { try { return of(fun()) } catch (err) { return throwError(err) } ...

How can I determine if a page is being rendered in Standards mode or Quirks mode by IE7?

Having some issues with CSS on a webpage. The code is valid and adheres to Strict HTML standards. It displays correctly in most browsers, but I'm experiencing problems in IE (specifically version 7). Is there a way to determine if the page is being re ...

Using JavaScript and PHP to dynamically update a field based on two input values within a row of a table

Currently in the process of developing a dynamic profit margin calculator for a personal project. Overview Data is retrieved from a database table using SQL and PHP After necessary validations, the data is dynamically displayed as rows in an HTML table ...

Perform an Ajax POST request to a specific URL and then automatically redirect to that same

I am currently in the process of developing a web application that allows users to create markers on a Leaflet map. The marker details are then saved in a Django backend system. My objective is to direct the user to a detailed page where they can input mar ...