图片背景剪辑

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="container">
    
    <div class="moon">
        <svg class="moon__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 611 611">
            <defs>
                <clipPath id="clip-path" class="moon__svg-rects" >
                    <rect id="top" width="611" height="72" />
                    <rect y="77" width="611" height="72" />
                    <rect y="154" width="611" height="72" />
                    <rect y="231" width="611" height="72" />
                    <rect y="308" width="611" height="72" />
                    <rect y="385" width="611" height="72" />
                    <rect y="462" width="611" height="72" />
                    <rect y="539" width="611" height="72" />
                </clipPath>
            </defs>
            <g clip-path="url(#clip-path)">
                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="http://www.jq22.com/tp/6372184713439807959740518.jpg"  />
            </g>
            <g class="moon__txt-bg" fill="#D5CEC6" transform="translate(-1 0)">
                <rect y="229" width="612" height="76" />
                <rect y="306" width="612" height="76" />
                <rect y="383" width="612" height="76" />
                <rect y="460" width="612" height="76" />
                <rect y="537" width="612" height="76" />
            </g>
            <clipPath id="moon_txt-mask" class="moon__txt" transform="translate(-2 0)">
                <text x="0" y="303">
                    <tspan>13</tspan>
                </text>
                <text x="0" y="380">
                    <tspan>MINUTES</tspan>
                </text>
                <text x="1" y="457">
                    <tspan>TO</tspan>
                </text>
                <text x="1" y="534">
                    <tspan>THE</tspan>
                </text>
                <text x="0" y="611">
                    <tspan>MOON</tspan>
                </text>
            </clipPath>
            <g clip-path="url(#moon_txt-mask)">
                <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)" xlink:href="http://www.jq22.com/tp/6372184713439807959740518.jpg"  />
                <rect class="moon__txt-overlay" width="611" height="611"></rect>
            </g>
        </svg>
    </div>
    <div class="container__base"></div>
</div>

css

html {
  box-sizing: border-box;font-family: Arial;
	font-weight: bolder;
}

*, *:before, *:after {
  box-sizing: inherit; 
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background-color: black;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.container {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  position: relative;
  max-width: 679px;
  max-height: 679px;
  min-width: 679px;
  min-height: 679px;
  background: black;
  cursor: pointer;
  visibility: hidden;
}

.container__base {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #D5CEC6;
}

.moon {
  position: relative;
  z-index: 2;
  width: 611px;
  height: 611px;
}

.moon__svg {
  width: 611px;
  height: 611px;
}

.moon__txt {
  font-family: "MonumentExtended-Ultrabold", sans-serif;
  font-size: 103px;
  line-height: 1;
  fill: black;
  letter-spacing: 2.1px;
}

.moon__txt-overlay {
  fill: rgba(0, 0, 0, 0.6);
}

JavaScript

console.clear();

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const container = select('.container');
let wArray = [161, 614, 189, 278, 404],
    tl;

function animate() {
    tl = gsap.timeline( { 
        delay: 0.5,
        repeat: -1, 
        defaults: {
            ease: "expo.inOut",
            duration: 2
        }
    });
    
    tl.from('.container__base', {
        scaleX: 0,
        duration: 2,
        transformOrigin: "top right",
        // ease: "expo"
    })
    
    .from('.moon__svg-rects rect', {
        scaleX: 0,
        stagger: 0.07,
        duration: 3,
        ease: "expo"
    }, "-=1.0")
    
    .to('.moon__txt-bg rect', {
        stagger: 0.14,
        scaleX: 1
    }, "-=2.5")
    
    .from('text', {
        x: function(i) {
            return -wArray[i]
        },
        ease: 'power4',
        stagger: 0.14
    }, "-=1.6")
    
    .from('.moon__img', {
        x: "+=200",
        ease: 'power4',
        duration: 15
    }, 0);
}

function init() {
    gsap.set(container, { autoAlpha: 1 });
    
    gsap.set('.moon__txt-bg rect', { 
         width: function(i) {
            return wArray[i]
        },
        scaleX: 0
    })
    
    animate();
    
    container.onclick = () => {
        tl.restart();
    }

}

function resize() {
	let vw = window.innerWidth;
    let vh = window.innerHeight;
	let wh = container.offsetWidth;
	let scaleFactor = 1;
    
    if(vw/vh >= 1) {
        scaleFactor = vh/wh
    }
    else {
        scaleFactor = vw/wh
    }
    
	if(scaleFactor<1) {
		gsap.set(container, { scale: scaleFactor });
	}
	else {
        gsap.set(container, { scale: 1 });
    }
}

window.onresize = resize;

window.onload = () => {
	init();
    resize();
    // GSDevTools.create();
};

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片背景剪辑-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号