usound-official-website
/
cases.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>案例</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./static/css/animate.min.css">
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/swiper.css">
    <link rel="stylesheet" href="./static/css/cases.css">
    <link rel="stylesheet" href="./static/css/locomotive-scroll.css">
    <style>
        .cursor{
            position: fixed;
            z-index: 9999;
            width: 8rem;
            height: 8rem;
            pointer-events: none;
        }
        .cursor .jump{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
            background: #02C4D0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0);
            transition-timing-function: cubic-bezier(0.135, 0.9, 0.15, 1);
            transition-duration: .4s;

        }
        .cursor .jump.on{
            transform: scale(1);
        }
        .cursor img{
            width: 3rem;
        }
    </style>
</head>

<body>
    <div class="home">

        <div class="cursor" data-speed="8">
            <div class="jump">
                <img src="./static/images/cursor.png" alt="">
            </div>
        </div>

        <div class="header hasBg">
            <div class="box">
                <a href="./index.html" class="logo">
                    <img src="./static/images/logo-white.png" alt="">
                </a>
                <div class="links">
                    <div class="item">
                        <a href="./index.html" class="a1">首页</a>
                    </div>
                    <div class="item">
                        <a href="./about.html" class="a1">关于</a>
                    </div>
                    <div class="item">
                        <a href="./cases.html" class="a1 active">案例</a>
                    </div>
                    <div class="item">
                        <a href="./service.html" class="a1">服务</a>
                    </div>
                    <div class="item">
                        <a href="./ideas.html" class="a1">观点</a>
                    </div>
                    <div class="item">
                        <a href="./contact.html" class="a1">联系</a>
                    </div>
                </div>
                <div class="rb">
                    <div class="lan">
                        <a href="">ENG</a>
                        <p>中文</p>
                     </div>
                    <a class="contact each_btn">
                        <div class="text">
                            <p>定制专属方案</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="pheader">
            <div class="menu">
                <a href="./index.html" target="_self" class="animated fadeInLeft">
                    <img src="./static/images/logo.png" alt="">
                </a>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="item">
                <a href="./about.html">关于</a>
            </div>
            <div class="item">
                <a href="./cases.html">案例</a>
            </div>
            <div class="item">
                <a href="./service.html">服务</a>
            </div>
            <div class="item">
                <a href="./ideas.html">观点</a>
            </div>
            <div class="item">
                <a href="./contact.html">联系</a>
            </div>
            <div class="bottom">
               <div class="box1">
                <div class="p1">数字营销全面诊断，定制专属增长方案</div>
                <a class="contact" href="./contact.html" >
                    定制专属方案
                </a>
               </div>
               <div class="box2">
                 <p class="p1">业务咨询</p>
                 <a href="tel:15257713337">
                    152-5771-3337
                 </a>
               </div>

            </div>

        </div>


        <div data-scroll-container>

            <div class="section3" id="scence3">
                <div class="dt">
                    <div class="t wow fadeInUp">
                        <p>
                            那些因我们助力<br>
                            而发生改变的品牌
                        </p>
                    </div>
                    <div class="des wow fadeInUp">
                        <p>我们的创新思维永无极限</p>
                        <p>不断探索动态和可持续的设计方式</p>
                        <p>在密切与品牌合作，创造独特而难忘的数字体验</p>
                    </div>
                </div>
                <div class="list">
                    <a href="./caseInfo.html" class="item">
                        <div class="pic">
                            <img src="./static/images/cases1.png" alt="">
                            <div class="hover">
                                <svg class="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0"
                                     viewBox="0 0 100 100">
                                    <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                </svg>
                                <div class="tags">
                                    <p>网站建设</p>
                                    <p>品牌策划</p>
                                    <p>SEO</p>
                                </div>
                            </div>
                        </div>
                        <div class="tag">
                            <p class="time">2023</p>
                            <span class="dot"></span>
                            <p class="name">万科丨南头古城</p>
                        </div>
                        <div class="title">帮助全球500强企业突破数字营销瓶颈，实现获客量大幅增长</div>
                    </a>
                    <a href="./caseInfo.html" class="item">
                        <div class="pic">
                            <img src="./static/images/case2.png" alt="">
                            <div class="hover">
                                <svg class="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0"
                                     viewBox="0 0 100 100">
                                    <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                </svg>
                                <div class="tags">
                                    <p>网站建设</p>
                                    <p>品牌策划</p>
                                    <p>SEO</p>
                                </div>
                            </div>
                        </div>
                        <div class="tag">
                            <p class="time">2023</p>
                            <span class="dot"></span>
                            <p class="name">沃尔玛</p>
                        </div>
                        <div class="title">现代城市与古城新旧文化交融的景区官网</div>
                    </a>
                    <a href="./caseInfo.html" class="item">
                        <div class="pic">
                            <img src="./static/images/case3.png" alt="">
                            <div class="hover">
                                <svg class="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0"
                                     viewBox="0 0 100 100">
                                    <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                </svg>
                                <div class="tags">
                                    <p>网站建设</p>
                                    <p>品牌策划</p>
                                    <p>SEO</p>
                                </div>
                            </div>
                        </div>
                        <div class="tag">
                            <p class="time">2023</p>
                            <span class="dot"></span>
                            <p class="name">咨询行业</p>
                        </div>
                        <div class="title">现代城市与古城新旧文化交融的景区官网</div>
                    </a>
                    <a href="./caseInfo.html" class="item">
                        <div class="pic">
                            <img src="./static/images/cases1.png" alt="">
                            <div class="hover">
                                <svg class="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0"
                                     viewBox="0 0 100 100">
                                    <path d="M98.1 0h1.9v51.9h-1.9c0-27.6-22.4-50-50-50V0h50z"></path>
                                </svg>
                                <div class="tags">
                                    <p>网站建设</p>
                                    <p>品牌策划</p>
                                    <p>SEO</p>
                                </div>
                            </div>
                        </div>
                        <div class="tag">
                            <p class="time">2023</p>
                            <span class="dot"></span>
                            <p class="name">咨询行业</p>
                        </div>
                        <div class="title">帮助全球500强企业突破数字营销瓶颈，实现获客量大幅增长</div>
                    </a>
                </div>
                <a href="" class="btn layer" data-depth=".2">
                    <img src="./static/images/circle.png" alt="">
                    <p>加载更多</p>
                </a>
            </div>


            <div class="section5">
                <div class="bg">
                    <img src="./static/images/b.png" alt="">
                </div>
                <div class="text">
                    来一场关于你的项目讨论会？
                </div>
                <a href="./contact.html" class="btn">
                    <img class="ball" src="./static/images/ball.png" alt="">
                    <div class="en">
                        <img src="./static/images/en.png" alt="">
                    </div>
                    <p>
                        立即<br>
                        预约
                    </p>
                    <img class="icon" src="./static/images/jt3.png" alt="">
                </a>
            </div>

            <div class="foot">
                <div class="dom1">
                    <div class="d1">
                        <div class="dbox">
                            <div class="dl">
                                <div class="logo">
                                    <img src="./static/images/logo.png" alt="">
                                </div>
                                <div class="st">数字化策略与营销专家</div>
                                <div class="sr">
                                    <input type="text" placeholder="输入手机号,即刻体验">
                                    <div class="btn">确定</div>
                                </div>
                            </div>
                            <div class="dc">
                                <a href="">关于</a>
                                <a href="">案例</a>
                                <a href="">服务</a>
                                <a href="">观点</a>
                                <a href="">联系</a>
                            </div>
                            <div class="dr">
                                <div class="item">
                                    <div class="t">官网</div>
                                    <span></span>
                                    <a href="">
                                        企业官网定制开发
                                    </a>
                                    <div class="icon">
                                        <img src="./static/images/jt.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="t">产品</div>
                                    <span></span>
                                    <a href="">
                                        web/app/小程序开发
                                    </a>
                                    <div class="icon">
                                        <img src="./static/images/jt.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="t">转化</div>
                                    <span></span>
                                    <a href="">
                                        sem效果提升
                                    </a>
                                    <div class="icon">
                                        <img src="./static/images/jt.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="t">流量</div>
                                    <span></span>
                                    <a href="">
                                        SEO排名优化
                                    </a>
                                    <div class="icon">
                                        <img src="./static/images/jt.png" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="t">传播</div>
                                    <span></span>
                                    <a href="">
                                        SEO排名优化
                                    </a>
                                    <div class="icon">
                                        <img src="./static/images/jt.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dlink">
                            <p>友情链接</p>
                            <div class="as">
                                <a href="">数阔云听cem</a>
                                <a href="">企业直播</a>
                                <a href="">营销自动化</a>
                            </div>
                        </div>
                    </div>
                    <div class="d2">
                        <div class="dbox">
                            <div class="t1">每个品牌都需要精心策划</div>
                            <div class="t2">点击下方按钮，立即免费获取</div>
                            <a class="btn each_btn" href="./contact.html">
                                <img src="./static/images/jt2.png" alt="">
                                <div class="text">
                                    <p>免费获取</p>
                                </div>
                            </a>
                            <div class="pic">
                                <img class="pic1" src="./static/images/fbg1.png" alt="">
                                <div class="pic2">
                                    <img src="./static/images/fp.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="dInfo">
                            <div class="t">业务咨询</div>
                            <div class="dc">
                                <div class="phone">152-5771-3337</div>
                                <div class="wxchat">
                                    <p>微信咨询</p>
                                    <div class="icon">
                                        <img src="./static/images/wx.png" alt="">
                                    </div>
                                    <div class="code">
                                        <img src="./static/images/code.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <a class="email" href="mailto:627603421@qq.com" target="_blank">
                                627603421@qq.com
                            </a>
                        </div>
                    </div>
                </div>
                <div class="dom2">
                    <p>© 2024 优升网络科技 Rights Reserved.</p>
                    <a class="bei" href="https://beian.miit.gov.cn/" target="_blank">滇ICP备2022001335号</a>
                    <div class="links">
                        <a href="">网站声明</a>
                        <span></span>
                        <a href="">隐私政策</a>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <script src="./static/js/jquery-3.6.1.min.js"></script>
    <script src="./static/js/swiper.js"></script>
    <script src="./static/js/common.js"></script>
    <script src="./static/js/wow.min.js"></script>
    <script src="./static/js/countUp.js"></script>
    <script src="./static/js/gsap.min.js"></script>
    <script src="./static/js/jquery.parallax.js"></script>
    <script src="./static/js/ScrollTrigger.min.js"></script>
    <script src="./static/js/locomotive-scroll.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        // new WOW().init();

        $('#scence3').parallax();

        var scrollNum = 0;
        var speed = scrollNum * 0.5
        $('.home .section3 .list .item .pic').each(function (i,e) {
            var off = ($(e).position().top + $('.section3').position().top) - document.documentElement.clientHeight
            var data_ = (scrollNum-off)*+0.2
            $(e).find('img').css('transform', 'translate3d(0px,' + data_ + 'px,0px)')
        })

        let locomotive,scrollTop;
        window.addEventListener('load',function () {
            if (document.querySelector('[data-scroll-container]')) {
                locomotive = new LocomotiveScroll({el: document.querySelector('[data-scroll-container]'), smooth: true, lerp: 0.09,});
                locomotive.on('scroll', function (position) {
                    WOW.init();
                    scrollTop = position.scroll.y;
                    var speed = scrollTop * 0.5
                    $('.home .section3 .list .item .pic').each(function (i,e) {
                        var off = ($(e).position().top + $('.section3').position().top) - document.documentElement.clientHeight
                        if (scrollTop >= off) {
                            var data_ = (scrollTop-off)*+0.2
                            $(e).find('img').css('transform', 'translate3d(0px,' + data_ + 'px,0px)')
                        }
                    })
                });
            }
        })


        !function () {
            let d = document.querySelector(".cursor"),
                speed = document.querySelector('.cursor').getAttribute('data-speed')
            if (speed === null) {
                speed = 0.9
            }else {
                speed = speed / 10
            }
            function S() {
                d && function (e) {
                    gsap.set(e, {
                        xPercent: -50,
                        yPercent: -50
                    });
                    let t = e,
                        r = {
                            x: window.innerWidth / 2,
                            y: window.innerHeight / 2
                        },
                        o = {
                            x: r.x,
                            y: r.y
                        },
                        a = gsap.quickSetter(t, "x", "px"),
                        n = gsap.quickSetter(t, "y", "px");
                    document.body.addEventListener("mousemove", e => {
                        o.x = e.x, o.y = e.y
                    }), gsap.ticker.add(() => {
                        const e = 1 - Math.pow(speed, gsap.ticker.deltaRatio());
                        r.x += (o.x - r.x) * e, r.y += (o.y - r.y) * e, a(r.x), n(r.y)
                    })
                }(d)
            }
            window.addEventListener("DOMContentLoaded", () => {
                S();
            })
        }();

        $('.home .section3 .list .item').hover(function () {
            $('.cursor .jump').addClass('on')
        },function () {
            $('.cursor .jump').removeClass('on')
        })

        $('.each_btn').each(function (i,e) {
            var text = $(e).find('p').text()
            var split = text.split('')
            var html = '';
            for (let j = 0; j < split.length; j++) {
                html += `<div>${split[j]}</div>`
            }
            $(e).find('.text').html(html)

            $(e).find('.text').append('<div class="inset">'+ html +'</div>')

            $(e).hover(function () {
                $(e).find('.text > div:not(.inset)').each(function (i,e) {
                    var delay = i*0.05
                    $(e).css('transition-delay',delay + 's')
                })
                $(e).find('.text .inset div').each(function (index,ele) {
                    var delay2 = (($(e).find('.text > div:not(.inset)').length*0.05)) + (index*0.05)
                    $(ele).css('transition-delay',delay2 + 's')
                })
                $(e).find('.text div:not(.inset)').css('opacity','0')
                $(e).find('.text .inset div').css('opacity','1')
            },function () {

                $(e).find('.text > div:not(.inset)').get().reverse().forEach(function (el, i) {
                    var delay = (($(e).find('.text > div:not(.inset)').length*0.05)) + (i * 0.05)
                    $(el).css('transition-delay', delay + 's');
                });

                $(e).find('.text .inset div').get().reverse().forEach(function (el, i) {
                    var delay2 = i*0.05
                    $(el).css('transition-delay',delay2 + 's')
                })

                $(e).find('.text div:not(.inset)').css('opacity','1')
                $(e).find('.text .inset div').css('opacity','0')

            })

        })

    </script>
</body>

</html>