CODEWITHSUNDEEP
javascriptjqueryhtmlcssrandom
Ugur Ozer
Ugur Ozer

Reputation: 49

How to fade in - fade out three images with random place and random size?

I want to place a div which fade in/out randomly with random size and random place.

I could show up three images randomly with fade-in/out but I couldn't place them random place with random size.

http://jsfiddle.net/qq68m/139/

jquery:

jQuery(function(){
    function random(n) {
        return Math.floor(Math.random() * n);
    }
    var transition_time = 2500;
    var waiting_time = 100;
    var images = $('div#block img');
    var n = images.length;
    var current = random(n);
    images.hide();
    images.eq(current).show();

    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(n);
            images.eq(current).fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})

html:

<div id="block">
    <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
    <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
        <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">

</div>

Upvotes: 1

Views: 1022

Answers (1)

Jack Dalton
Jack Dalton

Reputation: 3681

Here is my solution. It allows you to specify the range of image scale sizes, and insures that no matter the scale, the randomly chosen position will not clip outside of the container. I hope this meets your requirements.

EDIT: I've updated the code so that non-quadrilateral images will now keep their proportions as well (as shown by Phil Murray examples).

If setting the size by css height/width doesn't work for you, perhaps using the CSS3 scaleX/scaleY property might give you smoother image scaling results.

If you have any further questions please ask in this posts comment.

jQuery(function(){
    function random(n) {
        return Math.floor(Math.random() * n);
    }
    var transition_time = 200;
    var waiting_time = 100;
    var images = $('div#block img');
    var n = images.length;
    var current = random(n);
    images.hide();
    images.eq(current).show();
    
    //get the size of the container
    var boxHeight = document.getElementById('block').offsetHeight;
    var boxWidth = document.getElementById('block').offsetWidth;
    
    //range of possible image scales
    var objectMaxHeight = 60;
    var objectMinHeight = 20;
    
    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(n);
            
            //gets reference to selected image
            var $domImage = images.eq(current);
            
            //generates random heights and widths for the image to be shown in
            var generatedHeight = 
            		Math.floor(
                	Math.random() * (objectMaxHeight - objectMinHeight)
                 ) + objectMinHeight;

						// assigns values to the image
            $domImage.css('height', generatedHeight); 
            $domImage.css('width', "auto"); 
            
            var imageAutoWidth = $domImage.width();
            
            var generatedYLocation = Math.floor(
              Math.random() * (boxHeight - generatedHeight + 1)
            ) + 0;
            
            var generatedXLocation = Math.floor(
                Math.random() * (boxWidth - imageAutoWidth)
            ) + 0;
            
            $domImage.css('top', generatedYLocation);
            $domImage.css('left', generatedXLocation);
            $domImage.fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})
#block { 
  position: fixed;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  background: yellow;
  overflow: hidden;
}

img {
  position:relative; 
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
    <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
    <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
    <img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
    <img src="https://www.fillmurray.com/g/200/500">
    <img src="https://www.fillmurray.com/g/500/200">
</div>

Upvotes: 3

Related Questions