HTML5/GSAP 一款旅行类移动网页应用模板

Travel App

html5, travel

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2760
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var clicked = false;

$('figcaption').on('click', function() {
        var index = $(this).parents('.item').index();
        var _parent = $(this).parents('.item').height();

if (!clicked) {
            clicked = true;

$(this).addClass('in');

TweenLite.to($('.wrapper'), 0.7, {
                ease: Power4.easeOut,
                y: -(index * _parent)
            });

TweenLite.to($('#informations'), 0.7, {
                ease: Power4.easeOut,
                y: 0
            });

$('.weather, .loved').addClass('in');

} else {
            clicked = false;

TweenLite.to($('.wrapper'), 0.7, {
                ease: Power4.easeIn,
                y: 0,
                delay: 0.5
            });

$(this).removeClass('in');

$('.weather, .loved').removeClass('in');

TweenLite.to($('#informations'), 0.7, {
                ease: Power4.easeIn,
                y: $('.container').height(),
                delay: 0.5
            });
        }

});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
body {
    background: #202020;
    font-family: 'Droid Sans', sans-serif;
}
.container {
    position: relative;
    margin: 0 auto;
    width: 375px;
    height: 667px;
    background: #202020;
    border: 1px solid #000;
    overflow: hidden;
}
.container .header {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    z-index: 10;
}
.container .header #menu {
    width: 20px;
    height: 2px;
    border-radius: 50px;
    margin: 0 0 0 0;
    float: left;
}
.container .header #menu:before,
.container .header #menu:after {
    content: '';
    width: 20px;
    height: 2px;
    background: white;
    float: left;
    margin: 3px 0 0 0;
}
.container .header #menu span {
    background: white;
    width: 100%;
    height: 2px;
    text-indent: -999em;
    float: left;
    margin: 3px 0 0 0;
}
.container .wrapper {
    width: 100%;
    float: left;
    height: 100%;
    background: blue;
    position: relative;
}
.container .wrapper .item {
    position: relative;
    width: 100%;
    float: left;
    height: calc(100% / 3);
    background: white;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container .wrapper .item figure {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.container .wrapper .item figure img {
    width: 100%;
    height: 100%;
    float: left;
}
.container .wrapper .item figure figcaption {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    padding: 48% 0 0 2.5%;
    float: left;
    transition: background 0.2s 0s ease-in, padding 0.5s 0.3s ease-in;
    color: white;
    font-size: 14px;
    text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.5);
}
.container .wrapper .item figure figcaption.in {
    padding: 42% 0 0 2.5%;
}
.container .wrapper .item figure figcaption:hover {
    background: rgba(0, 0, 0, 0.3);
}
.container #informations {
    width: 100%;
    height: 72%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: white;
    transform: translateY(150vh);
}
.container #informations .weather {
    position: absolute;
    left: 2.5%;
    top: -120px;
    color: white;
    transition: opacity 0.5s 0.3s ease-in, top 0.5s 0.3s ease-in;
    opacity: 0;
}
.container #informations .weather.in {
    opacity: 1;
    top: -130px;
}
.container #informations .weather p {
    font-size: 12px;
}
.container #informations .weather span {
    font-size: 16px;
}
.container #informations .weather i {
    font-size: 20px;
}
.container #informations .loved {
    position: absolute;
    right: 10px;
    top: -25px;
    width: 50px;
    height: 50px;
    background: #E63946;
    border-radius: 100%;
    text-align: center;
    transition: all 0.2s 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform: scale(0);
}
.container #informations .loved.in {
    transform: scale(1);
}
.container #informations .loved i {
    font-size: 20px;
    margin-top: 16px;
    color: #efefef;
    opacity: 0.3;
}
.container #informations .flight {
    width: 100%;
    float: left;
    margin: 40px 0 0 0;
}
.container #informations .flight h4 {
    width: 86%;
    margin: 0 7% 3% 7%;
    font-size: 14px;
    font-weight: bold;
    color: #2A9D8F;
}
.container #informations .flight .data {
    width: 86%;
    margin: 0 7%;
    float: left;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
}
.container #informations .flight .data:before,
.container #informations .flight .data:after {
    width: 15px;
    height: 73px;
    content: '';
    display: block;
    position: absolute;
    top: 70px;
    background: white;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2);
}
.container #informations .flight .data:before {
    left: -5px;
}
.container #informations .flight .data:after {
    right: -5px;
}
.container #informations .flight .data h2 {
    font-size: 15px;
    width: 100%;
    text-align: center;
    float: left;
    margin: 5px 0;
    color: #373F51;
}
.container #informations .flight .data p {
    font-size: 12px;
    width: 100%;
    text-align: center;
    float: left;
    margin: 0;
    color: #8B9AAB;
}
.container #informations .flight .data i {
    font-size: 30px;
    margin-top: 5px;
    color: #D8DBE2;
}
.container #informations .content {
    width: 86%;
    float: left;
    margin: 15px 7%;
}
.container #informations .content h3 {
    font-size: 14px;
    text-align: left;
    color: #2A9D8F;
    display: block;
    float: left;
    border-bottom: 1px solid #2A9D8F;
    padding: 0 5px 8px 0;
}
.container #informations .content p {
    width: 100%;
    float: left;
    font-size: 12px;
    line-height: 18px;
    color: #8B9AAB;
    margin: 0;
}
.container #informations .content p.website {
    color: #E76F51;
    font-weight: bold;
    margin: 15px 0;
}
.container #informations .content .about {
    width: 100%;
    float: left;
    display: flex;
    justify-content: space-around;
    margin: 30px 0 0 0;
}
.container #informations .content .about .item {
    min-width: 80px;
    text-align: center;
    border-radius: 10px;
    padding: 10px 5px 5px 5px;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
}
.container #informations .content .about .item i {
    font-size: 25px;
    color: #E9C46A;
}
.container #informations .content .about .item p {
    color: #E9C46A;
    width: 100%;
    float: left;
    margin: 5px 0 0 0;
    font-size: 10px;
}

HTML

<div class="wrapper">
        <div class="item">
            <figure>
                <img src="https://www.vancitybuzz.com/wp-content/uploads/2012/11/Vancouver-Skyline.jpg" alt="" />
                <figcaption>Vancouver</figcaption>
            </figure>
        </div>

<div class="item">
            <figure>
                <img src="https://www.blogto.com/upload/2010/08/20100829-1999_Skyline.jpg" alt="" />
                <figcaption>Toronto</figcaption>
            </figure>
        </div>
        <div class="item">
            <figure>
                <img src="/uploads/161001/lighten3.jpg" alt="" />
                <figcaption>Space</figcaption>
            </figure>
        </div>      
    </div>

<div id="informations">
        <div class="weather">
            <p>Weather Forecast</p>
            <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>

<div class="flight">
            <h4>Next Flight</h4>
            <div class="data">
                <div class="departure">
                    <h2>GRU</h2>
                    <p>10:25pm</p>
                </div>
                <i class="fa fa-plane" aria-hidden="true"></i>
                <div class="arrival">
                    <h2>YVR</h2>
                    <p>13:25am</p>
                </div>
            </div>

<div class="content">
                <h3>About</h3>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

<p class="website">Click here to visit official website</p>

<div class="about">
                    <div class="item">
                        <i class="fa fa-bed" aria-hidden="true"></i>
                        <p>Hotels</p>
                    </div>
                    <div class="item">
                        <i class="fa fa-gift" aria-hidden="true"></i>
                        <p>Shopping</p>
                    </div>
                    <div class="item">
                        <i class="fa fa-map-o" aria-hidden="true"></i>
                        <p>Places</p>
                    </div>
                </div>

</div>
        </div>
    </div>

</div>

Travel App

html5, travel

编辑器支持Emmet

快捷键

Travel App

html5, travel

HTML5一款电商限时折扣类移动应用网页模板

HTML5 GSAP一款很棒的竖向动画广告条模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：