jQuery小型浪漫婚礼祝福_其它特效_动画效果_场景_祝福

我们设置了7个不同的浪漫小场景,由一步步动画完成。

淘建站为您提供更多_其它特效_动画效果_场景_祝福，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 193 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：其它特效 > 动画效果难易程度：中级

HTML

<div class="box">
    <!-- 场景一 -->
    <div class="first-box">
        <div class="first-horn">
            <img src="images/first_horn.jpg" />
        </div>
        <div class="first-txt">
            <div class="txt1">
                <img src="images/first_txt1.jpg" />
            </div>
            <div class="txt2">
                <img src="images/first_txt2.jpg" />
            </div>
        </div>
    </div>
    <!-- 场景二 -->
    <div class="second-box">
        <div class="second-people">
            <img src="images/second_people.jpg" />
        </div>
        <div class="second-txt">
            <img src="images/second_txt.jpg" />
        </div>
    </div>
.......
</div>

送上祝福

<div class="mask"></div>
<div class="pop-box">
    <h1>送上祝福语</h1>
    <textarea id="write">写上您的祝福吧~

JS定义变量

var $firstHorn = $(".first-horn"),
/* 场景一左边喇叭 */
$firstTxt = $(".first-txt"),
/* 场景一文字div */
firstTxtWidth = $firstTxt.width(),
/* 文字div的宽度 */
$secondBox = $(".second-box"),
/* 场景二box */
$secondPeople = $(".second-people"),
/* 场景二左边人物 */
$secondTxt = $(".second-txt"),
/* 场景二右边文字 */
$threeBox = $(".three-box"),
/* 场景三box */
$threeImg = $(".three-img"),
/* 场景三图片 */
$foreBox = $(".fore-box"),
/* 场景四box */
$foreImg = $(".fore-img"),
/* 场景四图片 */
$fiveBox = $(".five-box"),
/* 场景五box */
$fiveImg = $(".five-img"),
/* 场景五中间图片 */
$uEnter = $(".u-enter"),
/* 进入婚礼按钮 */
$sixBox = $(".six-box"),
/* 场景六box */
$sixDiv = $sixBox.find("div"),
/* 场景六里面小块div */
sixDivWidth = $sixDiv.width(),
/* 场景六里面小块div的宽度 */
sixDivHeight = $sixDiv.height(),
/* 场景六里面小块div的高度 */
sixBoxWidth = $sixBox.width(),
/* 场景六宽度 */
sixBoxHeight = $sixBox.height(),
/* 场景六高度 */
$sevenBox = $(".seven-box");

场景一

$firstHorn.animate({
    left: 0
},
1000);
$firstTxt.animate({
    left: "435px"
},
function() {
    $firstTxt.fadeIn(1000);
    showTxt($firstTxt.find("div:eq(0)"));
    /* 显示第一行文字 */
    setTimeout(function() {
        showTxt($firstTxt.find("div:eq(1)"));
    },
    3000);
    /* 显示第二行文字 */
    setTimeout(scene2, 7000);
    /* 进入场景二 */
});

场景二

function scene2() {
    $firstTxt.fadeOut();
    $firstHorn.animate({
        left: "-422px"
    },
    function() {
        $secondBox.show();
        $secondPeople.animate({
            left: "0"
        });
        $secondTxt.animate({
            left: "230px"
        },
        function() {
            $secondTxt.fadeIn(1000);
            setTimeout(scene3, 2000);
            /* 进入场景三 */
        });
    });
}

其他5个场景请看js/index.js