Homemade gif effect

Homemade gif effect

Note: In this example, the initial effect prevails

Write before:

I wanted to write an effect like this. However, it is also good to add a regular playback to him after writing. So the improved results are as follows

I don't think it's perfect after this is done. So I think of comics, which are animations that can move, so I find a series of coherent picture materials, add them in, and then create the following effect.

Page section

  1. Prepare a container tab with tab-content, tab-list,
  2. There is a picture img inside the tab-content to act as a big picture.
  3. tab-list, which contains a series of small pictures that serve as the "sketch" section.

js section

Untimer section

  1. Get tab-content, tab-list, img, and so on.

  2. Declare a timer for an empty object to be used as a subsequent timer.

  3. Declare a current Index to represent the index of the currently selected picture; The initial value is set to 0;

      imgs[i].setAttribute("index", i); 
    
  4. for loop on imgs

    1. Set the index value for each imgs[i] during loop traversal.
    2. Add event monitoring mouse-over events for each img[i];
    3. When the mouse moves to the current img[i], assign the src of the current item to the src of the larger image.
    4. For visualization purposes, use exclusive thinking to reduce the transparency of other unselected imgs items to 0.2; The current transparency is 1.

Add Timer Section

  1. The previous variable currentIndex is used. Inside the timer, use IMGs [current index] to assign the src of the small picture to the large one.

  2. Use the following code to make the current Index cycle from 0 to the length of the picture

    currentIndex = currentIndex % imgs.length;
    
  3. Change the transparency of other pictures to 0.2 with exclusive thought in the timer; Change your transparency to 1;

     imgs[currentIndex].style.opacity = 1;
    
  4. Let currentIndex increase by 1 at the end

      currentIndex++;
    
  5. Because the timer part is needed up and down, we encapsulate it as a function time.

  6. time has a parameter * timerSdept*, which adjusts the speed of picture switching.

  7. Code to clear the timer in the first sentence of an imgs[i] mouse-over event

     clearInterval(timer);
    
  8. Re-assign current Index to the index value of the current item after the mouse moves into the altruistic thought of the event, preventing the execution sequence error in the timer after the mouse moves in again

    currentIndex = this.getAttribute("index");
    
  9. Add a mouse leave event after the loop event; Keep the timer running after the mouse leaves

    Add a time function to it

     imgs[i].addEventListener("mouseout", function () {
                    time(800);
                });
    

The complete code is as follows:

html

<div class="tab">
        <div class="tab-content">
            <img src="images/Dole A dream.jpeg" alt="" id="big">
        </div>
        <div class="tab-list">
            <img src="images/Dole A dream.jpeg" alt="Dole A dream.jpeg" title="Dole A dream.jpeg">
            <img src="images/Big Bear.jpeg" alt="Big Bear.jpeg" title="Big Bear.jpeg">
            <img src="images/Doctor.jpg" alt="Doctor.jpg" title="Doctor.jpgs">
            <img src="images/Fat tiger.jpg" alt="Fat tiger.jpg" title="Fat tiger.jpg">
            <img src="images/Silence.jpeg" alt="Silence.jpeg" title="Silence.jpeg">
        </div>
    </div>

css

      * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(5, 5, 5);
        }
        .tab {
            width: 800px;
            margin: auto;
        }
        .tab-content img {
            width: 400px;
            height: 400px;
            margin-left: 8%;
        }

        .tab-list img {
            float: left;
            margin-left: 10px;
            width: 100px;
            height: 100px;
        }

js

//---------------------- Timer function--------------------------------- 
function time(timerSdept) {
            timer = setInterval(function () {
                currentIndex = currentIndex % imgs.length;
                big.src = imgs[currentIndex].src;
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].style.opacity = 0.2;
                }
                imgs[currentIndex].style.opacity = 1;
                currentIndex++;
            }, timerSdept);
        };
//--------------------------------------------------------------------------------------------------------------------------------------------------------
      time(800);
//------------------------------------- add event under for loop---------------------
 for (var i = 0; i < imgs.length; i++) {
            imgs[i].setAttribute("index", i);  //Set the auto escape property index for it
     //-------------------------------------------------
            imgs[i].addEventListener("mouseover", function()                {
                clearInterval(timer);
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].style.opacity = 0.2;
                }
                this.style.opacity = 1;      //Making Running Horselight Effect
                big.src = this.src;
                currentIndex = this.getAttribute("index");
            });
       //-------------------- Add mouse removal event-------------------
            imgs[i].addEventListener("mouseout", function ()             {
                time(800);
            })
        }
        

Code Improvement:

Picture switching speed can be controlled in the display interface

Page section

  1. Add a class tab-sel to the page section
  2. There is an input box, a click button under this class

js section

  1. Get input box elements, click button elements

  2. Set a variable txt to represent the value of the input box

  3. Pass this variable to the function time encapsulating the timer to manually enter the speed at which the picture changes on the page.

  4. Add event listening click events for buttons

    1. Add judgment to this event
    2. Assign txt to 100 if the input is non-numeric
    3. If it is a number type, convert it to a pure number type using the parsInt() method
  5. Click txt inside the event at this time after clicking the button; Instead of immediately propagating the re-acquired value outside, you need to refresh the page before you can propagate the re-assigned value. Add to this click event

    location.reload()
    
  6. The page is refreshed at the same time the button is clicked, and the reassigned value is also passed outside.

The perfect code is as follows:

html

   <div class="tab-sel">
            <input type="text" placeholder="Enter the adjustment speed here" id="inp" value="100">
            <input type="button" id="btn" value="change">
        </div>

css

  .tab-sel {
            position: absolute;
            right: 3%;
            top: 5%;
            width: 400px;
            height: 30px;
        }

        .tab-sel input {
            border-radius: 15px;
            width: 75%;
            height: 30px;
            outline: none;
            opacity: 0.1;

        }

        .tab-sel input:hover {
            opacity: 1;
        }
        #btn {
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

js

  var txt = parseInt(inp.value);
        btn.addEventListener("click", function () {
            if(isNaN(txt)) {
                txt = 100;
            } else {
                txt = parseInt(txt);
            } 
            //Refresh the page on click to pass variable values out
            window.location.reload();     
        });

Tags: Javascript Front-end

Posted on Sat, 27 Nov 2021 12:19:37 -0500 by inversesoft123