https://www.sinoftm.com/js/pc_home.js

1let play = true;
2$(window).scroll(function(){
3  var top = $(window).scrollTop();
4  var home_2 = $('.home2').offset().top;
5  var height_2 = $('.home2').innerHeight();
6  if(top > home_2 - 500 && top < home_2 + height_2 - 300 && play ){
7    if($('.home2 .swiper-slide-active .video_dom').get(0).readyState == 4){
8        $('.home2 .swiper-slide-active .video_dom').get(0).play();
9        $(".swiper-button .swiper-autoplay").addClass("swiper-start");
10    }else{
11        $('.home2 .swiper-slide-active .video_dom').get(0).addEventListener("canplaythrough",function(){
12            $('.home2 .swiper-slide-active .video_dom').get(0).play();
13            $(".swiper-button .swiper-autoplay").addClass("swiper-start");
14        })
15    }
16  }else if($('.home2 .swiper-slide-active .video_dom').get(0)){
17      $('.home2 .swiper-slide-active .video_dom').get(0).pause();
18      $(".swiper-button .swiper-autoplay").removeClass("swiper-start");
19  }
20
21})
22
23$(function(){
24  $(".swiper-button .swiper-autoplay").click(function(){
25    if($(this).hasClass("swiper-start")){
26      $(this).removeClass("swiper-start");
27      $('.home2 .swiper-slide-active .video_dom').get(0).pause();
28      play = false;
29    }else{
30      $(this).addClass("swiper-start");
31      $('.home2 .swiper-slide-active .video_dom').get(0).play();
32      play = true;
33    }
34  })
35})
36
37gsap.registerPlugin(ScrollTrigger);
38var winwidth = $(window).innerWidth();
39var winheight = $(window).innerHeight();
40// 序列帧动画变量声明
41const frameAnimationData = [
42  {
43    imgLoading: true,
44    frameCount: 56,
45    currentFrameImg: (index) => { 
46      if(index > 43){
47        return `images_pc/earth3d/44.png` 
48      }else{
49        return `images_pc/earth3d/${(index + 1)}.png` 
50      }
51      
52    },
53    frameImgData: [],
54    currentFrame: { frame: 0 },
55    canvasDom: () => {
56      const canvasDom = document.getElementById("home4_canvas1");
57      canvasDom.width = winwidth;
58      canvasDom.height = winheight;
59      return canvasDom;
60    }
61  },
62  {
63    imgLoading: true,
64    frameCount: 47,
65    currentFrameImg: (index) => { return `images_pc/line/${(index + 1)}.png` },
66    frameImgData: [],
67    currentFrame: { frame: 0 },
68    canvasDom: () => {
69      const canvasDom = document.getElementById("home4_canvas2");
70      canvasDom.width = winwidth;
71      canvasDom.height = winheight;
72      return canvasDom;
73    }
74  }
75]
76home1();
77home2();
78home3();
79home4();
80getFrameFirstImgInit(frameAnimationData[0]);
81getFrameFirstImgInit(frameAnimationData[1]);
82afterScrollOnceDownloadSources(frameAnimationData[0])
83afterScrollOnceDownloadSources(frameAnimationData[1])
84frameAnimation(frameAnimationData, '.home4');
85function home1() {
86  let am = gsap.timeline({
87    scrollTrigger: {
88      trigger: '.home1',
89      start: 'top top',
90      end: '+=120%',
91      scrub: true,
92      pin: true
93    }
94  });
95  am.to('.home1 .sty1 .text', {
96    autoAlpha: 0,
97    duration: 0.5
98  }).to('.home1 .sty2', {
99    autoAlpha: 1,
100    duration: 0.5
101  }).to('.home1 .sty2 .wrap', {
102    autoAlpha: 1,
103    duration: 0.5
104  });
105}
106function home2() {
107  let am = gsap.timeline({
108    scrollTrigger: {
109      trigger: '.home2',
110      start: 'top-=50%',
111      end: '+=100%',
112    }
113  });
114  am.from('.home2 .titlebox', { y: '100%', autoAlpha: 0, duration: 0.6}).to('.home2 .titlebox', { y: '0', autoAlpha: 1})
115  var interactive = false;
116  var swiper1 = new Swiper('.cpswiper', {
117    autoplay: 5000,
118    loop: true,
119    slidesPerView: 'auto',
120    centeredSlides: true,
121    loopedSlides: 5,
122    pagination: '.swiper-pagination',
123    paginationClickable: true,
124    onSlideChangeEnd: function (swiper) {
125      var index = swiper.activeIndex;
126      $('.swiper-slide').find('video').each(function (i, v) {
127        if (i != index) {
128          $(v).get(0).pause();
129        } else {
130          // if (interactive) {
131           // $(v).get(0).play();
132          // }
133          if($(".swiper-button .swiper-autoplay").hasClass("swiper-start")){
134            $(v).get(0).play();
135          }
136        }
137      });
138    }
139  });
140  swiper1.stopAutoplay();
141  $('.swiper-slide').find('video').each(function (i, v) {
142      $(v).get(0).addEventListener("ended", function () { //结束
143        $(v).get(0).pause();
144        swiper1.slideNext();
145    }, false);
146  });
147  // $(".cpswiper .swiper-autoplay").click(function () {
148  //   if ($(".swiper-start").length > 0) {
149  //     $(this).removeClass("swiper-start");
150  //     swiper1.stopAutoplay();
151  //   } else {
152  //     $(this).addClass("swiper-start");
153  //     swiper1.startAutoplay();
154  //   }
155  // });
156  // $(".cpswiper").click(function () {
157  //   interactive = true;
158  // });
159}
160function home3() {
161  let am = gsap.timeline({
162    scrollTrigger: {
163      trigger: '.home3',
164      start: 'top top',
165      end: 'bottom bottom',
166      onEnter: function() {
167        $('.home3 .imglist').addClass('imglist_active');
168      },
169      onEnterBack: function() {
170        $('.home3 .imglist').removeClass('imglist_active');
171      }
172    }
173  });
174}
175function home4() {
176  let am = gsap.timeline({
177    scrollTrigger: {
178      trigger: '.home4',
179      start: 'top top',
180      end: '+=340%',
181      scrub: true,
182      pin: true
183    }
184  });
185  am.to('.home4 .sty1', {
186    duration: 1
187  })
188  .to('.home4 .sty1 #home4_canvas1', {
189    autoAlpha: 0,
190    duration: 0.2
191  })
192  .to('.home4 .sty1', {
193    autoAlpha: 0,
194    duration: 0.2
195  }, 1.15)
196  .to('.home4 .sty2', {
197    autoAlpha: 1,
198    duration: 0.2
199  }, 1.25)
200  .to('.home4 .sty2 .text1', {
201    autoAlpha: 1,
202    scale: 1,
203    duration: 0.5
204  }).to('.home4 .sty2 .text1', {
205    autoAlpha: 0,
206    duration: 0.2
207  }).to('.home4 .sty2 .text2', {
208    autoAlpha: 1,
209    scale: 1,
210    duration: 0.5
211  });
212}
213
214// 初始化加载序列帧第一张图片
215function getFrameFirstImgInit(item) {
216  const img = new Image();
217  img.src = item.currentFrameImg(0);
218  item.frameImgData.push(img);
219  item.frameImgData[0].onload = () => {
220    render(item)
221  };
222}
223// 滚动一下后开始加载的资源
224function afterScrollOnceDownloadSources(item) {
225  ScrollTrigger.create({
226    trigger: '.home1',
227    start: "top+=10%",
228    onEnter: () => {
229      frameImgLoading(item);
230    }
231  })
232}
233// 序列帧图片渲染到canvas中
234function render(item) {
235  const context = item.canvasDom().getContext("2d");
236  context.clearRect(0, 0, item.canvasDom().width, item.canvasDom().height);
237  var imgwidth = 0;
238  var imgheight = 0;
239  var x = 0;
240  var y = 0;
241  if (winwidth / winheight < 1920 / 937) {
242    imgwidth = 1920 * winheight / 937;
243    imgheight = winheight;
244    x = (winwidth - imgwidth) / 2
245  } else {
246    imgwidth = winwidth;
247    imgheight = winwidth * 937 / 1920;
248    y = (winheight - imgheight) / 2;
249  }
250  context.drawImage(item.frameImgData[item.currentFrame.frame], x, y, imgwidth, imgheight);
251}
252// 序列帧图片加载
253function frameImgLoading(item) {
254  if (item.imgLoading) {
255    for (let i = 1; i < item.frameCount; i++) {
256      const img = new Image();
257      img.src = item.currentFrameImg(i);
258      item.frameImgData.push(img);
259    }
260    item.imgLoading = false;
261  }
262}
263function frameAnimation(item, triggerDom) {
264  let gsapmove = gsap.timeline({
265    scrollTrigger: {
266      trigger: triggerDom,
267      start: 'top top',
268      end: '+=340%',
269      scrub: true,
270      pin: true,
271    },
272  });
273  gsapmove.to(item[0].currentFrame, {
274    frame: item[0].frameCount - 1,
275    snap: "frame",
276    ease: "none",
277    onUpdate: () => {
278      render(item[0])
279    } //使用动画onUpdate而不是scrollTrigger的onUpdate
280  });
281  gsapmove.to(item[1].currentFrame, {
282    frame: item[1].frameCount - 1,
283    snap: "frame",
284    ease: "none",
285    onUpdate: () => {
286      render(item[1])
287    } //使用动画onUpdate而不是scrollTrigger的onUpdate
288  });
289}