Error in image transition effect

Asked

Viewed 36 times

0

I created a page with transition effect in the image with jquery and Javascript based on a tutorial, but when adding Jquery and javascript do not appear images.

Follows the JS code:

       $(window).scroll(function(){
        var $window = $(window),
        $body = ('body'),
        $panel = $('.section');

        var scroll = $window.scrollTop() + ($window.height() / 3);

        $panel.each(function(){
            var $this = $(this);
            if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll){
                $body.removeClass(function (index, css){
                    return (css.match (/(^|\s)color-\s+/g) || [].join(' '));});

                    $('.section').removeClass('active');
                    $this.addClass('active');
                    
                    }
                    });
                    }).scroll();

This is the code with js that would give the effect on the images: http://ugla.us/com-javascript/
No Javascript ta the HTML and CSS part ta 100% but missing js is not working: http://ugla.us/sem-javascript/

If someone can give a strength, I did and remade the tutorial but it did not work.

javascript jquery

  • I don’t know if you noticed on the browser console, but you are showing error: $body.removeClass is not a Function!

1 answer

0


I added a $ in the fourth row. I was ('body') and now $('body') I also added the Jquery open command on the first and close on the last line.

$(function(){
$(window).scroll(function(){
            var $window = $(window),
            $body = $('body'),
            $panel = $('.section');
    
            var scroll = $window.scrollTop() + ($window.height() / 3);
    
            $panel.each(function(){
                var $this = $(this);
                if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll){
                    $body.removeClass(function (index, css){
                        return (css.match (/(^|\s)color-\s+/g) || [].join(' '));});
    
                        $('.section').removeClass('active');
                        $this.addClass('active');
                        
                        }
                        });
                        }).scroll();
})
html{
    height: 1.68;
}
body{
    font-family: sans-serif;
}
.background{
    background-color: #498dff;
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    z-index: 1;
}
.section{
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}
.section > *{
    width: 50%;
}
.section-img{
position: relative;
display: flex;
}
.section-img-inner{
    height: 100vh;
    position: fixed;
    left: 5%;
    width: 40%;
    top: 0;
    mix-blend-mode: multiply;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: blur(30px);
    opacity: 0;
    background-position: 50% 40%;
    transition: 0.6s ease, opacity 0.6s ease, background-position 0.8s ease;

}
.section-body{
    display: flex;
    align-items: center;
}
.section-text{
    padding: 5vw;
}
.section.active .section-img-inner{
    opacity: 1;
    background-position: 50% 50%;
    filter: blur(0);
}
h2{
    font-size: 3vw;
    margin-bottom: 0.5em;
    margin-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="imagem-texto-scroll.css">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
   </head>
   <body>
      <div class="background"></div>
      <div class="section">
         <div class="section-img">
            <div class="section-img-inner" style="background-image: url(https://i.imgur.com/pQuzNgM.png);"></div>
         </div>
         <div class="section-body">
            <div class="section-text">
               <h2>Air Advance</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tempora praesentium facilis officia sunt, aut atque corporis necessitatibus, itaque fugit aliquid optio dicta amet. Aliquam corporis exercitationem eveniet at quidem.</p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam officia quibusdam quae beatae dolor, voluptate dolorem doloremque iste molestiae eos culpa repellat consequatur ipsum ratione eaque voluptatum repudiandae necessitatibus impedit!</p>
            </div>
         </div>
      </div>
      <div class="section">
         <div class="section-img">
            <div class="section-img-inner" style="background-image: url(https://i.imgur.com/PrHHDGz.png);"></div>
         </div>
         <div class="section-body">
            <div class="section-text">
               <h2>Air Advance</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tempora praesentium facilis officia sunt, aut atque corporis necessitatibus, itaque fugit aliquid optio dicta amet. Aliquam corporis exercitationem eveniet at quidem.</p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam officia quibusdam quae beatae dolor, voluptate dolorem doloremque iste molestiae eos culpa repellat consequatur ipsum ratione eaque voluptatum repudiandae necessitatibus impedit!</p>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam, harum enim libero, dicta deserunt exercitationem asperiores, ad accusantium voluptatibus tempore dolores laudantium rem earum quas nobis ex placeat itaque!</p>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ea maxime culpa, expedita ipsum sed reprehenderit placeat perferendis minus? Quas, non ea placeat earum quia error iure quae provident totam!</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid omnis adipisci in alias expedita autem veritatis molestiae facilis officia, quasi minima! Suscipit accusamus harum dolorum, quae laudantium quis officiis cum.</p>
            </div>
         </div>
      </div>
      <div class="section">
         <div class="section-img">
            <div class="section-img-inner" style="background-image: url(https://i.imgur.com/72gDkvV.png);"></div>
         </div>
         <div class="section-body">
            <div class="section-text">
               <h2>Air Advance</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tempora praesentium facilis officia sunt, aut atque corporis necessitatibus, itaque fugit aliquid optio dicta amet. Aliquam corporis exercitationem eveniet at quidem.</p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam officia quibusdam quae beatae dolor, voluptate dolorem doloremque iste molestiae eos culpa repellat consequatur ipsum ratione eaque voluptatum repudiandae necessitatibus impedit!</p>
            </div>
         </div>
      </div>
      <div class="section">
         <div class="section-img">
            <div class="section-img-inner" style="background-image: url(https://i.imgur.com/pQuzNgM.png);"></div>
         </div>
         <div class="section-body">
            <div class="section-text">
               <h2>Air Advance</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tempora praesentium facilis officia sunt, aut atque corporis necessitatibus, itaque fugit aliquid optio dicta amet. Aliquam corporis exercitationem eveniet at quidem.</p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam officia quibusdam quae beatae dolor, voluptate dolorem doloremque iste molestiae eos culpa repellat consequatur ipsum ratione eaque voluptatum repudiandae necessitatibus impedit!</p>
            </div>
         </div>
      </div>
      <div class="section">
         <div class="section-img">
            <div class="section-img-inner" style="background-image: url(https://i.imgur.com/PrHHDGz.png);"></div>
         </div>
         <div class="section-body">
            <div class="section-text">
               <h2>Air Advance</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tempora praesentium facilis officia sunt, aut atque corporis necessitatibus, itaque fugit aliquid optio dicta amet. Aliquam corporis exercitationem eveniet at quidem.</p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam officia quibusdam quae beatae dolor, voluptate dolorem doloremque iste molestiae eos culpa repellat consequatur ipsum ratione eaque voluptatum repudiandae necessitatibus impedit!</p>
            </div>
         </div>
      </div>

  • Mano fico 100% vlw mano vlw msm, I’ll close the question obg.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.