扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >css如何制作不规则图片切换特效
  • 134

0
分享到

css如何制作不规则图片切换特效

2024-04-02 19:04:59 134人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关CSS如何制作不规则图片切换特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。  <!DOCTYPE html>

这篇文章将为大家详细讲解有关CSS如何制作不规则图片切换特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TweenMax不规则图片切换特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container"> </div>
<script src='js/delaunay.js'></script> 
<script src='js/TweenMax.js'></script> 
<script>
 
const TWO_PI = Math.PI * 2;
 
var images = [], 
    imageIndex = 0;
 
var image,
    imageWidth = 768,
    imageHeight = 485;
 
var vertices = [],
    indices = [],
    prevfrag = [],
    fragments = [];
 
var margin = 50;
 
var container = document.getElementById('container');
 
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
 
window.onload = function() {
    TweenMax.set(container, {perspective:500});
 
    // images from Http://www.hdwallpapers.in
    var urls = [
            'images/1.jpg',
            'images/2.jpg',
            'images/3.jpg',
            'images/4.jpg'
        ],
        image,
        loaded = 0;
    // very quick and dirty hack to load and display the first image asap
    images[0] = image = new Image();
        image.onload = function() {
            if (++loaded === 1) {
                
                for (var i = 1; i < 4; i++) {
                    images[i] = image = new Image();
 
                    image.src = urls[i];
                } 
                placeImage();
            }
        };
        image.src = urls[0]; 
};
 
function placeImage(transitionIn) {
    image = images[imageIndex];
 
    if (++imageIndex === images.length) imageIndex = 0;
  
    var num = Math.random();
    if(num < .25) {
      image.direction = "left";
    } else if(num < .5) {
      image.direction = "top";
    } else if(num < .75) {
      image.direction = "bottom";
    } else {
      image.direction = "right";
    }
 
    container.appendChild(image);
    image.style.opacity = 0;
  
    if (transitionIn !== false) {
        triangulateIn();
    }
}
 
function triangulateIn(event) {
    var box = image.getBoundinGClientRect(),
        top = box.top,
        left = box.left;
  
    if(image.direction == "left") {
      clickPosition[0] = 0; 
      clickPosition[1] = imageHeight / 2;
    } else if(image.direction == "top") {
      clickPosition[0] = imageWidth / 2;
      clickPosition[1] = 0;
    } else if(image.direction == "bottom") {
      clickPosition[0] = imageWidth / 2;
      clickPosition[1] = imageHeight;
    } else if(image.direction == "right") {
      clickPosition[0] = imageWidth;
      clickPosition[1] = imageHeight / 2;
    } 
    
 
    triangulate();
    build();
}
 
function triangulate() {
    for(var i = 0; i < 40; i++) {      
      x = -margin + Math.random() * (imageWidth + margin * 2);
      y = -margin + Math.random() * (imageHeight + margin * 2);
      vertices.push([x, y]);
    }
    vertices.push([0,0]);
    vertices.push([imageWidth,0]);
    vertices.push([imageWidth, imageHeight]);
    vertices.push([0, imageHeight]);
  
    vertices.forEach(function(v) {
        v[0] = clamp(v[0], 0, imageWidth);
        v[1] = clamp(v[1], 0, imageHeight);
    });
  
    indices = Delaunay.triangulate(vertices);
}
 
function build() {
    var p0, p1, p2,
        fragment;
 
    var tl0 = new TimelineMax({onComplete:buildCompleteHandler});
 
    for (var i = 0; i < indices.length; i += 3) {
        p0 = vertices[indices[i + 0]];
        p1 = vertices[indices[i + 1]];
        p2 = vertices[indices[i + 2]];
 
        fragment = new Fragment(p0, p1, p2);
 
        var dx = fragment.centroid[0] - clickPosition[0],
            dy = fragment.centroid[1] - clickPosition[1],
            d = Math.sqrt(dx * dx + dy * dy),
            rx = 30 * sign(dy),
            ry = 90 * -sign(dx),
            delay = d * 0.003 * randomRange(0.9, 1.1);
        fragment.canvas.style.zIndex = Math.floor(d).toString();
 
        var tl1 = new TimelineMax(); 
 
        if(image.direction == "left") {
          rx = Math.abs(rx); 
          ry = 0;          
        } else if(image.direction == "top") {
          rx = 0;
          ry = Math.abs(ry);
        } else if(image.direction == "bottom") {
          rx = 0;
          ry = - Math.abs(ry);
        } else if(image.direction == "right") {
          rx = - Math.abs(rx);
          ry = 0;
        } 
        
        tl1.from(fragment.canvas, 1, {
              z:-50,
              rotationX:rx,
              rotationY:ry,
              scaleX:0,
              scaleY:0,
              ease:Cubic.easeIn
         });
        tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);
      
        tl0.insert(tl1, delay);
 
        fragments.push(fragment);
        container.appendChild(fragment.canvas);
    }
}
 
function buildCompleteHandler() {
    // add pooling?
    image.style.opacity = 1;
    image.addEventListener('transitionend', function catchTrans() {
      fragments.forEach(function(f) {
          container.removeChild(f.canvas);
      });
 
      fragments.length = 0;
      vertices.length = 0;
      indices.length = 0;
 
      placeImage();
      this.removeEventListener('transitionend',catchTrans,false);
    }, false);
    
}
 
//////////////
// MATH UTILS
//////////////
 
function randomRange(min, max) {
    return min + (max - min) * Math.random();
}
 
function clamp(x, min, max) {
    return x < min ? min : (x > max ? max : x);
}
 
function sign(x) {
    return x < 0 ? -1 : 1;
}
 
//////////////
// FRAGMENT
//////////////
 
Fragment = function(v0, v1, v2) {
    this.v0 = v0;
    this.v1 = v1;
    this.v2 = v2;
 
    this.computeBoundingBox();
    this.computeCentroid();
    this.createCanvas();
    this.clip();
};
Fragment.prototype = {
    computeBoundingBox:function() {
        var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),
            xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),
            yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),
            yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);
 
         this.box = {
            x:Math.round(xMin),
            y:Math.round(yMin),
            w:Math.round(xMax - xMin),
            h:Math.round(yMax - yMin)
        };
 
    },
    computeCentroid:function() {
        var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
            y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
 
        this.centroid = [x, y];
    },
    createCanvas:function() {
        this.canvas = document.createElement('canvas');
        this.canvas.width = this.box.w;
        this.canvas.height = this.box.h;
        this.canvas.style.width = this.box.w + 'px';
        this.canvas.style.height = this.box.h + 'px';
        this.canvas.style.left = this.box.x + 'px';
        this.canvas.style.top = this.box.y + 'px';
        this.ctx = this.canvas.getContext('2d');
    },
    clip:function() {
        this.ctx.save();
        this.ctx.translate(-this.box.x, -this.box.y);
        this.ctx.beginPath();
        this.ctx.moveTo(this.v0[0], this.v0[1]);
        this.ctx.lineTo(this.v1[0], this.v1[1]);
        this.ctx.lineTo(this.v2[0], this.v2[1]);
        this.ctx.closePath();
        this.ctx.clip();
        this.ctx.drawImage(image, 0, 0);
        this.ctx.restore();
    }
};//@ sourceURL=pen.js
</script>
 
<div style="text-align:center;margin:10px 0; font:nORMal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

关于“css如何制作不规则图片切换特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

--结束END--

本文标题: css如何制作不规则图片切换特效

本文链接: https://lsjlt.com/news/89483.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css如何制作不规则图片切换特效
    这篇文章将为大家详细讲解有关css如何制作不规则图片切换特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。  <!DOCTYPE html>...
    99+
    2024-04-02
  • css如何制作全屏幻灯片切换动画
    这篇文章主要介绍了css如何制作全屏幻灯片切换动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。<!DOCTYPE html>&...
    99+
    2024-04-02
  • 如何使用CSS制作镂空效果的图片
    在网页设计中，如何制作出独特、有吸引力的效果是一个不断探索的问题。其中，镂空效果是一种常见而又常用的技巧之一。通过使用CSS，我们可以实现为图片添加镂空的效果，从而提升页面的美观程度和吸引力。下面，我们将详细介绍如何使用CSS制作镂空效果的...
    99+
    2023-10-21
    CSS 图片 镂空效果
  • CSS3如何制作幻灯片切换动画
    这篇文章将为大家详细讲解有关CSS3如何制作幻灯片切换动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。<!DOCTYPE html> <ht...
    99+
    2024-04-02
  • 全屏js标签导航控制图片切换特效怎么实现
    这篇文章主要介绍“全屏js标签导航控制图片切换特效怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“全屏js标签导航控制图片切换特效怎么实现”文章能帮助大家解决...
    99+
    2024-04-02
  • jQuery如何实现图片切换动画效果
    这篇文章主要为大家展示了“jQuery如何实现图片切换动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现图片切换动画效果”这篇文章吧。效...
    99+
    2024-04-02
  • CSS3如何实现图片模糊切换效果
    这篇文章将为大家详细讲解有关CSS3如何实现图片模糊切换效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。　　<!DOCTYPE html> &nb...
    99+
    2024-04-02
  • jQuery如何实现点击替换图片特效
    这篇文章将为大家详细讲解有关jQuery如何实现点击替换图片特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　1，起因 　　最近在工作中要实现自定义式的radi...
    99+
    2024-04-02
  • dreamweaver如何制作鼠标经过图片变换的效果
    这篇文章将为大家详细讲解有关dreamweaver如何制作鼠标经过图片变换的效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。方法如下我们先打开我们的软件新建一个html的文件我们在上边找到插入选项找到鼠...
    99+
    2023-06-08
  • 如何使用CSS制作页面切换动画
    这篇文章主要讲解了“如何使用CSS制作页面切换动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用CSS制作页面切换动画”吧！今天我们想与大家分享一组...
    99+
    2024-04-02
  • CSS3如何制作轮播图切割效果
    这篇文章主要介绍CSS3如何制作轮播图切割效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！<!DOCTYPE html><html lang="en&q...
    99+
    2024-04-02
  • 如何使用CSS制作交替渐变效果的背景图片
    背景图片是网页设计中不可或缺的一部分，能够增添页面的美感和吸引力。而使用CSS来实现背景图片的效果也是一种常见的做法。本文将介绍如何使用CSS来制作交替渐变效果的背景图片，并提供具体的代码示例。一、准备工作在开始之前，我们需要准备一些基本的...
    99+
    2023-10-21
    CSS渐变背景 交替效果 背景图片编程关键词
  • CSS中如何引用svg图片支持动态切换颜色
    这篇文章将为大家详细讲解有关CSS中如何引用svg图片支持动态切换颜色，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。当我们添加一张svg图片显示时，react提示找不到文件。我们可以在全局文件global...
    99+
    2023-06-08
  • ps如何制作图片边缘渐隐效果
    这篇文章主要讲解了“ps如何制作图片边缘渐隐效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ps如何制作图片边缘渐隐效果”吧！ps图片边缘渐隐效果制作教程：首先我们导入想修改的图片，并选择...
    99+
    2023-07-02
  • 如何使用CSS制作无缝滚动的图片轮播的效果
    随着互联网的发展和人们对美观性的追求，图片轮播已经成为网页设计中常见的元素之一。无缝滚动的图片轮播效果能够吸引用户的注意力，增加页面的互动性和视觉效果。在本文中，我们将介绍如何使用CSS来实现无缝滚动的图片轮播效果，并提供具体的代码示例。首...
    99+
    2023-10-21
    图片轮播 CSS 无缝滚动
  • 如何使用jquery的attr方法实现图片切换效果
    这篇文章主要介绍如何使用jquery的attr方法实现图片切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！利用jquery的attr方法实现如下简单的图片切换效果代码如下：&l...
    99+
    2024-04-02
  • 如何使用CSS制作无缝滚动的图片展示栏的效果
    随着互联网的发展，图片展示成为了很多网站设计中必不可少的一部分。而无缝滚动的图片展示栏效果，更是能够吸引用户目光，提升网站的视觉效果和用户体验。在本文中，我将向您介绍如何使用CSS来实现无缝滚动的图片展示栏效果，并提供具体的代码示例。实现无...
    99+
    2023-10-21
    图片展示 无缝滚动 关键词：CSS
  • 如何使用jQuery制作Web图片轮播效果
    本篇内容主要讲解“如何使用jQuery制作Web图片轮播效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用jQuery制作Web图片轮播效果”吧!jquery提供了丰富的选择器以及用来挑...
    99+
    2023-07-04
  • Dreamweaver如何制作手风琴图片展示效果
    这篇文章主要介绍了Dreamweaver如何制作手风琴图片展示效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。打开Dreamweaver cc  2014软件，选...
    99+
    2023-06-08
  • CSS新属性如何实现特殊的图片显示效果
    这篇文章主要介绍了CSS新属性如何实现特殊的图片显示效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1 概述1.1 前言使用一个或多个图像...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作