CODEWITHSUNDEEP
javascripthtmlcss
Ulvar
Ulvar

Reputation: 33

Add transition when switching img src

I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.

Any suggestions? By the way I have a snippet showing my code and the issue.

PS, the buttons are under the image at the moment. That doesn't need a fix.

let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];

jw_btn.forEach(function(jw_btn_current, index) {
  jw_btn_current.addEventListener('mouseenter', function() {
    jw_backgroundswitch.src = images[index]; 
  });
  jw_btn_current.addEventListener('mouseleave', function() {
    jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
  });
});
*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    height: 200vh;
}
.section-background{

}
img{
    background-repeat: no-repeat;

    transition: all .5s ease-in-out;
}

.ulwrapper{
    display: flex;
    height: 100vh;
    align-items: center;
}
.sqs-block-content{
    display: flex;
    width: 100%;
    height: 4rem;
    list-style: none; 
}
h1{
    margin: auto;
    cursor: pointer;
}
h1 a{
    font-weight: bolder;
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class='section-background'>
        <img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
        <div class="ulwrapper">

        <div class="sqs-block-content">
            <h1 class="jw_btn"><a>Button1</a></h1>
            <h1 class="jw_btn"><a>Button2</a></h1>
            <h1 class="jw_btn"><a>Button3</a></h1>
        </div>
    </div>
    </div>


<script src="app.js"></script>
</body>
</html>

Upvotes: 2

Views: 2118

Answers (1)

Mary Grass
Mary Grass

Reputation: 94

I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";

wrapImages();

let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];

jw_btn.forEach(function(jw_btn_current, index) {
  jw_btn_current.addEventListener('mouseenter', function() {
    imageBelow.src = images[index]; 
    imageAbove.style.opacity = "0";
  });
  jw_btn_current.addEventListener('mouseleave', function() {
    imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
    imageAbove.style.opacity = "1";
    
  });
});


function wrapImages() {

let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";

}
*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    height: 200vh;
}

img{
    background-repeat: no-repeat;

    transition: all .5s ease-in-out;
}

.pics {

    position: relative;
    width: 100%;
    height: 100vh;
}

.pics > img {

    position: absolute;
    transition: all .4s ease;
}



.ulwrapper{
    display: flex;
    height: 100vh;
    align-items: center;
}
.sqs-block-content{
    display: flex;
    width: 100%;
    height: 4rem;
    list-style: none; 
}
h1{
    margin: auto;
    cursor: pointer;
}
h1 a{
    font-weight: bolder;
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">


</head>

<body>

    <div class='section-background'>
    
            <img alt="" 
                data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
                data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
                data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
                data-load="false" data-parent-ratio="1.4"
                style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" 
                data-image-resolution="2500w"
                src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
            <img alt="" 
                data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
                data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
                data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
                data-load="false" data-parent-ratio="1.4"
                style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" 
                data-image-resolution="2500w"
                src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
            
        </div>
        <div class="ulwrapper">

            <div class="sqs-block-content">
                <h1 class="jw_btn"><a>Button1</a></h1>
                <h1 class="jw_btn"><a>Button2</a></h1>
                <h1 class="jw_btn"><a>Button3</a></h1>
            </div>
        </div>
    </div>


    <script src="app.js"></script>
</body>

</html>

EDIT

If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.

Upvotes: 1

Related Questions