Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Question

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Check out the fiddle to see the animation in action!

The image is programmed to ascend until its bottom aligns with the bottom of the div, and then descend until its top aligns with the top edge of its parent div, revealing the image in the process.

This functionality is designed to accommodate images of various sizes.

$(document).ready(function() {
  move();
});

function move() {
  $(".image").animate({
    bottom: "-=50%"
  }, 10000, 'linear', function() {
    $(".image").animate({
      bottom: "+=50%"
    }, 10000, 'linear', move);
  });
}

.container {
  position: relative;
  width: 1100px;
  height: 480px;
  overflow: hidden;
  background-color: #000;
}

.image {
  position: absolute;
  max-width: 100%;
  min-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg />
    </div>

javascript jquery html css

Answer 1

Answer №1

Here is a code snippet that appears to be effective:

$(document).ready(function () {
  startMove();
});

function startMove() {
  $img = $(".image");
  var image = new Image();
  image.src = $img.attr('src');

  var diff = image.height - $('.container').height();

  $img.animate({
    bottom: "+="+diff+'px'
  }, 10000, 'linear', function () {
    $img.animate({
        bottom: "-="+diff+'px'
    }, 10000, 'linear', startMove);
  });
}

This technique involves creating a new JavaScript image Object (not jQuery) with the same src as the selected image, using its natural height for the animation. It appears that using a jQuery object for this purpose may cause discrepancies in height, possibly due to needing to be attached to the DOM or a similar reason.

Jsfiddle link: http://jsfiddle.net/VqzvR/8/

By moving the setup code outside of the startMove() function, the HTTP GET request for the image source will only be executed once:

$(document).ready(function () {
  setupAnimation();
});

function setupAnimation() {
  $img = $(".image");
  var image = new Image();
  image.src = $img.attr('src');

  var diff = image.height - $('.container').height();

  function startMove() {
    $img.animate({
        bottom: "+="+diff+'px'
    }, 10000, 'linear', function () {
        $img.animate({
            bottom: "-="+diff+'px'
        }, 10000, 'linear', startMove);
    });
  }
  startMove();
}

Does this achieve the desired effect you were aiming for?

Answer 2

Here is a code snippet that appears to be effective:

$(document).ready(function () {
  startMove();
});

function startMove() {
  $img = $(".image");
  var image = new Image();
  image.src = $img.attr('src');

  var diff = image.height - $('.container').height();

  $img.animate({
    bottom: "+="+diff+'px'
  }, 10000, 'linear', function () {
    $img.animate({
        bottom: "-="+diff+'px'
    }, 10000, 'linear', startMove);
  });
}

This technique involves creating a new JavaScript image Object (not jQuery) with the same src as the selected image, using its natural height for the animation. It appears that using a jQuery object for this purpose may cause discrepancies in height, possibly due to needing to be attached to the DOM or a similar reason.

Jsfiddle link: http://jsfiddle.net/VqzvR/8/

By moving the setup code outside of the startMove() function, the HTTP GET request for the image source will only be executed once:

$(document).ready(function () {
  setupAnimation();
});

function setupAnimation() {
  $img = $(".image");
  var image = new Image();
  image.src = $img.attr('src');

  var diff = image.height - $('.container').height();

  function startMove() {
    $img.animate({
        bottom: "+="+diff+'px'
    }, 10000, 'linear', function () {
        $img.animate({
            bottom: "-="+diff+'px'
        }, 10000, 'linear', startMove);
    });
  }
  startMove();
}

Does this achieve the desired effect you were aiming for?

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Answer №1

Similar questions

Using database queries to populate a series of interconnected drop-down menus

The date error from day.js in Firefox is not valid

Failed to fetch user id from server using Ajax request

Display a list next to a block of text and image using HTML and CSS styling

What is the process of developing a straightforward Node.js script to encapsulate a binary or executable file?

ajax and codeigniter combination for selecting options

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Unraveling nested JSON structures with varying formats in Javascript or Jquery: Step-by-step guide

Displaying the Yii form directly on the page upon loading, rather than enclosed within a jQuery dialog box

"Implementing a full page refresh when interacting with a map using

Is the CSS3 bar chart flipped?

Issues with exporting data to Excel in WEB API are causing problems and need to

What is the method for retrieving a specific value following the submission of an AngularJS form?

Angular is throwing an error because it cannot find the definition for

iOS does not support Css3 Transition

style for a bootstrap form input

Is it possible to trigger the alert message by utilizing this code snippet?

Issue with jQuery getScript() not resolving

Having trouble with the scrollTop function in your Rails application?

When using Node.js, Express.js, and MongoDB, ensure that the route.post() function is provided with proper callback functions instead of