I am experiencing a delay in the parallax animated effect of 3 images. This issue was correctly pointed out by @Roko C. Buljan.
Is there a way to fix this?
My code is visible here - but the effect only works under 670px (without going into full screen mode).
When setting the transition-duration: 1s; for every .pic1,2,3, it can interfere with the parallax effect you desire for the backgroundPosition. It's important to only specify durations for properties that actually require them, rather than applying it to all properties by default using all. In this case, you should only use the transition for the filter property:
Avoid copying and pasting code in CSS!
Instead, create a single rule like this:
/* no need for .pic1, pic2, pic3 { as well */
.pic {
cursor: pointer;
background-size: cover;
width: 30%;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
transition: filter 1s; /* apply transition only to filter! */
}
.pic1 {
background-image: url(https://www.rgu.hu/CMF/jpg/laser-sci1.jpg);
}
.pic2 {
background-image: url(https://www.rgu.hu/CMF/jpg/life-sci1.jpg);
}
.pic3 {
background-image: url(https://www.rgu.hu/CMF/jpg/data-sci1.jpg);
}
Remember to add the "pic" class to all your HTML elements representing pictures:
class="pic pic1 parallax-image"
My situation is as follows: I have jQuery code that uses an if-statement to add a specific class to an element based on the selected value on a form page. I also created another form where users can view the details of a previously filled out form. However ...
I'm facing an issue with using jQuery in Angular2. I can't seem to get my modal to pop out. Error message: I used Angular-cli npm install and then yarn to install bootstrap + In my .angular-cli.json file, I have the following scripts: "script ...
I'm facing an issue where I am trying to access the properties of objects inside an array in my code to display text values in input boxes that are recovered from local storage after a refresh. However, when I attempt to run a for loop within my appSt ...
Checking for data presence in arrays: [ { "productDisplay": "ZXP 105", "productNumber": "WZDR 112" }, { "productDisplay": "ZXP 106", "productNumber": "WZDR 113" } ] ChildArray [{productDisplay:"ZXP 105", ...
This question might seem easy for some, but I am new to JavaScript. I'm having trouble understanding this part of the function: kids.sort(function(n, m) What does n and m represent? How can I grasp these types of functions? Thanks! <script&g ...
I have been working on a custom filter called "occursToday" for an array of "event" objects. This filter is supposed to return events that have a startDate matching the current date. However, when I test the filter, no events are displayed despite expectin ...
I am facing an issue while attempting to create an array of promises and then calling them using Promise.all. The problem lies in correctly pushing the functions into the array. It seems like they are getting executed instead of being inserted and waiting ...
I've been working on revamping the authentication system for an old application that previously ran on node 4.5, but I keep encountering an error whenever I attempt to log in. TypeError [ERR_INVALID_ARG_TYPE]: The "digest" argument must be one of type ...
https://i.sstatic.net/HSdlQ.png I am working with an SVG element and I have a query regarding its positioning. <svg style="height: 100%" viewbox="0 0 100 25" preserveAspectRatio="none"> <path fill="blue" d="M0 30 V12 Q30 17 55 12 T10 ...
I'm uncertain about what I am missing, can someone help me out? Thank you. When I click "check," it returns wrong(); It should actually return yes(); because both have the same value and result. However, it's only giving wrong(); If the value ...
I am struggling with extracting classes from a block of HTML code: <div class="container"> <div class="item first">...</div> <div class="item second">...</div> <div class="item third">...</div> <div cla ...
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta charset="UTF-8"> <title>todo</title> </head> <body> <div class="container"&pgt; <h1 class ...
Previously, I successfully uploaded an image using PHP and HTML. Now, I need to achieve the same with JavaScript (js) and AJAX. Additionally, I have been advised to utilize local storage for server-side storage before inserting it into the database. Below, ...
Is it possible to create draggable effects similar to Google Maps on a group of div elements? Are there any JavaScript libraries available that can replicate this functionality? ...
I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...
Within my JavaScript model, this.profile, there exists a property named emails. This property is an array composed of objects with the properties {email, isDefault, status}. Following this, I proceed to define it as shown below: this.profileForm = this ...
I am currently developing an input feature where I need to insert a comma after every 3 numbers, such as (352,353,353). The challenge is to display this format in a text field. Since I am new to working with React, I would appreciate any guidance on how to ...
Currently, I am trying to implement click events on my WebGL based 3D graph library called Graphosaurus. You can take a look at what I have done so far here. I have used this example as a reference. I am wondering if the reason it is not functioning corr ...
Over the past few days, I've been diving into AngularJS. While it seemed intuitive in tutorials and videos, when I actually started replacing my current web app code with AngularJS, I encountered numerous issues. For instance, if I wanted to add HTML ...