How to Realize Full-Screen Parallax Effect Picture Switching Based on Anime.js

How to Realize Full-Screen Parallax Effect Picture Switching Based on Anime.js: BY Jeremy30 Nov,2020; Tags:
Anime.js

Introduction

Anime.js is a super practical JavaScript animation library. Using Anime.js can help us realize some web animations conveniently. Today we are going to share a picture switching plug-in based on anime.js's full-screen parallax effect. When the content is switched, anime.js can make the screen have flexible animation effects.

How to Realize Full-Screen Parallax Effect Picture Switching Based on Anime.js

Instructions

HTML Body Code

<li class="slider-list__item slider-list__item_active">
		<span class="back__element">
		  <img src="assets/img/back_apple_002.png" />
		</span>
		<span class="main__element">
		  <img src="assets/img/bottle_apple_002.png" />
		</span>
		<span class="front__element">
		  <img src="assets/img/front_apple_002.png" />
		</span>
		<span class="title__element">
		  <span class="title">apple</span>
		</span>
		<span class="more__element">
		  <span class="content">
			<span class="headline">apple</span>
			<span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span>
			<span class="link">
			  <div class="fill"></div>
			  <a href="#">Open catalog</a>
			</span>
		  </span>
		</span>
	   </li>

Css Code

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

Js Code

constructor(props) {
    this.rootElement = props.element;
    this.slides = Array.from(
      this.rootElement.querySelectorAll(".slider-list__item")
    );
    this.slidesLength = this.slides.length;
    this.current = 0;
    this.isAnimating = false;
    this.direction = 1; 
    this.baseAnimeSettings = {
      rotation: 45,
      duration: 750,
      easing: 'easeInOutCirc'
    };
    this.baseAnimeSettingsBack = {
      rotation: 45,
      duration: 1850,
      elasticity: function(el, i, l) {
        return (200 + i * 200);
      }
    };
    this.baseAnimeSettingsFront = {
      rotation: 45,
      duration: 2250,
      elasticity: function(el, i, l) {
        return (200 + i * 200);
      }
    };
    this.baseAnimeSettingsTitle = {
      rotation: 45,
      duration: 1750,
      elasticity: function(el, i, l) {
        return (200 + i * 200);
      }
    };
    
    this.navBar = this.rootElement.querySelector(".slider__nav-bar");
    this.thumbs = Array.from(this.rootElement.querySelectorAll(".nav-control"));
    this.prevButton = this.rootElement.querySelector(".slider__arrow_prev");
    this.nextButton = this.rootElement.querySelector(".slider__arrow_next");

    this.slides[this.current].classList.add("slider-list__item_active");
    this.thumbs[this.current].classList.add("nav-control_active");

    this._bindEvents();
  }

VIEW NOW