Skip to content

Instantly share code, notes, and snippets.

@xynztya

xynztya/index.pug

Created June 13, 2019 04:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xynztya/a3c60cfa07b05d08bf0d1aad7c338716 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xynztya/a3c60cfa07b05d08bf0d1aad7c338716 to your computer and use it in GitHub Desktop.
Download ZIP
waypoint landing page sample
Raw
index.pug
script(src="https://cl.ly/q6Ke/jquery.min.js")
script(src="https://cl.ly/qI9e/imagesloaded.pkgd.min.js")
script(src="https://cl.ly/qI1b/jquery.waypoints.min.js")
script(src="https://cl.ly/qIja/inview.js")
header.hero.os.animate
hgroup
h2.text.vintage VINTAGE
h2.text.illustration ILLUSTRATION
h2.text.nature NATURE
.flower
.frame
section.os.animate
.inner.set-left
.section-obj
img(src="https://cl.ly/qPkG/section1.png")
.section-content
h3 Contrary to popular belief
p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
section.os.animate
.inner.set-right
.section-obj
img(src="https://cl.ly/qPWj/section2.png")
.section-content
h3 Contrary to popular belief
p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
section.os.animate
.inner.set-left
.section-obj
img(src="https://cl.ly/qR5L/section3.png")
.section-content
h3 Contrary to popular belief
p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
Raw
script.js
jQuery(document).ready(function(){
jQuery('body').imagesLoaded({ background: true },function (){
jQuery('.os').addClass('ready');
function onScrollInit( items, trigger ) {
items.each( function() {
var osElement = jQuery(this)
var osTrigger = ( trigger ) ? trigger : osElement;
osTrigger.waypoint(function() {
osElement.removeClass('animate');
},{
triggerOnce: true,
offset: '75%'
});
});
}
onScrollInit( jQuery('.os') );
});
});
Raw
style.scss
$bgC:#F3D5D7;
$color:#CE4D5A;
$textTop: 130px;
$textH:70px;
$inner: 900px;
body{
background: $bgC;
}
.hero{
height:550px;
text-align:center;
&:before{
content:"";
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
hgroup{
display:inline-block;
vertical-align:middle;
position: relative;
padding-left:80px;
}
}
.flower{
position: relative;
width:290px;
height:394px;
background: url(https://cl.ly/qIfb/hero-flower.png) no-repeat center / contain;
transition: 900ms 900ms;
opacity:1;
.animate &{
opacity:0;
}
}
.frame{
width:240px;
height:280px;
position: absolute;
right:80px;
bottom:5px;
border: 2px solid rgba($color,0.3);
z-index:-1;
transition: 800ms 100ms;
transform-origin: 100% 50%;
.animate &{
transform: scaleX(0);
opacity:0;
}
}
.text{
position: absolute;
left:-70px;
color: rgba(#000,0);
&:before{
content:"";
display: block;
height:$textH;
position: relative;
z-index:9;
}
&:after{
content:"";
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}
.vintage{
width:300px;
top:$textTop;
&:before{
background: url(https://cl.ly/qHsB/vintage-up.png) no-repeat top center / 100% auto;
transition: 1000ms 1400ms;
opacity:1;
.animate &{
opacity:0;
transform: translate3d(40px,0,0);
}
}
&:after{
background: url(https://cl.ly/qHo7/vintage.png) no-repeat top center / 100% auto;
transition: 1000ms 1300ms;
opacity:1;
.animate &{
opacity:0;
transform: translate3d(70px,0,0);
}
}
}
.illustration{
width:440px;
top: $textTop + $textH;
&:before{
background: url(https://cl.ly/qHcj/illustration-up.png) no-repeat top center / 100% auto;
transition: 1000ms 1600ms;
opacity:1;
.animate &{
opacity:0;
transform: translate3d(40px,0,0);
}
}
&:after{
background: url(https://cl.ly/qHMB/illustration.png) no-repeat top center / 100% auto;
transition: 1000ms 1600ms;
opacity:1;
.animate &{
opacity:0;
transform: translate3d(70px,0,0);
}
}
}
.nature{
width:240px;
top: $textTop + $textH * 2;
&:after{
background:url(https://cl.ly/qIV4/nature.png) no-repeat top center / 100% auto;
transition: 1100ms 1800ms;
opacity:1;
.animate &{
opacity:0;
transform: translate3d(60px,0,0);
}
}
}
section.os{
transition: 500ms;
&.animate{
background: rgba(#fff,0.5);
}
}
.inner{
width:$inner;
margin: 0 auto;
max-width:90%;
padding:20px 0;
&:after{
content:'';
display:block;
clear:both;
}//切記透過after製造自我清除float
}
.section-obj{
width: 40%;
transition: 500ms;
.set-left &{
float: left;
.animate &{
transform: translate3d(-100px,0,0);
opacity:0;
}
}
.set-right &{
float: right;
.animate &{
transform: translate3d(100px,0,0);
opacity:0;
}
}
img{
width:100%;
height:auto;
box-shadow:0 20px 50px -15px rgba(darken($color,10%),.7);
}
}
.section-content{
padding-top:50px;
color: $color;
transition: 500ms;
.set-left &{
margin-left: calc(40% + 20px);
margin-right:10%;
.animate &{
transform: translate3d(100px,0,0);
opacity:0;
}
}
.set-right &{
margin-right: calc(40% + 20px);
margin-left: 10%;
.animate &{
transform: translate3d(-100px,0,0);
opacity:0;
}
}
h3{
font-size:30px;
}
p{
font-size:16px;
line-height:1.5;
margin-top:10px;
}
}
Raw
waypoint-landing-page-sample.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment