As I reach the bottom and scroll down, my images start to change dynamically, which is pretty cool! However, I would like to enhance this experience by adding a fade effect to the image transitions. You can view a demo of what I'm referring to here:
Find the code snippet below:
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
...
$(window).on('scroll',function(){
if($(window).scrollTop()){
$('#yourImg').animate({opacity:0},1000,function(){});
}elseif(!($(window).scrollTop())){
$('#yourImg').animate({opacity:1},1000,function(){});
}
});
This code snippet hasn't been tested, but I believe it can serve as a starting point for your desired functionality.
Check out this JSFiddle for the solution: https://jsfiddle.net/84rqx7dg/
I implemented a CSS3 transition for the fade effect and utilized JQuery to toggle classes instead of changing image sources.
$(document).ready(function(){
$(window).scroll(function(){
var offset1 = $(document).height();
var offset = $(window).scrollTop();
var lineH = offset1 - offset;
var lineHpart = offset1/5;
$("span").html(lineH);
if (lineH > lineHpart*4) {
$('.image.active').removeClass('active');
$('#img1').addClass('active');
}
if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
$('.image.active').removeClass('active');
$('#img2').addClass('active');
}
if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
$('.image.active').removeClass('active');
$('#img3').addClass('active');
}
if (lineH < lineHpart*2 && lineH > lineHpart*1) {
$('.image.active').removeClass('active');
$('#img4').addClass('active');
}
if (lineH < lineHpart) {
$('.image.active').removeClass('active');
$('#img5').addClass('active');
}
});
});.container{
min-height: 1500px;
}
.image{
width: 980px;
position : fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
transition: all 1s;
}
.active {
opacity: 1;
}<div class="container">
<div class="row">
<div class="col-md-9">
<img id="img1" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
<img id="img2" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
<img id="img3" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
<img id="img4" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
<img id="img5" class="image" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
<img id="img6" class="image active" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" />
<div id="bottommark"></div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="another">
<div class="mian">
</div>
</div>Hello, I'm new to jQuery and I was hoping someone could help me with extracting the href attribute from an anchor tag using a div or span ID selector along with the anchor tag's class. <span id="view-post-btn"><a href="https://blog.comp ...
I am looking for a way to modify my autosuggest textbox to fetch data from a server instead of a defined array. Can anyone provide guidance on how to achieve this? Here is the code snippet I am currently working with: HTML code- <!doctype html> &l ...
I seem to be having an issue with my JavaScript code not properly connecting to or linking with my HTML page. I even tried inserting the JavaScript directly into my HTML, but I can't figure out what's causing the problem. Here is the code snippe ...
Is there a way to apply a border around the WordPress pagination that starts from the first number and ends at the final number in the pagination sequence? The current structure of the WordPress pagination includes: <a class="prev page-numbers">< ...
I am encountering an issue with jQuery Validator on my form. Despite being checked or unchecked, the checked attribute does not change on my validator when I submit the form. Below is the snippet of HTML: <div class="col-sm-10 col-sm-offset-1"> ...
<li class=" active"> <input class="check-shopby" type="checkbox" onclick="$(this).next().click()" checked="checked"> <a class="checked" href="http://mysite/~dev433/products//cooking/cook-tops.html" onclick="$(this).previous().checked = f ...
Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...
I need help with closing my Modal Bootstrap after clicking the Ok button in SweetAlert. I've attempted various methods, but none of them have worked so far. I'm not sure if I'm implementing it correctly, but I've utilized JQuery for thi ...
After using a table to display radio buttons with labels in the past, I am now attempting to achieve the same result using only CSS. Is there a CSS technique that will allow me to position the label text neatly on top of the corresponding radio button? He ...
Can someone assist me with a basic ajax call for a login button? I need help with the form submission and sending the request to a php file to handle the login action. However, I am encountering an issue where two files are being sent instead of one when ...
Currently, my data table is equipped with a feature that saves the state of the current page. var tbl = $('#datatable').dataTable({ "bStateSave": true, "fnStateSave": function(oSettings, oData) { localStorage.setItem('datatable&apos ...
Is there a way to center a fixed position div with a specified width of 300px, rather than in percentage? <div class="mainCont"> <div class="childCont"> </div> The childCont div has a fixed position and width of 300px. How can I ensur ...
Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...
Simply put, I am trying to determine the total scroll size for a text area in a unit that scrollTop can align with. However, I am at a loss on how to do so. I've tried scrollHeight and various other methods without success. Any advice or suggestions ...
I am currently experiencing an issue with an ajax call when attempting to submit a form to the database. Below is the code I have used: <?php include 'dbConnect.php'; include 'session.php'; ?> <form class="form" id="f ...
Possible Duplicate: jQuery and setting margin using jQuery In the HTML snippet below, I have set margins for a paragraph element to center it: <p style="margin-left:auto; margin-right:auto; width:200px;">Hello</p> After that, I attempted ...
I recently started learning about ajax and followed a tutorial. However, I encountered an error when trying to run an HTML file along with a linked JavaScript file. Since browsers cannot make requests to file://, I have set up an http-server on port 8080 ...
I require assistance with passing a dynamic URL to a function. code onload="getImage('+ val.logo +');" onclick="loadPageMerchantInfo('+ val.merchant_id +'); The value of val.logo contains a URL such as: https://www.example.com/upload ...
I would like to implement an input field similar to the one shown in the image. When the input field is clicked on, I want to blur the background. image example Do I need to use a specific library for this? Currently, I am using Material UI. ...
I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...